I am working on project, it needs facepile (plugin of facebook) in index page,
how can I do it?
you need to get an appID from facebook developers site. (http://developers.facebook.com/setup/)
then..
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(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);
}());
</script>
THEN...
place this into your page:
<fb:friendpile width="210"></fb:friendpile>
or whatever feature you need.
try this link for more: http://developers.facebook.com/docs/reference/javascript/
Is this showing the Facepile of a page or the user himself (me)?
I tried your code but it always shows a login frame also if I'm already logged in to Facebook.
My target is to have a list of Fans and posts of a specific page for my website.
Related
Facebook has a great plug-and-play "Like" button, which I am using to let a user "Like" my company's official FB page (not an OpenGraph object or something on my company's web site, but http://facebook.com/MyCompanysFacebookPage).
This all works fine, but the "Like" button itself is quite small, so I'd like to replace it with a different graphic. Is this possible? And-- if not-- is it possible to do this "Like" action via the API? (It's fine if I have to ask the user for some kind of special permissions to perform this task, since I am already asking them for other permissions earlier in the UX flow). Thank you.
if its just a standard "like" button something like this?
http://jsfiddle.net/c7rAN/
(it will give you a error until you fill in the fields properly.)
html:
<div id="fb-root"></div>
<img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSsRdeyOrORG3mjpsal3tMEzG3hzIl6zkfNnTKm61hJ_h3TL3OQ" id = "share_button">
jquery/js
window.fbAsyncInit = function() {
FB.init({appId: 'vvv', status: true, cookie: true,
xfbml: true});
};
(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);
}());
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'nameit',
link: 'linkit',
picture: 'logo or whatever',
caption: 'caption',
description: 'desscription',
message: 'whatever'
});
});
});
I am having a hybrid mobile application(should work in android and ios). In which I need to post on facebook wall from my application. Please note its a hybrib app, so I am not supposed to use any java or c code.
I tried the following method , its working in simulator , but not in actual device. Please help me.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ' my appID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'HyperArts Blog',
link: 'http://hyperarts.com/blog',
picture: 'http://www.hyperarts.com/_img/TabPress-LOGO-Home.png',
caption: 'I love HyperArts tutorials',
description: 'The HyperArts Blog provides tutorials for all things Facebook',
message: ''
});
});
});
</script>
Thanks
I ran into this. your:
document.location.protocol
which is suppose to pull in the FB SDK is actually "file:///" and thats what gets fed into the url for that FB JS library.
Manually specify http:// or https://
This didnt work for me either on safari webView on IOS so i had to hit the endpoints manually using AJAX.
Is there any way to capture a Facebook event when I login or logout from any Facebook social plugin, like comment box or like button? I want to refresh my page whenever a user logins into a Facebook plugin. Because when I login with comment box it doesn't show that I am logged in and so I can't use the "Like" button. But when I refresh my page it shows I am logged in to both plugins.
Here is my code:
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'My App ID', status: true, cookie: true, xfbml: false });
setTimeout(aaa, 6000);
FB.Event.subscribe("xfbml.render", function (targetUrl) {
$("#myh1").html("Facebook Loaded");
alert('edge.create');
});
FB.Event.subscribe('auth.authResponseChange', 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() {
FB.XFBML.parse(document.getElementById('fbDiv'), function () {
alert('I rendered');
});
}
</script>
<div id="fbDiv">
<div class="fb-comments" data-href="http://www.facebook.com/AiLiveCaptions" data-num-posts="2" data-width="470">
</div>
</div>
the way i see it, this could be the default behaviour when you are using two separate plugins weather they are of facebook or any third party website i.e.facepile/commentbox.
your browser needs to reload in order to update the session on page across multiple plugins on same page, just like the difference when you are open any mail id across multiple tabs with opening same id on different browsers.
I've developed a simple website using facebook connect, and it has been working fine for the last month or so. Underneath the fb:login-button code is a fb:facepile. It has worked as expected until today, when instead of showing friend's pictures it displays the facebook homepage. Here is a screenshot of the problem http://i.stack.imgur.com/nZsbq.png
Here is the relevant code. It worked at one time, so I'm really confused what happened to cause this weird error. Any help would be greatly appreciated.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo $appkey; ?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(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);
}());
function login(){
document.location.href = "<?php echo $base_url.'/facebook/'; ?>";
}
function logout(){
document.location.href = "<?php echo $base_url.'/logout/'; ?>";
}
</script>
I cannot copy the two XFBML tags that follow the javascript. They are fb:login-button and fb:facepile
It is a reported bug but it seems that nobody at Facebook care about it. Very strange and disapointing for such big web company.
http://forum.developers.facebook.net/viewtopic.php?id=90734
You can report this bug by upvoting at the follwoing webpage :
http://bugs.developers.facebook.net/show_bug.cgi?id=15490
It looks like <fb:facepile></fb:facepile> is finally working again. The bug was marked as resolved on the Facebook bugtracker and is currently working as expected on my development server.
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.