when you try to share a link on a fan page, some times use the image from meta og:image but some times uses a random image.
site is: http://maite.com.br/blog/
metas i'm using:
<meta property="og:image" content="http://maite.com.br/blog/imagens/posts/face_icon.jpg"/>
<meta property="og:url" content="http://maite.com.br/blog/"/>
<meta property="og:type" content="blog"/>
<meta property="og:tittle" content="Maite Proença Blog"/>
i have had this same problem . when i shared some thing on face book it doesn't show as the same featured image on my website: my site: http://www.technobezz.com/
If you are using wordpress please try these plugin's from wordpress because it worked for me and others
http://wordpress.org/plugins/facebook-featured-image-and-open-graph-meta-tags/
thanks
Related
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!
I have this meta tag for an image to pull when the link to an article is posted on FB:
`<meta property="og:image" content="http://crossfit954.com/photos/t-316.jpg"/>`
However its pulling 3 other images not including the t-316.jpg I need. Running it through
the FB debugger says Can't Download Could not retrieve data from URL.
I'm not sure what else I need to get that image to be the thumbnail that posts on FB when I paste the link, any thought?
The debugger has all errors you need!
Use a bigger image to show the thumbnail you want and add the reuqired OGP tags
<meta property="og:title" content="Example" />
<meta property="og:url" content="http://example.com" />
<meta property="og:image" content="http://example.com/example.jpg" />
i added:
<meta property="og:title" content="This is a test title"/>
<meta property="og:description" content="This is a test decription of my shared link"/>
on the <head> part of my page but this is the outcome of my share.
what am i missing here to add a custom description and title for my share link?
I had the same problem, i came to find out that my meta for og:url wasn't right, i found this out by using the facebook debugger tool.
Input your page url and it will show you the information it could retrieve, or else it will tell you why it couldn't find the date
https://developers.facebook.com/tools/debug
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 want to share an article from our website on facebook, but we are facing two problems:
1/ Almost all the time, the suggested pictures are pictures from the website but from other pages, not from the article I want to share. (And the picture has a straight relation with the subject of the article)
2/ this type of link http://www.kacileo.fr/blogs/4/1wblmb-la-face-cach%C3%A9e-de-nos-faiblesses can't be shared on facebook because we don't have any proper title and picture.
Try by yourself and you'll see! But this link works on linkeIn, Viadeo...
So, do you have any answers? Is there any people who have the same issue ?
Thanks
Facebook uses the Open Graph Protocol when displaying the preview of your link. The best way to tell the OGP what to display is adding some meta tags to the <head> of your page.
<meta property="og:title" content="Example Title" />
<meta property="og:image" content="http://example.com/exampleimage.jpg" />
<meta property="og:description" content="Example description" />
<meta property="og:url" content="http://example.com">
More information on Facebook's website