• Join ShoutMeLoud on Google+
  • X
    Sign-up for FREE weekly Newsletter.

    Integrating Facebook Friend Connect with Thesis WordPress Theme

    by Shoaib Hussain

    Search engine optimization is no more limited to back-linking and we all know that we can’t put all of our eggs in one basket.

    You can do this by simply integrating Facebook  friend connect with your blog.

    What is Facebook friend connect anyway’s?

    Well it’s simply a way to offer people to comment on your blog using their Facebook identity.

    The best feature o Facebook friend connect is that as anyone comments using it on your blog,the commenter gets an option to share the comment with their friends in facebook and the rest is all about virality.(We all know how viral Facebook is)

    Integrating Facebook with your through Facebook friend connect can be done either manually or by simply using a plugin.

    In this post which is the first one from the two  posts in which I’ll show you how to use  Facebook  friend connect get traffic from facebook.

    Simple Facebook connect plugin-For integrating Facebook friend connect in your blog

    Once simple Facebook connect plugin has been installed in you WordPress blog/site simply go to Simple Facebook connect plugin options under your WordPress settings option.

    Now you will see a screen the look like the one below

    wordpress facebook friend connect integration1 520x517

    Your blog's url

    Don’t panic it’s not that complicated-All you need to do is simply click on the first link on the screen or use this link to set up a new Facebook application that you will need to use the Facebook friend connect feature in your blog.

    You will land on this screen

    wordpress facebook friend connect integration2

    Click on the set up a new application Button that you see on the screen/window.

    Name the application what ever you want(preferably your blogs name (ex= Shoutmeloud Connect)

    wordpress facebook friend connect integration3

    Name you application

    Scroll down a little bit and you will see the three lines filled with numbers.

    wordpress facebook friend connect integration4

    Copy the API and secret key and paste it in the simple Facebook connect plugin

    Copy and paste it to the appropriate fields in the simple Facebook friend connect form.

    Now you will also see an option on Facebook fan page ID, Click on this link and you will land on your Facebook fan page (If you have one).

    Note your fan page Id and paste it in the plugin option.

    If you have not yet made a Facebook fan page,follow the step by instructions in this post-How to make a Facebook fan page and  How to set username for Facebook fan page.

    Once that is done  click on the save configuration option and you are done with all the hard work.

    If you are using thesis theme copy paste this code in your thesis open hooks comment field area and you will get a Facebook friend connect attached to your comment form.(will look like this picture)

    <div id="comment-user-details">
    <?php do_action('alt_comment_login'); ?>
    </div>

    You can see this plugin in action here.

    facebook friend connect in action

    Friend connect in action

    For none thesis theme users once you have activated the plugin you should see the plugin in your blogs comment area.

    Now this  is only a part of what can be done with this plugin and how you Facebook friend connect be used to drive traffic to your blog.

    You also get more add on’s with this plugin which are really nice and cool if you are planning to use Facebook as a major source of traffic to your blog.

    Don’t want to use a plugin simply read How to integrate Facebook friend connect with word press and thesis theme without any plugin

    Note:-You need to have WordPress 2.9 for this plugin to work.

    Download simple facebook connect plugin

    This useful tutorial is presented by our guest author Shoyeb. If you like to Write for Shoutmeloud read : Shoutmeloud Revenue Sharing Program.

    120b7d842658a3d18f32aac80a421318delicious

    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.

    { 12 comments… read them below or add one }

    Arijit Das

    Awesome plugins….. Thanks for your valuable information. While I was going to put my comment, so an illusion occurred with me, ie, the screenshot of the comment you gave… i was clicking on it to put my comment and discovered no reaction on it. lol :D

    Reply

    Harsh Agrawal

    I believe this is one feature which every blog should have specially one who are using facebook to drive traffic. No worries with Image, you will see facebook connect on Shoutmeloud soon. Right now facing some tech issues, else you would be seeing it live..

    Reply

    Rajesh Kanuri @ TechCats

    This works great and it will have lots of benefits in terms of driving traffic to the blog.. will implement that in my blog.. Thanks shoaib for the awesome tutorial..

    Reply

    shoaib

    @Rk -u r welcome

    Reply

    NITYIN

    Great post! thanks..
    One point I would like to mention here which can be useful for people like me who rely totally on the tutorials, the URL of the site/blog needs to be entered in the Connect settings in the Facebook application setup. Facebook was not able to re-direct back to my site once I filled up my Facebook login credentials. Missed out on this since this step was not mentioned in the tutorial.

    Figured this out after some hit and trial. :) Also non thesis theme users need to insert code in the comments.php to make this work. The code is mentioned in the readme file which comes along with the plugin.

    Reply

    Ari Herzog

    Hi, can you elaborate how Thesis users can input that code if OpenHooks is not used? I’m guessing it’s something I add in custom_functions but I’m unsure how to write it. Can you email me or post a reply? Thanks!

    Reply

    Otto

    Couple of things:

    1. Never show anybody your Application Secret, ever. Not even part of it. I’d edit that picture and remove it entirely if I were you.

    2. Putting that special comment code into the OpenHooks area won’t work properly. You really need to edit the theme correctly as I describe in the readme. The DIV should surround your three username inputs, so that it can hide them properly when somebody connects via Facebook.

    Future versions of WordPress (3.0 and up) will not require this extra step as much, since the comment form itself is being integrated into the WordPress core code.

    Reply

    Glenn Hubbers

    Otto, I’ve been struggling for days now to get Simple Facebook Connect working properly with my Thesis themed blog, and I’m down to asking this…

    WHAT readme did you describe this in?

    I have my application set up, the SFC plugin activated and edited, and frankly have no idea how to modify the theme to get any of it to show up. Every spot that I have tried to add this code has resulted in a broken blog and having to go in through my FTP client to remove the offending code. I guess that’s what comes from having no idea what any of the code means, and doing this by trial and error. ;-(

    Reply

    Otto

    Also note: A Fan Page is optional and NOT RECOMMENDED.

    You don’t need a Fan Page. People can be Fans of your Application. Your Application *IS* a Fan Page automatically.

    The only reason for the Fan Page option is for users who already made a Fan Page before setting up Facebook Connect.

    Reply

    Mikalis

    Yeah Otto is right, it doesn’t work if you do it as you said. There doesn’t seem to be a thesis hook that fires before the comment form. I had to edit >lib>classes>comments.php in the thesis folder.

    You can see the comment form HTML in that file…

    goes before it

    goes after it… took me a while to find that so hope this might help someone! Works a treat for me now :o )

    Reply

    Santel

    it didn’t work out when i try to create a function
    now i put two comments separately but would love to make it happen into one single place,

    can you help to point me out the function to be call in custom_function.php

    thank in advance

    Reply

    sureshpeters

    tnx mate..for the post..i succesfully completed facebook connect in my sit softwarebuzzer.com tnx a ton..for the informatifve post..!!

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `