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
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...
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.
I want to embed my flash video player on facebook so that when people share my videos on facebook, it will let them play the video on Facebook.
I saw some posts here on stackoverflow about this topic and that a whitelisting wouldn't be required anymore, but i can't find any informations about it beyond December 2013.
Is it still possible? If yes, does it require a whitelisting?
You want your SWF file in a Facebook post like this: Example?
note: Facebook will only display SWF files that are hosted from an HTTPS server. If you can do that part then read on..
1) You need to have an HTML page on your site that is then posted as a link on your Facebook status. It's from the meta tags contained in that linked page that Facebook will read and load the SWF data.
2) Put the meta tags somewhere within the < head > .... < / head > section of your page's HTML.
(note: To make the above example work I had used old style embedding back then but you can try the newer OG tags. Good Reference). Below is an example for your own html (SWF goes in "video_src")
< head >
<meta name="title" content="My Video SWF inside FBook" />
<meta name="description" content="Just a test for embedding SWF in a status" />
<meta name="medium" content="video" />
<link rel="image_src" href="https://website.com/files/test_Thumbnail.jpg"/>
<link rel="video_src" href="https://website.com/files/test_VideoPlayer.swf"/>
<meta name="video_width" content="504" />
<meta name="video_height" content="283" />
<meta name="video_type" content="application/x-shockwave-flash"/>
< /head >
3) Currently the maximum Width is 504 and Height is 283. Check this page for updates whenever Facebook changes its mind about those settings.
You can check how Facebook will "parse" your html link using their Debugger Tool. Just paste your html page link as you would in a wall post and it will show a live preview.
UPDATE: For HTML5 Video (note: I havent tried this part myself but just my understanding..)
Assuming you've gone with OG: tags then you can just put multiple OG:Video links (first one should be Flash followed by fallback to HTML5 which should be the direct link to video file).
I cant confirm this now but.. Don't be surprised if the HTML5 video file is played by a system player (in a pop-up window?) and not with your own custom-design JS/CSS interface.
<meta property="og:video" content="https://website.com/files/test_VideoPlayer.swf" />
<meta property="og:video:secure_url" content="https://server.com/files/test_VideoPlayer.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
followed by... (for non-Flash)
<meta property="og:video" content="http://website.com/files/Video.mp4" />
<meta property="og:video:secure_url" content="https://server.com/files/Video.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="500" />
<meta property="og:video:height" content="280" />
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 know Facebook is trying to phase out the Share button, but the product management still wants to use it, so I see every where the code can be
<fb:share-button class="meta">
<meta name="medium" content="mult"/>
<meta name="title" content="name of fan page"/>
<meta name="description" content="description of fan page"/>
<link rel="image_src" href="url to image location" />
<link rel="target_url" href="http://..."/>
</fb:share-button>
but no where can I find what mult is in the line <meta name="medium" content="mult"/>. Does anybody know what mult is and alternatives there are?
Mult stays for multimedia alternative your can use Video , and some other. If you have video on the page the tag video list your in the search engine as video page