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.

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

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

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

This is a guest post by Shoyeb who writes at what-what.net. If you like to write for Shoutmeloud, do read : Shoutmeloud revenue sharing program.

Related posts:

1. Integrating Facebook Friend Connect with Thesis Wordpress Theme
2. Facebook Fan page VS Google Friend Connect
3. Automatically update your Wordpress blog copyright years
4. Digg integrates with facebook using facebook connect
5. Use Google Friend Connect to Send Newsletter To Members
6. Fan Box : Facebook pages widget for your blog
7. Google Friend Connect Added More features
8. Thesis Open Hook Wordpress Plugin : Easily customize Thesis Wordpress Theme

Tagged as: customizing thesis, facebook connect, facebook friend connect, guest author, guest post, thesis tutorials, Wordpress, Wordpress plugin