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>
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 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.
I have a web-site, where I have facebook comments social plugin on each page and I have facebook page, where I publish items as "shared links" from my site via RSS (through dlvt.it). Links to items are the same.
Now comments are diferent in two places (on facebook page and on web-site)
The question is how can I make that comments on facebook page items appears also on my web-site's comment form ?
Regards,
Anton.
You need to create a Facebook application. Once you have created this, you'll get your app_id. In your website, you can then add:
xmlns="http://www.facebook.com/2008/fbml"> to your HTML tag, and then add in the body tag:
<script src="http://connect.facebook.net/en_US/all.js#appId=YOURAPPID&xfbml=1"></script>
<script type="text/javascript">
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>
This will allow you to access Facebook plugins from your website. So, for comments you can use:
<fb:comments href="Your Page" num_posts="10"></fb:comments>
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.
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.