I want to share a video with a thumbnail of only one image via sharer.php
I understand that most of people use Feed dialog with flexible UI but I need advanced options in this case.
A dialog looks like this and I want to have only one thumbnail the on I specify with og:image on a relative page
My OG tags look like this:
<meta property="fb:admins" content="*admins*" />
<meta property="fb:app_id" content="*app_id*" />
<meta property="og:type" content="movie" />
<meta property="og:video:height" content="*height*" />
<meta property="og:video:width" content="*width*" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:title" content="*title*" />
<meta property="og:description" content="*description*" />
<meta property="og:image" content="*image*" />
<meta property="og:url" content="*url*" />
<meta property="og:video" content="*video*" />
And I use a basic function to call a Share This Link dialog
u = $(*link*).html();
t = $(*name*).html();
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=*width*,height=*height*');
return false;
My question is how can I modify my code / add code to have only 1 thumbnail instead of 1 of 2 message
I tried changing my code, removing og:url, checking og:image, etc, using facebook debugger to clear its cache. And I could find nothing on net either.
I've been told you have to modify the code in (meta property="og:image" content="image" /) to
(meta property="og:image" content="http://www.yoursite.location of the image" /)
I've personally messed with this for several days and finally accomplished it! The way I did it was to publish the image I wanted FB to use for my site to my server. Then, in my browser, I did a right-click on the newly published image and chose "Copy image location". Then I added the above code to my page html between the header tags, and pasted the copied image location between the quotes. Be sure that your image is at least 200 x 200 px - they say the bigger the better, but not more that 5MB in size. I was having a lot of trouble getting FB to pick my specified image because I was making it too small. I've finally gotten success just now by resizing my image to 1000x712, and it's working.
In my case, Facebook has still not recognized my specified image as the ONLY image I want used, but I've also been told that FB will "scrape" my site every 24 hours and, hopefully, once that's done, the multiple images option will disappear. Hope this helps.
Related
We have a site that we want users to share an image based on the results of their input. Basically a map with selected countries unique to them.
We previously could do this using the sharer.php parameters up until about today but these now seem to have bitten the dust for good. They were due to be discontinued this month.
Our alternative (hopefully someone has better!) is to set the og:image property for our home page (which is what we want linked on the FB post) dynamically based on the URL parameter. All seems straight-forward, however whenever we test share FB uses the standard image for the home page as if there is no URL parameter.
Does anyone know definitively if FB uses the URL parameters when it crawls a site to get the image? Our tests seems to show they don't but if anyone knows a way around this I would be eternally grateful.
FYI, here are the og tags so you can see how they're set dynamically. It's web2py but should make sense I hope:
<meta property="og:url" content="{{=cfg.global_base_url + request.env.web2py_original_uri}}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{=(cfg.global_strap_line + ' | ' + cfg.global_app_name) if not response.title else response.title}}" />
<meta property="og:description" content="{{=cfg.global_open_graph_description if not response.description else response.description}}" />
<meta property="og:image" content="{{=cfg.global_share_image if not response.share_image else response.share_image}}" />
<meta property="og:locale" content="en_GB" />
Here's an example share URL: https://www.wherecani.live?pid=9d684d33-78ad-4f39-9010-458583dbfcef
You can see in the HTML that the og:image relates to the URL parameter as expected.
I had the same problem. This is how i fixed it.
This is going to show the default imageL
<meta property="og:url" content="http:example.com">
<meta property="og:image" content="http:example.com/img/fb.jpg">
To change the image dynamically based in the url, you need to also add the og:url like this
<meta property="og:url" content="http:example.com/pages/cars">
<meta property="og:image" content="http:example.com/img/pages/cars/fb.jpg">
It worked for me. Tested in open graph.
Here's another explanation.
I'm building an image on the fly to attach to page to be shared on facebook. Everything seems to be going great until it hits the share dialog. Facebook doesn't seem to be scraping, because the image isn't showing up. If I refresh that dialog page, it does load the image (having crawled it from the first go?).
I've read several pages that say I need only specify og:image:width and og:image:height to allow for immediate rendering, but that doesn’t seem to be working. Here are my meta tags:
<meta property="fb:app_id" content="###"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="###" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />
<meta property="og:image" content="http://the-domain/the-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
Am I missing something here?
For these kinds of issues, I recommend checking out the debugging tool that Facebook provides. It's great for quick identification of show stopping errors like you're receiving.
https://developers.facebook.com/tools/debug/
Just a couple of things to keep in mind, sometimes the image or page will time out if Facebook finds that it's taking longer than 1s to fetch the data. I've also found issues with my own implementations if the og:url is different than the page you're expecting Facebook to fetch. The two values must match, because ultimately it's the og:url value that facebook is trying to scrape.
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'm trying to figure out how the Facebook share protocol is getting the images it is.
Example article: http://www.startribune.com/sleepy-eye-quads-celebrate-65th-birthday/302364361/
As of right now (8 May 2015 1:00pm CDT), plugging that URL into https://developers.facebook.com/tools/debug/og/object/ it gives the following warning: og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://stmedia.stimg.co/obed021814.JPG?w=600&h=600' will be used instead.
However, further down on the page in the 'Based on the raw tags, we constructed the following Open Graph properties' part of the page, it clearly shows the correct image that is in the og:image tag that is on the page.
Why would Open Graph think og:image is not defined or not be able to access the image when clearly farther down the page it can find it?
The meta tags within the header are as follows:
<link rel="canonical" href="http://www.startribune.com/sleepy-eye-quads-celebrate-65th-birthday/302364361/" />
<meta property="og:url" content="http://www.startribune.com/sleepy-eye-quads-celebrate-65th-birthday/302364361/" />
<meta property="og:title" content="Sleepy Eye quads celebrate 65th birthday" />
<meta property="og:site_name" content="Star Tribune" />
<meta name="news_keywords" content="" />
<meta name="description" content="The Sleepy Eye quads have returned to their childhood home in southern Minnesota to celebrate their 65th birthday." />
<meta property="og:description" content="The Sleepy Eye quads have returned to their childhood home in southern Minnesota to celebrate their 65th birthday."/>
<meta property="og:image" content="http://stmedia.startribune.com/images/1430701562_10026501+Quads+Birthday.JPG" />
</head>
It's always good to run all links related to a page in the Facebook Debugger as mentioned by #CBroe.
As for issues with images specifically, I would also recommend you add the og:image:width and og:image:height meta tags if possible to help the crawler crawl your image as per this doc.
If you have other pages facing the same issue, I would supplied the mentioned tags before trying to run the image url itself in the debugger and see if that helps.
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" />