Social Markup (XFBML)
Social Markup (XFMBL) is an easy way to integrate Connect into your site.
Facebook Developer site says to place this below the <body> Element in the markup.
Maybe there is some reasoning behind that, but for the most part, all of these awesome widgets/plugins for sharing and/or increasing your browser experience, are total bullshit on the front end. I'm not questioning the facebook team, I'm sure there's a great reason why they put it there. I'm really curious as to why no Fronteers stepped up and asked or found a way to do it with proper standards.
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
<script type="text/javascript">FB.init("023054efd103cfaefb06515a6012a902");</script>
Connect with Facebook
Login Button
Clicking the button opens a dialog to authenticate using Connect. When the user accepts, your page will be reloaded with a facebook session for the user. This enalbes the tags below to function. The Login Button is required to enable the other markup.
<fb:login-button v="2" size="medium">Connect with Facebook</fb:login-button>
Renders the profile picture of the user or Page specified.
<fb:profile-pic uid="jalbertbowden" size="square" facebook-logo="true"></fb:profile-pic>
Name. Renders the name of the user or the page specified.
<fb:name uid="<fb:profile-pic uid="jalbertbowden" size="square" facebook-logo="true"></fb:profile-pic>" useyou="true" linked="true"></fb:name>
Friends: Render Profile Pictures Of Users Friends Using The JavaScript API Client Library
<div id="profile_pics"></div>
<script type="text/javascript">
var widget_div = document.getElementById("profile_pics");
FB.ensureInit(function () {
FB.Facebook.get_sessionState().waitUntilReady(function() {
FB.Facebook.apiClient.friends_get(null, function(result) {
var markup = "";
var num_friends = result ? Math.min(5, result.length) : 0;
if (num_friends > 0) {
for (var i=0; i<num_friends; i++) {
markup +=
'<fb:profile-pic size="square" uid="'+result[i]+'" facebook-logo="true"></fb:profile-pic>';
}
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
});
});
});
</script>