I'm using Facebook opengraph API in my html page meta tags.
I've given the url of the image in the og:image property, but when I share the page in FB, it's not showing the image.
But, after the first time, when I share the article again, the image appears.
Can any one explain why it is happening?
When I share the same article in whatsapp it is showing the image for the first time only.
Thanking you in advance.
Facebook has a cache of scraped links, and the first time you're sharing the link, the image isn't available in FB cache.
You can use the FB precaching tool to "force" a first scrape of your page, or you can add og:image meta tags to your page:
<meta property="og:image:width" content="300"/>
<meta property="og:image:height" content="300"/>
Read the link above for more information about FB sharing.
Be sure to check how FB "see" your page using the debugger.
Related
I created a web app using flutter and hosted that using firebase. With firebase I got a hosting url as app-name.web.app
SO is there a way to add an image preview whenever I share that url on social media?
In the image below, 1st url doesn't have any preview image, and in the second url we can see the image preview.
I think you mean the <meta property="og:image" content="<URL to your image>"> tag
This tags are used for social media sharing. There are several more.
og:title – Title of the page
og:image – URL to your image --> this is what you want to use
og:type – Type (eg. article)
og:url - URL to this specific page
Have a look at Open Graph protocol
Add the tags you need to your web/index.html.
I'm trying to post a link to LinkedIn. Once the link is typed/pasted, a preview appears. This preview is supposed to draw properties such as the thumbnail image, title, description, and URL from Open Graph tags. If it cannot find such tags, it uses the rest of the page to figure it out.
Here is LinkedIn's documentation page on this specific matter.
It says to use the following tags:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
I've done exactly that, and while Facebook is able to see all of the data that I've specified, LinkedIn is somehow having trouble.
I've tried all of the tricks:
Appending a fake parameter to the URL to trick LinkedIn into thinking the link is new
Validating the entire page in the W3C validator and fixing any errors
Adding prefix="go: http://ogp.me/ns#" in the meta tags
Logging in and out of the LinkedIn Account
Using the non-HTTPS version of the link
Since unlike with Facebook, you cannot force clear and re-scrape the cache, I can't actually check what LinkedIn is seeing on the page. The data shown in the link preview is clearly taken from when there were no Open Graph tags (it uses the first image in the page as the thumbnail, no description, and it uses "Home" for the title - which is not the title of the page). So either nothing is working to clear this cache, or it's ignoring my tags.
Has anyone had any luck with this working, without having to wait for the 7-day cache to clear, despite trying all of the fixes above?
I would like to add post's preview image to facebook Open Graph meta tag.
One possible solution is to use data:blog.postImageThumbnailUrl:
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
However, the default post image thumbnail which is created by Blogger is too small (72px × 72px), and it doesn't look really nice when facebook tries to stretch it while creating the post's story based on this image thumbnail (facebook says "all the images referenced by og:image must be at least 200px in both dimensions").
So, the question is:
is there any way to retrieve somehow the image's url from the post's body and insert it into facebook Open Graph meta tag which was mentioned above?
(let's say every post of my blog has image tag inside its body:
http://loveclubhouse.blogspot.com/)
Yes! You can. It's kind of sloppy looking, but functional. Here the og:image property from my blog. As you see it is actually grabbing an image from my Facebook profile:
<meta content='http://sphotos.xx.fbcdn.net/hphotos-ash3/538645_3357819035748_1577184006_2624573_712999292_n.jpg' property='og:image'/>
When you load an image from your photo library in Facebook, you can usually right click on it and select "View Image". When you do that, you'll see the URL to the actual image as it is stored by Facebook. So long as the image is publicly accessible, there won't be any problems.
You can see it in action at my blog if you decide to click Recommend (the current page) or Like (of an individual post). :)
I use facebook share button for every post in my blog.
(http://loveclubhouse.blogspot.com/)
When there was no Open Graph meta tag included in my blog, facebook would retrieve the first picture from the post's page to make a preview story on the sharer's wall for this post.
Once, I added an Open Graph image meta tag to my blog:
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
However, the size of postImageThumbnails turned out to be too small, so I decided not to use them anymore and removed the above metnioned Open Graph meta tag from my blog.
The problem is:
Even though I removed all Open Graph meta tags from my blog, facebook still somehow creates preview stories for my posts based on those tiny data:blog.postImageThumbnailUrl and doesn't want anymore to retrieve the first pictures from posts content as it was before I made any changes in my blog.
Try facebook debugger tool, it deletes the cache as well.
I am not sure why this is happening. But, When i try to post Link Omitted on the company's facebook page, the thumbnails aren't loaded by the facebook. Whereas if I try to post some earlier link from my website, like Link Omitted, all the pics from that page are loaded.
Can someone tell why this happens...Also, sometimes, facebook doesn't load all the images from page.
You rely on how Facebook scrapping your page content which isn't a best way to achieve what you want. The reason you see image for older links is probably caching.
To ensure you have images with posting your content on Facebook you should add og:image OpenGraph meta tags.
For more info on this read OpenGraph documentation and use Facebook Debug tool to check if you have any issues with scrapping and/or all details scrapped correctly.