Integrate Facebook Friend Connect With WordPress Blog

Following the first post on how to Integrate Facebook friend connect to your WordPress thesis theme using the simple Facebook plugin ,in this post I will show how to  Manually add Facebook friend connect to your thesis theme.

Step-1

All you need to do go to Facebook developers sections and create a new application,name it what ever you want ,agree with the terms and conditions and click on create application.

Go to wordpress Developers section

Copy the API key from this window onto a notepad(will be needed later on)

Step-2

Copy  and paste the code given below in your text editor.(You can also get it from Facebook)

Save the file with the name-xd_receiver.html ( preferably somewhere in your desktop)

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Cross-Domain Receiver Page

Save the file with the name-xd_receiver.html (somewhere in your desktop) and upload it to the custom folder of your thesis theme.

Step-3

Copy the api key from your facebook application window or notepad and paste this in the place  of [API_key] in the script given below

This goes in your custom_funtions.php file ,non thesis users need to put this in their functions.php file.

add_action('thesis_hook_after_post', 'fb_comment_box');
add_action('thesis_hook_after_post', 'fb_comment_plug');
add_filter('language_attributes', 'add_fb_xml_ns');

function add_fb_xml_ns($content) {
return ‘ xmlns:fb=”http://www.facebook.com/2008/fbml” ‘ . $content;
}

function fb_comment_box() {
if (is_single()) {
?>
<a name=”fb_comments”></a>
<p>Comments:</p>
// <!--[CDATA[-->
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript">
// ]]>
<fb:comments></fb:comments>
// <!--[CDATA[-->
FB.init("[API_KEY]“, “http://www.yoursitename.com/wp-content/themes/thesis_16/custom/xd_receiver.html”);
// ]]>
<?php
}
}

function fb_comment_plug() {
if (!is_single() && !is_page()) {
?>
<p><a href=”<?php echo get_permalink(); ?>#fb_comments”>Add a comment</a></p>
<?
}
}

That done now go ahead and have a look at the options you have for you faceboook application that you just created.

Remember to go to the connect option and enter you callback url in their as shown in the picture below.

Enter your blogs url in the place marked with arrow

Note:-Their will not a be and option for the commenter to enter the url of his/her blog while he/she is commenting.

Below are some screen shots of what this will look once implemented.

Facebook comment box

This is how commentors profile will look like on your blog

Note:-Their will not a be and option for the commenter to enter the url of his/her blog while he/she is commenting.

Administration options

You can moderate the comments from the front end of your blog

Found this hard read this post integrate Facebook friend connect with thesis theme use the simple Facebook connect plugin.

Article by Shoaib Hussain

Shoaib has written 10 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud