Adding Facebook social plugins (comments) to your own website
I’ve used the Facebook Connect social plugins to provide a comments feature to my website blogs (see: Blog comments using Facebook connect social plugins).
The reason I added this was because of the way that I create my blog. I use WordPress as my blog engine running on my WatkissOnline web server, but then depending upon the category, some of the posts are exported to the First Aid Quiz (Health, Safety and First Aid related) website and some to the PenguinTutor.com (Linux, computer and technology related) website. This works well except for one feature, the comments are not available except on the main WordPress site. Technically it would be possible to show the comments and even to create a proxy system to submit comments, but this would need a significant amount of time to develop properly. So I looked at what other options were available and came across Facebook Connect. This provides a number of facebook social networking features that can be integrated into other web sites.
There are a number of advantages to using Facebook such as:
- Easy to add to your web site (only a few lines of code)
- No additional data protection regulations (Facebook is responsible for those)
- Encourages other Facebook users to know and engage with your web site
It is the last of these that is very appealing.
There are some downsides as well such as:
- Lack of direct ownership of the comments
- Does not directly build your potential customer base – although creates alternative in form of “fans”
- It is only going to be as good as how well your users trust Facebook (which is working at alaying fears over privicy at the moment)
I believe that the potential benefits more than out way the negative aspects.
Enabling Facebook Connect XFBML
There are a couple of different ways of embedding Facebook content into a website. I’ve chosen to use the JavaScript SDK with XFBML which incorporates the Facebook Markup Language into the page’s HTML. This sounds quite scary, but is in fact a simple way of embedding the features using only a minimal amount of code. If you are not familiar with what html code is or what it looks like then you may want to learn some html before continuing (see book review HTML, XHTML & CSS Sixth Edition, by Elzabeth Castro).
The JavaScript SDK is a chunk of JavaScript code that is downloaded to your visitor’s browser and converts the XFBML tags into code that your web browser can understand.
The first step to using the JavaScript SDK is to register as an application with Facebook. We won’t actually be creating an application as such, but it means that you will be allocated an Application ID which is needed to allow your site to use the SDK.
Register as a Facebook application developer here.
Enter an “application name” and you will then be provided with the following information along with an example page. It’s the unique App ID we are interested in here.
App name: yoursitename
App URL: http://www.yourwebsite.com
App ID: 123123123123
App secret:123123123123
Adding the Facebook JavaScript SDK to your site
To add this functionality you will need to update your web page html code. This will depend upon how you create your web pages as to how you add this. If you are using Dreamweaver you should switch to the code view; using WordPress see later in this post; using a template based system you will need to edit the templates through a template editor; any other system you need to look for a source code edit feature.
Now start at the top of the page and look for an entity starting <html xmlns and add xmlns:fb=”http://www.facebook.com/2008/fbml” at the end of the entity (before the closing angle bracket >). If you don’t have an xmlns tag then create one as follows:
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:fb=”http://www.facebook.com/2008/fbml”>
Now go down to the very bottom of the page and insert the following just before the </body> tag: You will need to change the appID to the one provided when you register your application. Note you could instead copy and paste this section of code directly from the example that Facebook provides when you register.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '123123123123', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_GB/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Add some xfbml content
Now it’s time to add some xfbml content. This should be inserted as raw html code wherever you want it to appear in your page. A couple of examples are shown below.
Like button
<fb:like href="urlofwebpage"><fb:like>
Replace the url of webpage as appropriate
Comments
<fb:comments xid="unique_id"></fb:comments>
Note that the unique_id should be unique for each separate comment thread you want.
You can find more social plugins on the Facebook developers social plugins page
You then need to repeat for any other pages that you want to add these features to.
Adding to WordPress Template
In WordPress you need to make the same changes as above, but these need to go into the WordPress templates. You can also add a small amount of wordpress php code to ensure that each blog entry has it’s own comment field.
This is all done in the theme for the site, and as such will be propagated across all relevant posts / pages depending upon which you update. You may want to create your own theme and edit that rather than the original, but you can just edit the original.
From the administration dashboard go to “Appearance” and “Editor”, then choose the appropriate theme.
You then need to select the appropriate template file.
header.php (Header)
The xmlns tag should be entered within this template file.
footer.php (Footer)
You should insert the JavaScript code for the bottom of the page in this file.
single.php (Single Post) and/or page.php (Page Template)
These template files are used for blog posts and wordpress pages respectively. Update either or both of these depending upon which pages you would like to add your Facebook plugin to.
To include the individual post ID (eg. for the comment unique code) then add:
<?php the_ID(); ?>
For example in my single.php file I have inserted the following just before the wordpress comments section:
<fb:comments xid=”mywebsite-blog-<?php the_ID(); ?>”></fb:comments> ?>
Further information
There is a lot more that you can do with Facebook Social Plugins once you have learnt the basics.
You can find more social plugins on the Facebook developers social plugins page or elsewhere on the Facebook developers site.