I'm using Graph API JS SDK v2.11 and trying to share a link from my website to my Facebook profile. Now, I'm facing the same problem that Facebook has already mentioned here (Please search Pre-caching images):
I just can't see image in dialogue preview on first click. (Although image is shared successfully in my profile)
On second click, it is rendered fine. I have provided all necessary meta tags including og:image, og:image:width, og:image:height (according to width and heights of my images) but still it's not working!
I just can't understand why it's not working! I read same solutions on other similar questions but nothing is working. Can it be because of different origins (The image link has a sub domain)? Does anybody have any idea about it?
Here's markup for meta tags:
<meta property="og:url" content="https://www.example.com/views/1103/your-facebook-profile-picture-popularity/1522777597_5ac3bdfd8c524">
<meta property="og:type" content="website">
<meta property="og:title" content="Know about your Facebook profile picture popularity">
<meta property="og:description" content="Example has a collection of latest fun apps. Know how much your Facebook friends care about you and find out your profile picture popularity.">
<meta property="og:image" content="https://api.example.com/v1/app/images/img_1522777597_5ac8hdfd8c524.jpg">
<meta property="fb:app_id" content="1848969382006870">
<meta property="og:image:width" content="660">
<meta property="og:image:height" content="560">
Image dimensions are: Width 660px, Height: 560px
Image is visible to public (i.e., has all necessary permissions to others)
PS: I can pre-cache the image with the Facebook's Sharing Debugger, but the images are generated dynamically, so it's not possible to do it manually.
Related
Working on a site that contains OpenGraph tags. However, when trying to share one of those pages, the Facebook preview isn't populating properly:
For example: https://www.hkinsurance.com/2018/03/noise-reduction-restaurant/
OG Tags:
<meta property="og:locale" content="en_US"/>
<meta property="og:site_name" content="H&K Insurance"/>
<meta property="og:title" content="Noise Reduction for Your Restaurant - H&K Insurance"/>
<meta property="og:url" content="https://www.hkinsurance.com/2018/03/noise-reduction-restaurant/"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="Reducing noise is key to maintaining ambiance in your restaurant. Learn about noise reduction techniques on our blog. Call 617-612-6515 to evaluate your insurance coverages."/>
You need to enter your page url and click Scrape Again button in the next page.
https://developers.facebook.com/tools/debug/
If this doesn't help maybe you don't have property requirements for og tags.
Check out this: https://developers.facebook.com/docs/sharing/best-practices
For og:image if you changed image for same url, sometimes facebook caching the image and Scrape button doesn't work. You have two options: wait until facebook cleans its cache or change image name and og:image propery path for the new image and Scrape Again.
After a lot of confusion, I discovered that my file was in UTF-16 format, not UTF-8. As soon as I converted it, everything worked.
If I paste the following URL into Facebook I can share an animated gif. It's not a movie and not flash, Facebook now supports gifs without those workarounds. I can click it to pause and it shows "GIF" in a circle while paused.
http://giphy.com/gifs/hot-funny-cartoon-fBEDuhnVCiP16
No matter what I replicate from that page's meta tags I cannot get Facebook to share an animated gif form my own page. I've even gone so far as to copy the entire code of that page and serve it myself (Changing <link rel="canonical" and <meta property="og:url" to match my url).
Open Graph Object Debugger gives identical results for both the real Giphy page and my replica. Interestingly, the preview in Object Debugger is the old style Flash movie for both pages. However, when I paste the Giphy url into my Facebook it shows the gif - my relica shows the Flash.
Do Giphy get some special treatment from Facebook? Do I need to do something different?
I was able to create an .html file which, when the link is pasted as a status, displays as an animating (and looping) GIF in the Facebook feed. In my html page, I use the following meta tags in the header:
<meta property="og:site_name" content="Site Name">
<meta property="og:url" content="url to GIF on web">
<meta property="og:title" content="Title of GIF page">
<meta property="og:description" content="Some description">
<meta property="og:type" content="video.other">
<meta property="og:image" content="Same as og:url above">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="400">
The thing that gave me trouble when I was working on this was the og:url property. It should point directly to the GIF, not the .html file that these meta tags are a part of. Also, og:image should be the same as og:url.
I didn't test if the width and height properties are required.
Product Manager for the Giphy API team here. No special treatment; I wish--filing bugs with Facebook takes forever.
The Flash tag is legacy and we should clean it up. FB now does support GIFs and the answer by vegashacker is essentially correct.
An important point which answers have missed, how to make GIF image (if clicked) redirects to the article which belongs to instead of the GIF link itself?
The important parts are:
<meta property="og:image" content="url/to/image.gif">
<meta property="og:url" content="url/to/image.gif">
<meta property="og:url" content="url/to/article">
Add two og:url tags. First one should be the same as og:image pointing to the GIF image URL. Second one should be the URL to the article.
Actually, I looked at their source code, and I am 99% sure that they are actually showing a video. For this gif, there are a number of open graph meta tags associated with the page:
<meta property="og:type" content="video">
<meta property="og:image" content="http://media.giphy.com/media/H2ANZTOXVepbO/giphy-facebook_s.jpg">
<meta property="og:image:width" content="480">
<meta property="og:image:height" content="270">
<meta property="og:video" content="http://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&giphy_height=297&video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&giphyWidth=400&path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&giphyHeight=297&gif_id=H2ANZTOXVepbO&mode=embed&giphy_width=400">
<meta property="og:video:secure_url" content="https://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&giphy_height=297&video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&giphyWidth=400&path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&giphyHeight=297&gif_id=H2ANZTOXVepbO&mode=embed&giphy_width=400">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="470">
<meta property="og:video:height" content="297">
and most of them are video tags. These tags are associated with the page and not a gif. If you share the straight gif image, then it will not animate.
To confirm this, if you plug the page into the Facebook URL debugger, then this can be confirmed. There is no mystery, this is shared as a flash video.
I have been working on this for a while with Facebook debugger and found how to post swf but just today I also successfully posted my animated gif.
I simply pasted my link https://www.example.com/my.gif into Facebook debugger and it said could not find URL but displayed fine giving app id number and then I went ahead and posted in my timeline for all to see :) So no html or tags to achieve that but simply a secure link to my gif file on my server.
Never did I work out how to achieve it via html embedded!
When I try to share from http://www.giftry.com I am given the small square thumbnail image instead of the large rectangle. The image linked to in the open graph meta tags is larger than Facebook's recommended 1200x630.
I've tried using the debugger, but there are no errors and everything looks correct. Any thoughts on what I can do?
Here are my og meta tags:
<meta property="og:title" content="I need your gift ideas!">
<meta property="og:site_name" content="Giftry">
<meta property="og:url" content="http://www.giftry.com">
<meta property="og:description" content="Come help me at Giftry — a place where gift givers unite to curate giftries full of fabulous gift ideas. Whether you create your own giftries or explore gift ideas for others, Giftry makes it easy to find ‘just the thing’, for anyone and any occasion. Now, let’s get gifting!">
<meta property="og:image" content="http://ec2-static.giftry.com/img/giftry_gift_surprise_large.jpg">
<meta property="fb:app_id" content="356150731192079">
Seems that I have find a way how to resolve this. When I remove fb:app_id and update url via debuger the rectangular image were shown as expected. Then I have created new fb:app_id and it works fine as well. If I turn back my old app id facebook show me small square thumbnail again.
I've a web page and I want to share it in facebook but the image shown is not ok.
In the HTML code of the web I have:
<link href="http://www.example.com/img/logo2.png" rel="image_src" />
In the options to select the image, there are other images, but not logo2.png
I've tried to delete facebook cache with facebook debugger, but the result is the same.
Edit:
If I add ?v=1 to the end the URL when I share it, the logo option is shown. It means that facebook debugger is not deleting the cache.
Also, I want that the logo image be the first option.
Can you help me?
Solved:
<!-- facebook tags -->
<meta property="og:image" content="http://www.example.com/img/logo.png"/>
<meta property="og:url" content="http://example.com">
<meta property="og:title" content="Portfolio | web">
<meta property="og:description" content="Portfolio">
I think that you may be using the wrong tag. I haven't done this in a while, but I believe that it should be a <meta tag with a property="og:image" and then content set to your image. The following (really old) question addresses this issue/conforms to what I remember: How does Facebook Sharer select Images and other metadata when sharing my URL?
Let me know if it works :)
I have searched through a number of similar posts and most seem to be asking how to change their thumbnail...I'm not even getting as far as that.
I have the following meta information in my :
<meta property="og:title" content="MyWebsite"/>
<meta property="og:type" content="company"/>
<meta property="og:url" content="http://www.myWebsite.com/"/>
<meta property="og:image" content="http://www.myWebsite.com/images/logo.jpg"/>
<meta property="og:description"
content="MyWebsite is brilliant."/>
When I attempt to paste http://www.MyWebsite.com into a Facebook status update, it is correctly displaying the description, but it is not pulling the image.
I have used the Facebook Debugger/Linter and it is pulling everything correctly...so where is the disjoint? I have tried different browsers and still no thumbnail.
One thing I have noticed is that if I validate my website with W3C it is saying that "property" is not allowed as an attribute. Is this normal?
Are there dimensions for the logo? Mine is roughly 574px by 187px.
Use the debug tool as the administrator of your application (set the app_id OG tags to help with this). If you are the app administrator, the debug tool should reset the cache and pickup the new image when sharing on Facebook.