This page shows how to create the embed code for any Facebook video to embed them in external websites.
Is there a way to start the playback automatically on page load?
The best way for me is to use Facebook URL like this: https://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&autoplay=true&container_width=800&href=https%3A%2F%2Fwww.facebook.com%2Fredbull%2Fvideos%2F10155801793140352%2F&locale=en_US&sdk=joey
It's better than the embed url. The video fits in viewport, you can control autoplay with a query string/param.
Unfortunately for you Facebook's policies forbid the autoplaying of content (thank god).
I have attempted to track down the actual policy document but it's been drowned out in the SERPS noise of people talking about it being banned on Facebook!! You can find questions that back this notion up on StackOverflow and WebApps.
StackOverflow is the official Facebook developer support channel so their users may know more on the topic.
It's also possible some whizzy jQuery might be able to fake the click, - but facebook updates it's code so often that I doubt any hack would last long.
Best answer is use YouTube or another channel that allows you so share outside their network. Don't rely on a hacky solution for a network that clearly isn't interested in video being shared beyond it's own borders.
Users can easily change the privacy settings on their videos, and Facebook will probably try and disrupt the ability to embed their content if it becomes a popular thing to do.
For Youtube, add &autoplay=1 at the end of the URL used to autoplay the video. For example:
If the URL to get to the video is:
http://www.youtube.com/v/xxx
The autoplay URL is:
http://www.youtube.com/v/xxx&autoplay=1
The above works for Youtube, but Facebook is a little different:
In the embed portion of the code to autoplay the video on your site add the following parameter:
<param name="autoplay" value="true">
This method works on other sites as well, mostly those that use a Flash-based video player.
As of the latest Facebook SDK today, you are able to autoplay videos passively by adding data-autoplay="true" to the div tag of the embed code.
Reference: https://developers.facebook.com/docs/plugins/embedded-video-player
I've just implemented this on my own project and it does work but as of right now it will only play passively (in mute mode). This is a similar experience as what you would see if you were scrolling through your news feed on Facebook. The user has to manually unmute the video.
I hope this helps.
waitforclick
Indicates whether to autoplay the Flash object (false) when allowed.
false does not work in profiles for security and aesthetic reasons,
except after an AJAX call. Default value is true
https://developers.facebook.com/docs/reference/fbml/swf/
U have to change the the example code from the bottom to the the facebook video, like in your provided link explained.
Didnt tried it, but maybe it helps
regards
Since I don't have a video ID, I can't test it, but adding a "play" or "autoplay" parameter may work:
<object width="400" height="224" >
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://www.facebook.com/v/xxx" />
<param name="autoplay" value="true" />
<embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="400" height="224" autoplay="true">
</embed>
</object>
The answers here are slightly outdated, so just the have the updated answer around, you can see the Facebook Documentation for all the details.
TL;DR:
This is how embedding a video from Facebook Looks like:
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
How to Share With Just Friends
<p>How to share with just friends.</p>
Posted by Facebook on Friday, December 5, 2014
</blockquote>
</div>
</div>
</body>
</html>
The following html tag lets you set autoplay to true:
<div class="fb-video" data-href="<video-post-url>" data-autoplay="true">
Default value for data-autoplay is of course false.
it shouldn't matter which videos you are embedding. adding the code
&autoplay=1
to the end of the URL of the video you are embedding should resolve the issu and allow the video to play automatically.
Related
I am trying to add comments to my Website.
I have followed basic instructions at https://developers.facebook.com/docs/plugins/comments/ and comments box appears..
I want to enable Moderation, so followed instructions at https://developers.facebook.com/docs/plugins/comments/#moderation-setup-instructions but I am not able to get the moderation tool to work.. I expect to see comments appearing at https://developers.facebook.com/tools/comments/ or see the moderation link on each page with comments, but neither are happening..
I have included the fb:app_id and og:url and have no issues when viewing on https://developers.facebook.com/tools/debug/sharing and tried including the fb:admins (but the guide above suggests i should not include both)
I've been searching for answer for 2 days. In my case problem was with data-url attribute. I have publications in multiple languages and I set data-url value without language info, so that comments in other languages be seen in each language. But as I see now facebook does not allow that kind of data-url value. I set that value same as exact url in browser and everything works, also I will suggest adding og:url value same as exact url.
Hope this will help somebody!
You just need to add og alternate languages meta tag like below
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ka_GE" />
First is the current language (example: domain.com/en/item/1)
Second is the alternate language url (example: domain.com/ka/item/1)
How it worked for me...
1º Step - Find your user ID:
On Facebook Interface:
Click in the top right of Facebook.
Select Settings & Privacy, then click Settings.
Click Apps and Websites in the left menu.
Click View and edit next to an app or game.
Scroll down to Learn more. Your user ID is in the paragraph below.
Facebook doc about that: https://www.facebook.com/help/1397933243846983
2º Step - Find your APP ID or create one here:
https://developers.facebook.com/tools/comments/
3º Step - Add these tags inside HEAD of your page (NEEDS TO BE IN HEAD ONLY):
<meta property="fb:admins" content="[YOU FACEBOOK USER ID]"/>
<meta property="fb:app_id" content="[YOUR APP ID]" />
4º Step - Set this script where you want to show the comment box:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=[YOUR APP ID]";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="[URL OF YOUR PAGE]" data-num-posts="5" data-width="815" data-colorscheme="light" data-mobile="false" data-order-by="reverse_time"></div>
I have following code on http://septicsecurity.com/facebook.html
It used to work, but does not work any more. I do not understand why. What happened and what can I do to make it work again?
UPDATE - I just found out that it works after I threw out the old cash and reopened the browser(s)
I might also have something to do with that I updated the FB Manage Permissions page and took away any Country Restrictions.
UPDATE UPDATE - I'm a moron. I could not see it because I had installed a new app (DNT+) on FireFox that blocks social and ad networks from following you around the net. Subsequently it took away the FB like and comment box.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="paulk">
<title>Facebook</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=161799263843988";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- FACEBOOK START -->
<div style="float:left;margin-right:18px;">
<div class='fb-like-box' data-href='http://www.facebook.com/pages/Septic-Security/209608059122157' data-width='380' data-show-faces='true' data-stream='true' data-header='true'></div>
</div>
<div style="float:left;">
<div class='fb-comments' data-href='http://septicsecurity.com' data-num-posts='5' data-width='380' style='border:1px solid silver; height:588px;'></div>
</div>
<!-- FACEBOOK END -->
</body>
</html>
The floating divs above are just to position the like box and the comment box next to each other, I have tried to strip the page of all extra code like that and also just trying to show like box or comment box but it still does not work.
When I look at the page you linked, I see the Like Box and the Comment Box, side by side. (I'm using Chrome.) Did you make any changes to the code, or did it literally just stop working one day? What specific failure are you seeing, and what browser are you using?
This might also be pertinent: I think that I read that FB has changed their like-box recently; and they have more changes that will be taking effect on October 3:
https://developers.facebook.com/roadmap/#october-2012
Specifically, some Open-Graph functionality for the like buttons won't work any longer (nor will the Live Stream plugin and several other bits,) so you (and I, and everyone else) may have to update our FB like button code Real Soon Now.
I could not see it because I had installed a new app (DNT+) on FireFox that blocks social and ad networks from following you around the net. Subsequently it took away the FB like and comment box.
I'm sorry to come back to this topic again, but i'm really frustrated!! I've read every resource i've found, googling around the web, but i couldn't come up with a definitive answer to my problem.
Problem description
I'm creating an iphone app with phonegap 1.0. In this app, one tab is dedicated to a rss feed from my youtube channel and i want my users to be able to play these videos, after clicking on a specific entry.
Question: is it possible? best solution would be to play the video inside the app, but displaying a thumbnail image and redirecting the user to native youtube app is also acceptable (even though in this case i want the control back to the original app when youtube finishes to play the video).
Tried solutions
Searching on the web I found several solutions and people say that these solutions work for them, but none of them work for me!
use an "object" tag, i end up with a white screen
<object id="video" width="296" height="100%" data="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="src" value="http://www.youtube.com/v/gDjb9RVMF4c" />
</object>
using an "embed" tag, i end up with a white screen
<embed src="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="100%"></embed>
i also tried a "video" tag, but as far as i understood, this is still not possible.
I'm really sorry if i missed a solution already written somewhere, but trust me ... i did my homework before askying :-)
Thx!!
Here is a nice tutorial Which Saved my Day
http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/
Also i m posting some codes For a quick Access.
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then make the following changes in Phonegap.plist
MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com
Video will play on your Simulator Also.
Apart from using <iframe> ... </iframe> you also need to set the property OpenAllWhitelistURLsInWebView to YES in your PhoneGap.plist. This would show and play the video inside the PhoneGap application itself. It is tried and tested.
You could try embedding the YouTube video as an iframe, I believe that is the recommended way to do it now:
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
<iframe src="http://www.youtube.com/embed/VIDEO_ID" class="youtube-player" type="text/html" width="640" height="385" frameborder="0">
</iframe>
Here is a component I've end up using in my app. Done with a help of YouTube iFrame API.
I'm implementing Facebook's "Like" option in one of my websites as a voting tool. Users will be able to vote on a specific team by Liking the team's individual page. I have a number of teams and for some reason when I "Like" some of the teams, refresh my browser, my Like count refreshes as if I never "Liked" the page at all. However, on some of the other teams pages, when I "Like" and refresh, the count is accurate and keeps track.
I can't seem to find what is differentiating between the team pages that work and don't work. Code is identical but some keep the Like count and some don't. I was hoping someone may have experienced this before?
Below is the HTML5 Like option I used:
<div class="votePanel">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=262057453824946&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false" data-font="arial"></div>
</div>
Below are my Open Graph tags:
<meta property="og:title" content="My Page Title" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="<% response.write("http://" & Request.ServerVariables("SERVER_NAME") & Request.ServerVariables("URL")) %>" />
<meta property="og:image" content="PATHTOMYIMAGE" />
<meta property="og:site_name" content="Site Title" />
<meta property="og:admins" content="MYADMINID" />
<meta property="og:description" content="DESCRIPTIONHERE" />
Ah, I've got it working with a few resources.
First, I used Facebook's Debugger to check my open graph tags and make sure they were valid. I noticed that my Like button required an admin ID. Also, on the Debugger page you can actually demo your Like button and it will display an error message if necessary.
I received the message:
"The page failed to provide a valid list of administrators. It needs to specify the administrators using either a "fb:app_id" meta tag, or using a "fb:admins" meta tag to specify a comma-delimited list of Facebook users."
What I noticed was that I had my fb:admins tag mixed up with og:admins. I switched the letters up and all was fixed!
However, I'm still not sure why a few of my pages allowed the Like button to work prior to the fix.
I've noticed this happen on my sites before too. There's usually a missing or incorrect open graph tag that's required. It's really strange how it works anyway on some pages but not others. I highly recommend using the debugger tool too. It points out what is wrong.
An associate of mine maintains a facebook page for the company we work for.
The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.
The associate who does facebook is not a programer so he asked me to build something.
I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.
We want to embed this page on facebook using an iframe.
First we just tried entering the iframe, which did not work,
then we found a tutorial and tried to embed the iframe the way it says like this:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1
Then we get a JS error like this:
Uncaught reference error:
a325461252_link_1 not defined
But every once in a while it will work but 99% of the time we get this error.
I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.
Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.
Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.
I just tested the following and it worked:
<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
<fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>
<fb:js-string var="location_two">
<fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:
<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />
Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.
BTW: To programmatically add iframes in Facebook you can use JavaScript like so:
<script type="text/javascript">
var Iframe = document.createElement('iframe');
Iframe.setStyle('smartsize','true');
Iframe.setStyle('frameborder','yes');
Iframe.setStyle('scrolling','no');
Iframe.setStyle('include_fb_sig','true');
Iframe.setStyle('width','500px');
Iframe.setStyle('height','500px');
Iframe.setSrc("http://www.msn.com");
document.getRootElement().appendChild(Iframe);
</script>
Good Luck!