On LinkedIn here "image must be at least 80 x 150 pixels". On Facebook here image "cannot exceed 130x110 pixels". I want to use a php function to resize a thumbnail for Facebook or LinkedIn.
How can I detect if is Facebook or LinkedIn when I share a link?
EDIT(Details):
When I paste a link to share it in Facebook or LinkedIn, they get the info that is in these tags inside the head of a html document:
<meta property="og:url" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="image.jpg" />
<meta property="og:title" content="title" />
<meta property="og:type" content="website" />
<meta property="fb:app_id" content="id..." />
<meta property="og:locale" content="en_US" />
For the og:image part for LinkedIn if is smaller then dimensions mentioned it will ignore it, while for Facebook the maximum required is smaller then what LinkedIn wants, and on Facebook for a wrong picture it looks to display a image of their own by default. So I'm trying to detect if I share a link on Facebook or LinkedIn to resize appropriate
Look for the user agent of the request, if it's Facebook then serve the Facebook optimized image otherwise the default one (linkedin sizes).
facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)
Source: Open Graph Protocol, Best Practices section.
NOTE: While this is not the purpose of this user agent (it's not clear what is allowed and not allowed). But I think your purpose won't violate any platform policies.
Related
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" />
I'm really struggling to get LinkedIn to recognise an og:image. My og tags look like this:
<meta property="og:type" content="website" />
<meta property="og:title" content="My title here" />
<meta property="og:url" content="https://www.example.com/some-page" />
<meta property="og:description" content="Description here" />
<meta property="og:image" content="https://www.example.com/og-image.png" />
So far I've tried:
checking the og:url matches the current page
checking the image exists
adding prefixprefix="og: http://ogp.me/ns#" to my HTML tag
changing that prefix to prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"
checking the site's SSL settings (as per Share on LinkedIn with og)
ensuring my image is at least 1200x672px
ensuring my image is under 5MB
I'm not sure what else there is to try. Any ideas?
Aha – just tried making it a JPG rather than PNG and LinkedIn now sees it. That's kind of shocking but hopefully that'll help someone else!
I'm developing a website, I want to show my site info in social application like telegram when my site link is set. like the image below.
I set these tag on head site:
<meta property="og:type" content="website" />
<meta property="og:title" content="title" />
<meta property="og:description" content="desc" />
but nothing happen!
What should I do?
I found that my site can not be seen from outside of my country!
and that is the problem!
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" />
I need to share dynamically created URLs in website to Facebook and LinkedIn. I am sharing to Facebook properly and all needed og tags have been set. But for LinkedIn, it is not working.
This is my URL: https://www.fourthambit.com/blogs_fa/102048
It is properly parsed in Facebook and preview is shown correctly.
But the same link is not working in LinkedIn.
Am I missing anything else?
All needed meta tags are set:
<meta property="og:title" content="Indian Media: Then.... Now... and Later" />
<meta content="Sensationalism has become synonymous with the Indian Media, especially Television. In 2008 dur..." name="description" />
<meta property="og:description" content="Sensationalism has become synonymous with the Indian Media, especially Television. In 2008 dur..." />
<meta content="Academic network" name="keywords" />
<meta property="og:image" content="https://www.fourthambit.com/article/getarticlephoto/big/ZGNlZQD4/0/102/20150807050217-12217198186.jpg" />
<img src="https://www.fourthambit.com/article/getarticlephoto/big/ZGNlZQD4/0/102/20150807050217-12217198186.jpg" style="display: none !important;" />
<meta property="og:type" content="website" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
This is the ajax call going while I try to view a preview in LinkedIn update status bar text-area.
https://www.linkedin.com/sharing/api/url-preview?url=https://www.fourthambit.com/blogs_fa/102048
The reason to this problem could be the following:
"Unfortunately LinkedIn caches the data it retrieves the first time the link is previewed and keeps it cached for a week!"
and the solution:
"The only way to “clear” the sharing preview cache for LinkedIn is to trick LinkedIn into thinking your page is a different (and new) page.
This is done by adding a made-up parameter to the link. It doesn’t affect your webpage, but it does force the metadata to be re-fetched.
Example:
Original link: http://beantin.se/consultant-resume
"New" link: http://beantin.se/consultant-resume?1
LinkedIn has launched Post Inspector. You can now do the following to clear LinkedIn Preview cache:
Step 1: Visit https://www.linkedin.com/post-inspector/inspect/
Step 2: Enter your url and click on Inspect, You will see the updated preview image
Step 3: Now try sharing your url on LinkedIn
It could be a caching issue, or it could be a misuse of the LinkedIn API.
If you think you have a caching problem, try...
Inspect your webpage at the LinkedIn Post Inspector.
Try sharing not just example.com, but, example.com/?someFake=Parameter. Since the URL is different, it shouldn't hit the cache.
So, if that's it, then why isn't og:description showing???
Because the LinkedIn API supports two levels:
Level 1: If you supplied an image, show image with title/domain.
Level 2: If you supplied a description, but no image, show description with title/domain.
Is it possible to display: title, image, description, url? No, it is not. I gleaned this over two weeks of struggling with the LinkedIn support team (oh the humanity).