Step 1: Create A
Facebook App
The first thing you
need to do is visit the Facebook Application page and click on
‘Create New App’.
All you need to do is
give your name an appropriate name e.g. YourSite.com Comments. Facebook will
provide you with and App ID/API Key and App secret key.
Step 2: Customise
Your Facebook Comment Area
Next thing you should
do is go to the Facebook Comments code. Don’t worry about the
‘URL to comment on’ field for the moment. You simply need to choose how many
comments you want per page, the width of your comment area and whether you
prefer the light or dark scheme.
Step 3: Add Facebook
Code To Your Header.php Template
When you click on the
‘Get Code’ button you will be presented with two options: HTML5 and XBFML
(iframe isn’t available for comments). I recommend using the HTML5 version.
If you have created
more than one application on Facebook, make sure you select the appropriate
application for your comments so that the correct ID is generated in the code.
The first piece of
code should look something like this:
<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_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Open up your
header.php template and add the code just below the body tag e.g. directly
after <body>. After you have added the code, save the file.
Step 4: Add Facebook
Code To Your Comments.php Template
The second piece of
code that Facebook provides looks something like this (it depends on how many
posts you specified per page and the widget of the comment area):
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="500"></div>
The default code that
Facebook provides links to a static URL therefore we need to modify the code so
that the current page is linked (i.e. the permalink). To do this, all you need
to do is replace data-href=”http://example.com” with data-href=”<?php
the_permalink() ?>”.
Your code should now
look something like:
<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="2" data-width="500"></div>
To add this to your
comment area, all you need to do is add the above code to your comments.php
template. Where you should add this code depends on how your comments.php
template is coded and whether you want Facebook comments to appear above or
below WordPress comments.
If you have followed
these steps correctly, you should now see Facebook comments either above or
below your regular WordPress comments.
No comments:
Post a Comment