How to show twitter summary card with tweets? - twitter-card

I have the following meta tags on all pages of my site :
<meta name="twitter-card" content="summary">
<meta name="twitter-title" content="$row["title"] />
<meta name="twitter-description" content="$row["description"]>
When I send a link from my site to twitter timline, I dont see the view summary option in my tweets. My domain is varified for twitter summary card and I echoed the data from DB, it is working file but it is not showing in tweets. Does someone know how to fix it?

I see a few minor issues with the code you're using, which are:
On Twitter's website, in sample code, there are 5 tags while your're using only 3.
Also, the name of the tags is different than what twitter has used in their sample code.
Lastly, content attribute in the last two HTML tags does not have a closing quotation (").
Try changing your code to something like the following. (Note: You'll need to edit some of the code as per columns in your db)
<meta name="twitter:card" content="$row['summary']" />
<meta name="twitter:site" content="#your-twitter-handle" />
<meta name="twitter:title" content="$row['title']" />
<meta name="twitter:description" content="$row['description']" />
<meta name="twitter:image" content="$row['img']" />
Source: Twitter

Related

Getting Link Info ... Telegram for a Wordpress blog

I have a blog and until some weeks ago I was able to post (getting the link preview) in Telegram and Facebook. I can continue doing in Facebook, but in Telegram, it seems that something changed and now I can't get the preview. I get the message "Getting Link Info..." and in some seconds it disappears, and doesn't get the link as I used to get some weeks ago.
I didn't modify anything in my blog when it stopped working. And now, after upgrading to latest WP version, it continues failing.
As mentioned, Facebook preview continues working, so it means that Open Graph attributes are defined properly (at least as required for Facebook).
I tried to clean Telegram Cache (using WebPage bot), but the result is exactly the same. I'm not getting the preview when trying to connect. It seems that Telegram validation if failing in somewhere.
It seems that it could be the hosting blocking the Open Graph info for Telegram.
<meta property="og:image" content="mydomain.org/wp-content/uploads/2022/06/helados.jpg" />
I just tried to move just one page to a temporal hosting to easy test with it, and I have realized that if I keep the original page (with references to my domain) I can see properly, but when trying to get the preview with Telegram it doesn't work.
Now, I change the above parameter to reference to the new hosting (just the image) and... IT WORKS. I can get the link preview.
So, now I'm wondering if there is some way to avoid this, or it could be just a FW rule in my hosting trying to avoid this Telegram Preview. But as I mentioned before, it works for Facebook (the preview). A bit strange :-(
Do you know where could be the issue?
This is the URL I'm trying to get the preview: mydomain.org/helados/ ... and this are the attributes in the page:
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Helados" />
<meta property="og:description" content="Estos helados son...." />
<meta property="og:url" content="mydomain.org/helados/" />
<meta property="og:site_name" content="Mi Web" />
<meta property="article:published_time" content="2022-06-25T13:55:53+00:00" />
<meta property="og:image" content="www.mydomain.org/wp-content/uploads/2022/06/helados.jpg" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="768" />
<meta property="og:image:type" content="image/jpeg" />
<meta name="author" content="Me" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:label1" content="Escrito por" />
<meta name="twitter:data1" content="Me" />
<meta name="twitter:label2" content="Tiempo de lectura" />
<meta name="twitter:data2" content="2 minutos" />

LinkedIn article share looks good in preview, but image is missing in actual post

I am trying to share an article (or any article from this site) on LinkedIn, but the image that is specified as og:image never shows up in the post.
One of the articles I test this with is http://insights.ortec-finance.com/nl-nl/2018/02/05/press-release-data-analytics and I'm using the article share link based on https://www.linkedin.com/shareArticle?
When you look at the preview, it all looks like it's going to work fine:
But after posting the article and looking at what has been posted, the image is missing:
I've read tons of reports of similar problems and tried all the remedies I could find, but it still doesn't work. What I've tried so far:
1) Made sure that all the required og: meta tags are present.
<meta prefix="og: http://ogp.me/ns#" property="og:image"
content="http://insights.ortec-finance.com/-/media/OF8/data-analytics-hero-linkedin.jpg" />
<meta prefix="og: http://ogp.me/ns#" property="og:url"
content="http://insights.ortec-finance.com/nl-nl/2018/02/05/press-release-data-analytics" />
<meta prefix="og: http://ogp.me/ns#" property="og:title"
content="Data Analytics | Ortec Finance" />
<meta prefix="og: http://ogp.me/ns#" property="og:description"
content="removed content for readability" />
<meta prefix="og: http://ogp.me/ns#" property="og:type"
content="article" />
2) Made sure that the image meets the LinkedIn requirements (less than 5MB, at least 1200x600 in dimensions).
3) Made sure the content-type of the image is set correctly in the response header.
4) Tried several other articles and they all show the same symptoms: image is displayed in preview, but not once the share is posted.
What am I missing here?
I am experiencing the same - think its a major LinkedIn bug and so far they havent been able to clarify...Our developer spent +40 hrs trying to figure it out, but now we realized that it must be a LI bug...hopefully they`ll fix it soon as it has been going on for almost a week...

Why won't my site's preview image show on a Facebook share?

I'm pulling my hair out on this one. I'm trying to share my ASP.Net Web Forms site on Facebook, but the preview doesn't show the Image or Description I have set up. I found this chunk of code that's supposed to do the trick. I put it in my MasterPage, but it just isn't working:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head id="Head1" runat="server">
<title>MySite</title>
<meta property="og:url" content="http://www.example.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.example.com/img/fbbanner.jpg" />
...
According to Facebook's Sharing Debugger,
The 'og:image' property should be explicitly provided, even if a value
can be inferred from other tags.
...but, hell if I know what that's supposed to mean. What's funny is, if I remove the meta tags out entirely, I get the same error. When I click on "See exactly what our scraper sees for your URL," I see the meta tags in the rendered code... I'm at a total loss. I can't find an article or an answer that was written in the past several years, so I have a feeling the information I'm getting is outdated. I just can't figure out the magic words...
Update Now, suddenly it works fine. I just clicked "Scraped Again" after I posted this, and it seems to be working. I don't really get it... :(
if you are using any cache plugin, make sure you clear all your caches. Also make sure the image you are using has the recommended facebook size: 1200(w) x 630(h) or 600 x 315. If not it will choose randomly some of your images in the website that are suiting the facebook needs. Read more here

How Telegram makes the rich preview?

Anybody knows how Telegram makes the rich preview?? It would be very useful to learn about it for a development I am making. It is a server side features, so I think the code is not available. Isn't it?
It uses Open Graph protocol: http://telegram.wiki/manuals/general/link-previews
In some posts, the preview doesn't need any work from you, for example if you have a photo URL link in your post, that is an entity of the message.
But in other cases you need to add some tag in your material, for example when you add one URL that points to an article in your website, you must tag and your HTML tag must change:
<html prefix="og: http://ogp.me/ns#">
your head tag
<meta property="og:title" content="title text" />
<meta property="og:image" content="an image url that exist in your page" />
<meta property="og:url" content="current page url" />
<meta property="og:description" content="description text" />

Facebook Connect Debugger and site won't use Meta Tags [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
I'm trying to use Facebook Comments on a Drupal website correctly. The comment box shows up and works exactly as I want it to, but when I go to facebook debugger http://developers.facebook.com/tools/debug it tells me that none of the required open graph meta tags (og:title, etc.) are set. It's not recognizing any of the meta tags, which also means I can't use the fb:admins tag to moderate comments.
My problem sounds very similar to this one: Missing og meta tags when running debug but I manually set the Content-Length parameter using PHP and the meta Tags still are not being recognized by facebook. I'm running PHP 5.2.9, and I have NO access to upgrading or editing it at all. (University environment, they're a trifle slow and obfuscating when asking for server changes.) I've found multiple questions on Stack Overflow along similar lines, and have tried implementing all the suggested fixes to no avail, any help would be appreciated!
Please let me know if I left out any needed info! I'm getting quite frustrated here, it took about 3 minutes flat to get the facebook comments to work, and now hours and hours of work still haven't resolved this issue. . .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title><?php print $head_title ?></title>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<meta property="fb:app_id" content="{my app id}" />
<meta property="fb:admins" content="{my facebook id}"/>
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:type" content="sports_team" />
<meta property="og:url" content="<?php echo $url; ?>" />
<meta property="og:image" content="http://example.com/logo-200.jpg" />
<meta property="og:site_name" content="Site Name" />
Putting those meta tags on my page worked so I think you have the tags correct.
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fpaulisageek.com%2Ftmp%2Fso_7517794.php
Maybe you are issuing content before the <head>? Or your webserver isn't responding well to an HTTP query with a Range: header? Check your access logs for the exact query Facebook is making to see what to test.

Resources