Is there a way to use the Facebook's Video Embed xfbml.ready in a file:// protocol?
I haven't been able to use this code using that protocol, and I need to see if that is possible, since I'm developing a PhoneGap and currently is not working for me.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{APP-KEY}',
xfbml : true
});
FB.init(config);
FB.Event.subscribe('xfbml.ready', function (msg) {
console.log('READY');
};
(function() {
var e = document.createElement('script');
e.src = 'https://connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Related
i have two Facebook plugins(like and comment box) on my page.
when i login with on plugin it not logins another plugin automatically until i refresh page.
for example : when i login by clicking on like button,my comment box remains in logout state until i refresh page.
please suggest me something good for that problem
my code is as follow
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'My app ID', status: true, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function (targetUrl) {
$("#myh1").html("Facebook Loaded");
//alert('edge.create');
setTimeout(aaa, 500);
});
FB.Canvas.setDoneLoading(function () {
alert("Done loading");
});
FB.Event.subscribe('comment.remove', function (response) {
alert('The status of the session is: ' + response.status);
});
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
function aaa() {
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: false
}
});
}
</script>
<div class="fb-like" data-send="false" data-href="http://www.facebook.com /AiLiveCaptions" data-width="298" data-show-faces="true">
</div>
<div class="fb-comments" data-href="http://www.facebook.com/AiLiveCaptions" data-num- posts="8" order_by="reverse_time" data-width="280"></div>
You can use
FB.XFBML.parse();
to render XFBML markup in a document on the fly.
FB Documentation
<html xmlns="http://www.w3.og/1999/xhtml" xmlns:fb="http://facebook/2008/fbml">
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<fb:login-button onlogin="update_user_box();"></fb:login-button>
<script>
function update_user_box(){
user_box = document.getElementById("user");
user_box.InnerHtml = "<span>"
+"<fb:profile-pic uid='loggedinuser' facebook-logo=true></fb:profile-pic>"
FB.XFBML.Host.parseDomTree();
}
FB.init("APP_ID","xd_reciever.htm");
</script>
<div id="user"></div>
This is my script. Actually i want to fetch the profile picture of logged in user from facebook connect. But this is not working, I got this script from http://mashable.com/2008/12/11/facebook-connect-blog/ and i can't find what's my error. How to get it correct to work like-what i want?
This should work for you...
// assume we are already logged in
FB.init({appId: 'YOUR_APP_ID', xfbml: true, cookie: true});
function showProfile(response) {
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
});
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(showProfile);
FB.Event.subscribe('auth.statusChange', showProfile);
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
Then have two div's for the login button and for storing the profile info.
<div class="fb-login-button" autologoutlink="true"></div>
<div id="user"></div>
I need help figuring out how to appropriately use the FB.Canvas.getPageInfo from Facebook's javascript sdk:
https://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/
I'm able to get the info and log/alert the data:
function getFbCanvasInfo() {
FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
console.log(fbCanvasInfoObject);
});
}
$("a.GetScrollTest").live( "click", function() {
getFbCanvasInfo();
return false;
});
But I can't figure out how to set that data and then apply it to other elements or functions (i.e. like something below):
$("a#test-link").each(function() {
var fbPosition = getFbCanvasInfo().scrollTop;
$(this).append("<em>The scroll top value is " + fbPosition + "px");
}
I know its not right and I'm missing something here.
BTW these functions are all below my async init and FB root, which appears like so:
<div id="fb-root"></div>
<script type="text/javascript">//<!--
window.fbAsyncInit = function()
{
FB.init({
appId: '223615011031939',
status: true,
cookie: true,
xfbml: true,
oauth:true,
channelUrl: '[MY PROJECTS CHANNEL URL]'
});
var isLoaded = true;FB.Canvas.setSize();FB.Canvas.setAutoGrow(500);
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
;(function($){
$(document).ready(function($){
[THE JQUERY FROM ABOVE HERE]
});
})(jQuery);
//--></script>
Much appreciation to anyone who has advice/expertise! Thanks!
The getPageInfo returns a readonly object. To "set" things, you would need to use the provided setter functions listed in the documentation. One of them to set the size of the canvas is setSize see https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
Also you should cleanup your javascript so the async nature of working with their API is good.
$("a.GetScrollTest").live( "click", function() {
FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
var fbPosition = fbCanvasInfoObject.scrollTop;
$(this).append("<em>The scroll top value is " + fbPosition + "px");
});
return false;
});
Is there any way to send apprequests if your application is a website?
I reported a bug on facebook http://developers.facebook.com/bugs/182553325173000 but I do not know if this is possible or not
yes you can do this by adding the JS API,
before <body> add:
<script type="text/javascript">
function inviteFriends(){
var receiverUserIds = FB.ui({
method : 'apprequests',
message: 'YOUR CUSTOM MESSAGE',
},
function(receiverUserIds) {
console.log("IDS : " + receiverUserIds.request_ids);
}
);
}
</script>
after the <body> include the API (asynchronous method):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
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
oauth : true //enables OAuth 2.0
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
and call it:
or
You can do that with the Javascript SDK
it is in the documentation:
https://developers.facebook.com/docs/reference/dialogs/requests/
It's possible, as the other answers have shown, but the user will be brought to your canvas app when they accept the requests
I'm trying to fb:login-button work for mobile web, a la: http://developers.facebook.com/docs/guides/mobile/
However, I'm not sure where to add this code: &display=touch
My FBML is the standard:
<fb:login-button autologoutlink='true' perms='user_about_me,email'></fb:login-button>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXX', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('auth.login', function() {
location.href = "....";
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Any ideas?
I'm pretty certain you're not able to use the FBML tags for mobile web applications. At least, they won't accept the display=touch argument.
It means you'll need to use the slightly more complex OAuth implementation that they describe on http://developers.facebook.com/docs/guides/mobile/
It kinda makes sense if you think about it. The FBML tags generally rely on popups or overlays, which you can't really be certain will be compatible with all mobile browsers. The OAuth implementation takes you off to a FB page and returns you back to your host site for authentication and authorisation.