I want to stream facebook video using default video player of facebook in my app. On click of video i want to open webview in my app and play facebook video by using their own video player and all default control. How will i achieve it? Is their any other way to achieve the video streaming. But i want to stream video using facebook default player and not on any other player. How can i achieve this? Any help will be appreciated
Did you already double check dev facebook docs embedded-video-player/api, where you can find this following full code example:
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
xfbml : true,
version : 'v2.5'
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
my_video_player = msg.instance;
}
});
};
(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";
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-allowfullscreen="true"></div>
</body>
</html>
Assuming that you put this code in your webview, it will normally work like a charm.
For loading a dynamic URL
First Replace with this in your html
--> data-href="{video_url}"
`mWebView.loadDataWithBaseURL(null, "<!DOCTYPE HTML>"
+ populateHTML(R.raw.my_html), "text/html", "UTF-8", null);private String populateHTML(int resourceID) {
String html;
html = readTextFromResource(resourceID);
html = html.replace("{video_url}", dynamic_url);
return html;
}`
private String readTextFromResource(int resourceID) {
InputStream raw = getResources().openRawResource(resourceID);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
int i;
try {
i = raw.read();
while (i != -1) {
stream.write(i);
i = raw.read();
}
raw.close();
} catch (IOException e) {
e.printStackTrace();
}
return stream.toString();
}
Related
How can I set the hight for my page tab content that is from a google site? It works fine, I just want the vertical scroll bars not to be longer than the actual facebook page size.
The code I'm using now
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '576155032405795', // App ID from the app dashboard
});
FB.Canvas.setAutoGrow();
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
You may want to look into the setAutoGrow() or setSize() functions of JavaScript SDK. Both may help you but you will have to judge which one to use, from the setAutoGrow()'s documentation
This function is useful if you know your content will change size, but you don't know when. There will be a slight delay, so if you know when your content changes size, you should call setSize yourself (and save your user's CPU cycles).
and from setSize()'s documentation
Call this whenever you need a resize. This usually means, once after pageload, and whenever your content size changes.
So you need to judge accordingly.
Edit
I would like you to use setAutoGrow() function in your code. You will need to put this code in the page that is been rendered within the Page Tab. And as you have mentioned that is your content is retrieved from page within your Google sites, then this is where you would be required to add the code.
You will have to insert the following code within your page just after the body opening tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
});
FB.Canvas.setAutoGrow();
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Here the channel.html will contain just the following line of code
<script src="//connect.facebook.net/en_US/all.js"></script>
I feel completely silly for asking this question, especially after so many years of designing and building web sites. I have been researching for about a week on how to get Facebook Social Plugins working for my site and I am completely stuck. So, I have stripped away everything I can think of and just have a completely basic page here. I have done exactly what the Facebook Developer Tools have said to do and I am getting nothing. Here is my code below, any suggestions would be great!
Just to go ahead and get this out of the way, where it says 'APP_ID', I did put in my app id and I am still not getting anything coming through.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/JavaScript_v1_9_1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<link href="fonts/OpenSans/stylesheet.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</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=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/DippPicks" data-send="true" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
</body>
</html>
I have successfully used the FB plugins using the code shown here, which is:
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Which slightly differs from the code shown in the FB plugins page when you click the "Get Code" button, by including that FB.init block beforehand and passing in the App Id in there instead of in the js.src property.
<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=223245147771570";
fjs.parentNode.insertBefore(js, fjs);}
(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
});</script>
<h1>Lajknout stranku!</h1>
<div class="fb-like" data-href="https://www.facebook.com/Testra22" data-send="false" data-layout="button_count" data-width="10" data-show-faces="false" data-font="trebuchet ms"></div>
I use this code to create FB Like button and I would like to display alert when user click on it. But there is js error Uncaught ReferenceError: FB is not defined.
You start using Facebook JS SDK before it was loaded by browser.
Because you use asynchronous way to load the JS SDK you need to define window.fbAsyncInit (as described in documentation for JavaScript SDK) function and run code that depend on JS SDK from here...
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
}
I'm unable to get the page access token for some reason I only recieve the page id...
this is my code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP-ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button" data-scope="email,user_checkins,manage_pages">Login with Facebook</div>
<div class="result">Start</div>
<div class="result_app_installed">Start</div>
<script>
// Get access token
$.get('https://graph.facebook.com/102561956524622?fields=access_token', function(data) {
alert(data);
});
// Get data if user is application is installed on that page or not.
$.get("https://graph.facebook.com/102561956524622/tabs/255792581098802",
function(data) {
alert(data);
});
</script>
</body>
</html>
What I am trying to do is to get the page access token and then check if application in installed on that page..
What am I doing wrong?
Try something like:
FB.api('/me/accounts',function(response) {alert(response);})
The Page token is returned in data as access_token
You will need manage_pages permission.
https://graph.facebook.com/102561956524622?fields=access_token
won't work. In order to get an access_token for any fan page You need to do the steps explained here:
writing on the wall on behalf of my fanpage
Instead of using $.get it's better to use Facebook JavaScript SDK:
https://developers.facebook.com/docs/reference/javascript/
so for the second request it would be:
FB.api('/102561956524622/tabs/255792581098802',
function(response) {
alert(response);
});
Bear in mind that in order to make this FB.api call You need to authorize the app first
Actuelly its very easy
FB.api('/'+[PAGE_ID]+'?fields=id,likes,name,access_token', function(response) {
console.log(response.access_token);
});
Dont forget to check if user is logged in.
I am having problem in getting response from facebook login button.
And will be very thankful for any instant help.
I am using following code:
<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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
... but I am getting the error in my javascript console : "FB is not fefined " and no alert message for auth responeId is recieved to me.
Please help its very important
Or if you want to still load the JS SDK async style, you can wire up your event handlers in the window.FbAsyncInit() like such:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
};
<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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1">
</div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
You can see this style (which is Facebook's preferred style) documented here: https://developers.facebook.com/docs/reference/javascript/
You are loading facebook javascript sdk asynchronously through following code
<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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
So, your FB is not defined until it gets loaded.
Try loading FB syncronously. Put following code and remove the above one,
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>