I'm integrating the Facebook Like Button into a site. The likeing functionality is working fine except that you cannot add comments to your like after you've clicked the like button. Several sites including CNN has this working so this should be possible.
The docs mention that you need to use the JavaScript SDK to get commenting to work, which I am doing; however I cannot get commenting to show up.
A fuller-featured Like button is
available via the XFBML tag
and requires you use the new
JavaScript SDK. The XFBML version
allows users to add a comment to their
like as it is posted back to Facebook.
I cannot find details on which options are available for this more "fully-featured" XFBML like button.
I'm wondering if there is a setting that I need to add, an option that I'm not passing in, or anything that I've overlooked.
I am on a dev server, and I'm linking back to the live site for now. Perhaps the ContactURL and the base URL of the liked page need to be the same in order to get commenting to work?
Here's how I'm embedding the facebook like button:
<!-- facebook -->
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXXXXXXXX', 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>
<!-- facebook -->
...
<fb:like href="example.com" layout="button_count" show_faces="false" width="100" colorscheme="dark"></fb:like>
You need to make sure that the "connect url" for your appid matches the domain you're putting the like button on. To do this, go to the "Edit Settings" page, and in the "Connect" section of the settings, fill on your "Connect URL".
Facebook's documentation never mentions this.
Related
So I have a Facebook page setup. And I have an external website that I would like to use facepile on. The idea being that when somebody comes to my external website, they can see which of their Facebook friends has 'liked' the Facebook page.
I went to here https://developers.facebook.com/docs/plugins/facepile/ and it says
The Facepile plugin displays the Facebook profile photos of people who
have connected with your Facebook page or app.
So it looks like I can do it with my Facebook page.
I found the following code
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '12345667809845', // App ID from the app dashboard
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(){
// If we've already installed the SDK, we're done
if (document.getElementById('facebook-jssdk')) {return;}
// Get the first script element, which we'll use to find the parent node
var firstScriptElement = document.getElementsByTagName('script')[0];
// Create a new script element and set its id
var facebookJS = document.createElement('script');
facebookJS.id = 'facebook-jssdk';
// Set the new script's source to the source of the Facebook JS SDK
facebookJS.src = '//connect.facebook.net/en_US/all.js';
// Insert the Facebook JS SDK into the DOM
firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
}());
</script>
and then further down I have
<div class="fb-facepile" data-app-id='12345667809845' data-href="http://facebook.com/myfacebookpage" data-action="like" data-max-rows="1" data-colorscheme="light" data-size="medium" data-show-count="true"></div>
(Important urls and numbers changed to protect the innocent)
As you can see the code above is always talking about a Facebook app rather than a page. I would love it if somebody could tell me what I'm doing wrong!
UPDATE:
So to clarify:
What I want to do is to have Facepile display how many people liked my Facebook Page on an external website. It seems to me that something in the code that I insert into the external page needs to tell Facepile what Page it needs to get the likes from. And from the comments below it seems you do that in the data-href.
If so then what do I put in the app_id?
Do I need to register the external page as a facebook app to get the app id?
So the answer is yes. You can use FacePile with a FaceBook Page. But you need to do some other things first.
You need to register your external page as a FaceBook App. You can do this here
https://developers.facebook.com/apps
and Create a new app. You need to specify what you want to do with the app, I found it easiest to say I wanted to login with Facebook (Note that this functionality doesnt need to exist on your site, you just need to specify for FaceBook). You add your external site URL under the "Login to Facebook" option in the "Site URL" and voila you have a facebook app at your external website url. You also then have a app id.
So when you go to
https://developers.facebook.com/docs/plugins/facepile/
to get the code snippets you use the Facebook app your just created (there is a drop down box once you click the "get code" button or you can enter the number in the dialog) and the "URL" is the url of the Facebook Page that you want likes from. If you click the Get Code button you will get you some code snippets something like the following:
<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=<YOUR_APP_ID_HERE>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script','facebook-jssdk'));
</script>
and
<div class="fb-facepile" data-href="http://facebook.com/<YOUR_PAGE_URL_HERE" data-max-rows="1" data-colorscheme="light" data-size="medium" data-show-count="true"></div>
Put those on your external page (after substituting the values) and facepile should work!
Hope this helps someone else!
I am trying to add an app to my facebook fan page account for oAuth login.
I DONT WANT A TAB so the method i thought might work was method: 'apprequests'
but i keep getting an error: An error occurred with Prayerfish Login. Please try again later.
any suggestions on how to get the app over to my fan page?
note** this html page is from facebooks tutorial
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>My Add to Page Dialog Page</title>
</head>
<body>
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='addToPage(); return false;'>Add to Page</a></p>
<p id='msg'></p>
<script>
FB.init({appId: "****************", status: true, cookie: true});
function addToPage() {
// calling the API ...
var obj = {
//method: 'pagetab',
method: 'apprequests',
redirect_uri: 'https://www.myDomain.com',
};
FB.ui(obj);
}
</script>
</body>
</html>
The only way to have an app on a Facebook Page is to add it as a "tab". Since the switch to Timeline, tab has become a bit of a misnomer as it is more correct that it is just a bookmark at the top of your Page (for example on Spotify's Page the 'Get Spotify', 'Fan Playlist' and 'Summer Sounds' thumbnails at the top of the page are technically 'Page Tabs').
If you still want to add the app to your Page as a 'tab', the code you included above is actually more complex than you need. That code is what you would include on your website, for example, if you wanted to allow admins of other Facebook Pages to install your app. Because you own both the Page and the app, you just need to modify this link to include your app ID and URL and click on it:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_APP_URL
When you do, you'll see a dialog asking you to pick which Page you want to add the app to, choose that and you're done.
If you were already aware of what a Page Tab is and don't want that, my question would be - how do you want the app to appear?
I am creating an app in Facebook that will work with my fan page.
When fans click on the tab, they will see a page where they can enter in some information. I want to personalize that page by displaying their name and facebook user id?
Is this even possible without going through the whole permissions page?
Also, while on the app for my fan page, is it possible to display a dropdown list of all fans of the page?
You cannot get the user's name or ID without asking for their permission.
I use the PHP SDK to access the signed request. This will give you access to the user's locale, country, whether or not they like your brand page, and a few other unspecific things. Once a user authenticates your app the signed request can give you more of the user's information. If all you need is the user's name and ID, the signed request is a more efficient way to get it than making a Graph API request.
Read more - https://developers.facebook.com/docs/authentication/signed_request/
Is this even possible without going through the whole permissions page?
As far as I know, nope. I have basic user integration on a Joomla site I run and it requires you to grant permission before your application can pull user data via the API.
It would also be a gross violation of security to allow you to just willy-nilly request users information without them explicitly granting you permission.
You can show the username with link to their profile, without having to ask for any kind of permission. You can see the demo right here - http://www.facebook.com/digimantra?sk=app_256564141033045 . The following snippet displays the username within the facebook page -
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'APP_ID',
cookie: true,
xfbml: true,
oauth: 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>
<fb:serverFbml>
<script type="text/fbml">
<div style="font-size:2em;" >
Hello, <fb:userlink uid="loggedinuser"/>
</div>
</script>
</fb:serverFbml>
</html>
It used to be available using fb:name FBML tag but this is no longer supported now that pages are creating using iframes instead.
This seems like it should be simple enough, but I've gotten burned by messing up my FB like buttons in the past. So I just want to get some verification here before I dive in and lose any likes.
I have a webpage. I have a facebook page for that webpage already with a good amount of likes. I want to add a Like button to my Web page that upon clicking, likes my Facebook page.
Do I just put in my http://www.facebook.com/myfacebookpage in the "URL to Like" of the generator and that will like my FB Page?
I know it's simple - but just want a sanity check! I've lost a good amount of likes by improperly implementing this in the past. Thanks!
That's exactly what should do.
If you use the iframe version it's all you have to do.
If you use the XFBML version you should also initialize the javascript SDK: https://developers.facebook.com/docs/reference/javascript/
Something like this:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', 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>
Problem on facebook like button html :
Facebook is showing here
That you can add a like button to your site that allows users to also add a comment right
after clicking on the "LIKE" button.
From some reason, when I try that html on my site, it doesn't work.
My site is public and I also got the required META tags inside my html.
Help, anyone ?
Commenting currently only works with the XFBML version:
<fb:like></fb:like>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'YOUR APP ID', xfbml: true });
</script>
Or starting Wednesday (new feature not yet released) the simpler version:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>
NOTE: You only need one set of the script tags, and you can add as many <fb:like> or other XFBML widgets after that.