I'm trying to build a page to share animated gifs just like Giphy do.
If you share this link (http://giphy.com/gifs/mQpZtX0gKDESA) you see that the share image becomes playable. It's important to note that I don't want to share the direct link to the gif. I need to share my page with a gif and the share needs to show a playable gif.
I already tried to copy all the meta tags Giphy use, but no lucky.
If anyone knows anything about this, i'll really appreciate.
Thanks for your help.
At the current time, it's still possible to display the GIF animation like a video, using an .SWF container. If you make such Flash container, you can use it to display the animated GIF.
The container should be parametrized, so you don't hardcode the image link. Read the parameter in Flash, load the GIF image and display it.
When you're done with Flash, open the script link (similar to shown below) in a browser - it should display the animated image.
http://website.com/container.swf?url=http://website.com/animated.gif
Finally, fill these metatags for Facebook in your HTML:
<meta property="og:type" content="movie">
<meta property="og:video" content="http://website.com/container.swf?url=http://website.com/animated.gif" />
<meta property="og:video:secure_url" content="https://website.com/container.swf?url=http://website.com/animated.gif" />
<meta property="og:image" content="http://website.com/front.jpg"/>
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="480" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="480" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
This feature is currently not publicly launched yet. It's a beta feature and being tested with some websites, but not publicly available. When that happens, it will also be reflected in the public documentation.
Related
When I share a link on tumblr, it sometimes will grab the page's blog post image. For example, if I share something like:
http://www.smartpassiveincome.com/income-reports/my-may-2016-monthly-income-report/
It'll grab this image for it's thumbnail:
http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg
How do you make tumblr grab the image? Is there some meta tag you need to include?
Searching the source code this image appears three times:
<meta property="og:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<meta name="twitter:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<header style="background-image: url('http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg')">
Does anyone know which one it uses and could explain what the process for choosing how to grab the image is?
The original page is: http://www.patchesoft.com/learning-linux-how-to-find-what-version-of-linux-youre-running-command-uname-and-lsb_release/
But when I post it into Tumblr, it doesn't grab the featured image.
These meta properties should get your image to show on tumblr
<meta property="og:image" content="http://example.com/ogp.jpg" /> <!-- Required -->
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
To learn more head over to http://ogp.me/
Your site seems to have these properties set and I get this when I put url of your site on tumblr...
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!
Recently a change is observed in the Post UI for images. It shows caption and link name on the image besides showing the same in the RHS of the image. Post snippet is attached. I tried using large image but even then post shows caption on the image itself. How can I avoid showing caption and other stuff on the image?
I am using following metatags:
<meta property="og:video:height" content="30" />
<meta property="og:video:width" content="600" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="fb:app_id" content="${appId}"/>
See attached snippets.
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.
I'm testing Facebook audio share functionality and having an issue with the image not showing up.
So this is what I have.
<meta name="description" content="audio_description" />
<meta property="og:image" content="http://domain.com/image.jpg" />
<meta property="og:audio" content="http://domain.com/audio.mp3" />
The audio does show up, so that part is fine.
However, the image that is supposed to go on the left of the audio doesn't.
Do I need to do something special?
I also tried
<link rel="image_src" href="http://domain.com/image.jpg" />
Same result.
I'm expecting the output to look something like this http://www.allfacebook.com/wordpress/wp-content/uploads/2010/03/share-song.jpg
Thanks,
Tee