I want to be able to serve an iframe video player to the Facebook newsfeed & timeline.
I am aware that it is possible to specify multiple og:video:type properties for different video formats to appear within the newsfeed/timeline.
e.g. an implementation such as
Share HTML5 player on Facebook wall
As of April last year I believe we also wouldn't need whitelisting, though some kind of whitelisting may be possible for a video type of text/html which isn't generally available.
If we were just serving free video within an iframe it would be quite easy to just grab the flash and mp4 components and include them within Open Graph tags.
However our player is a little more complex, serving content based upon login status, and that level of complexity is likely to increase.
Complexity?
Built in shopping cart - Reviews - Delivery of premium content - micropayments/tipjar
We have quite a flexible oembed implementation
http://www.uqast.com/andy/video-seo?w=640&h=360&aplay=0&affid=0&links=2
Which can return quite clean embed code suitable for the timeline
http://www.uqast.com/services/oembed/?url=http%3A//www.uqast.com/andy/video-seo&w=640&h=360&aplay=0&affid=0&links=2&format=json
We can also quite happily serve the iframe from https if required.
We are also looking towards serving various kinds of HTML5 within the iframe... videos/docs/audio etc
So what procedure do you have to follow to be able to use text/html as a video type and have it whitelisted?
Note: I am the Product Manager for uqast.com
I realise this is an old question, but I noticed today (June 2014) that SoundCloud are now embedding an IFRAME HTML based player directly into the news feed.
Anyone else noticed this behaviour and how can they do it? Couldn't see anything in the OG tags about it
Thanks!
Its not currently possible to embed HTML5 content via an iframe in the Facebook News Feed. Only Flash objects or raw video files can be embedded through the og:video tag.
However, keep an eye on http://developers.facebook.com/blog for updates.
Related
I read through facebook's documentation and I've seen some examples on the webs, but I can't fully understand the process involved in posting content on the users timeline.
I want to connect the account of my users (users of a web application, which allows to manage and visualize some media content on a custom flash player) to Facebook, and whenever they want, let them share into their own timelines a "story" about the project they've just created.
In particular, I want to show on their timelines the flash player, and other HTML+CSS+JS content and/or interactions.
Something like "user has created a project on MyAPP" and then show a summary of that project on the timeline.
(I have already done something similar using only open graph meta tags and a URL that embeds a fully interactive flash player into the timeline, just like a youtube video)
I read through collections, actions, stories and other stuff, but I still don't know:
Is it possible to do this: share on behalve of the user, custom tailored content? Like custom HTML + CSS + JS (and Flash) ??
If the above is possible, what, nn general lines, must be done to accomplish it? Create a Facebook App, create custom actions, stories, collections, objects... ??
The picture bellow is what RunKeeper posts on my timeline after each of my runs. Is this graph something standard, made by Facebook? Or Runkeeper itself designs, creates and posts the content explicitly that way for their users ??
Is it possible to do this: share on behalve of the user, custom tailored content? Like custom HTML + CSS + JS (and Flash) ??
No, of course you can not embed custom HTML and CSS – since this would not be sandboxed by browsers, you could potentially alter the whole page (think about absolute/fixed positioning, etc.), way to dangerous to allow that.
Flash can be embedded in certain ways – either custom video players for objects of the video type, or previews of flash-based games in the feed (keyword: feed gaming).
The picture bellow is what RunKeeper posts on my timeline after each of my runs. Is this graph something standard, made by Facebook?
That is a story generated for the fitness.runs action and the fitness.unit object type. These are a common action and common object provided by Facebook, and they have the according story type layout pre-setup as well.
If the above is possible, what, nn general lines, must be done to accomplish it?
That question is too broad and general to be answered here. Read the Open Graph documentation, guides and how-tos more thoroughly – and then try stuff out and see what you get.
I'd like to find out how Tumblr retrieves video thumbnails.
Normal video posts (not using API) when viewed from the dashboard or /tagged/ filters, some sites's video shows thumbnails, some doesn't show up.
Works for http://www.youtube.com and http://www.vimeo.com.
However, http://www.ted.com and http://www.slideshare.net thumbnails doesn't show up.
I was wondering if any of the Tumblr devs can enlighten me on the process how and where they get the thumbnail data from.
Is there a general method for retrieval that by that I can conform a document structure to?
It would also be great if the API allows you to set thumbnail url too, sort of like facebook's opengraph image meta data.
Tumblr Video Thumbnails
My understanding of {VideoThumbnailURL} is as follows:
This variable will include any related thumbnails to a video, served directly from the provider of the video.
Tumblr itself isn't generating the thumbnails. Below is the returned URL from a test, using {VideoThumbnailURL} and the video: http://www.youtube.com/watch?v=i0y4G1tNb1M
http://img.youtube.com/vi/i0y4G1tNb1M/hqdefault.jpg
To answer your question, the provider of the video would have to generate the thumbnails and Tumblr would need to support / integrate these on the Dashboard.
Easy way to test if a provider is supported, create a video post and add your embed code. If the message preview not available appears, the provider doesn't support thumbnails and / or Tumblr doesn't support this provider.
Providers with Thumbnail Support
http://blip.tv/
http://www.dailymotion.com/
http://www.metacafe.com/
http://www.youtube.com
http://www.vimeo.com
Providers without Thumbnail Support
https://vine.co
http://www.ted.com
http://www.slideshare.net
http://www.veoh.com/
http://www.twitch.tv/
Hi mikedidthis have write accurately..
As per tumbler's image thumbnail api, tumbler do not provide any inbuilt function like facebook to retrieve images like in facebook or youtube.
Please see this documentation:
http://www.tumblr.com/docs/en/custom_themes
You must use Fully SSL iframes and never display intrusive or invasive ads/popups in the video (safer to serve NO ADS/POPUPS, or you may be blocked from loading inline permanently).
You must be desktop and mobile compatible, and declare meta tags such as the thumbnail and the url to load the video using various methods (study the iframe content of those who already load inline, ex: og:video).
WHY:
Since Tumblr uses SSL in the dashboard and on many blogs, all iframes or videos must be SSL too. If you load any non-ssl content (HTTP), on a page that is using SSL (HTTPS), the content will not load, and usually just appears blank, or incomplete. This is why tumblr links in a new window, when videos aren't being pull from a URL that provides full ssl video embeds.
Using a subdomain that forces ssl, and deals with content that isn't SSL (your own pop open window), will allow your site to load inline with the Tumblr Dashboard.
If you fail to be fully compliant and Tumblr will revoke any future inline videos from your URL. That's why it would be good to load videos from a subdomain that forces ssl only, and redirects non ssl to the ssl page.
According to my testing, Facebook's crawlers do not render client-side templates like a browser.
I want to avoid a webserver and building HTML files for Open Graph objects at all costs. I want to generate the meta tags on the fly via the URL, but it seems Facebook cannot do this.
Can someone from Facebook please confirm? I asked the head of Open Graph at #mobiledevcon and she said that Facebook can render stuff like {{value}}
My meta tags are as follows, and they render fine in every browser. But the Facebook Open Graph Debugger only sees the raw text, not the interpolated content.
<meta property="{{meta.property}}" content="{{meta.content}}">
When you think about it it should be clear, why this does not work.
The Facebook crawler downloads the HTML as it is served by the server. The Facebook crawler will not execute any JavaScript, like all the crawler will not execute the JavaScript. This is due to security restrictions and for speed reason (they do not have the time execute JavaScript on their servers.)
There is no way around this. If you want the crawler to index you page, you need to give them directly what you want them to read.
Tip: You could use something like phantom.js to render your pages on the server side and serve this to the crawlers.
The solution is basically to use some kind of server-side user-agent detection to pick up whenever a social media crawler arrives.
Use the ?_escaped_fragment_ method along with a prerender service. Facebook will respect the same crawlable Ajax specification as Google. Please see https://developers.google.com/webmasters/ajax-crawling/docs/specification
This is probably not possible, but I'm throwing it out here for anyone with crazy awesome ideas or if they happened to come across some morsel of information about it.
I have an embedded YouTube player (iFrame) using the API, with a custom JS control bar. All that works great.
I want to have a share option, however, since the videos on my site will often appear as overlays, it's not ideal to have the page be shared, but rather the video itself. Is there a way to have a user share the YouTube link directly from my page, rather than just a link to my site?
I already realize the fallback is to create a URL on my site that takes a video id parameter and redirects to the proper youtube page.
Doesn't the embed video from YouTube include all YouTube features by default?
(Thumbs up, share, full screen, etc…)
I know this question has been rised quite a lot of times, but then they constantly change things at Facebook and none of the numerous ways I've discovered on the web, works for me. Maybe it worked before, but not anymore.
I have a web page with a video playing in our skinned jwplayer. All the og tags are beautifully set, so that when a visitor likes the page, it's title, description, thumb and custom flash player are nicely shared on the users wall. Video even plays right there on the wall, in the embedded and customized flash player. So everything works as expected.
But!.. We would like to auto-post our new posts onto the website's page on Facebook and we want them to look exactly like when they are shared. One would probably expect that it'd be enough to simply post a link through PHP SDK and facebook will do the rest. But it doesn't. It seems to not pay attention at og tags in latter case.
What would be the right way to do this? Is it possible to force facebook to look at og tags? Or how to publish a post with a video in a similar way, but through PHP SDK?
One would probably expect that it'd be enough to simply post a link through PHP SDK and facebook will do the rest. But it doesn't.
What exactly are you posting – just a link, or a post containing a link?
(For difference between the two types of creating a feed object see https://developers.facebook.com/docs/reference/api/user/#posts vs https://developers.facebook.com/docs/reference/api/user/#links)
Is it possible to force facebook to look at og tags?
Normally it does without any further action neccessary.
Have you tried, though, putting your new posts URL through Facebook debugger before posting it?