Articles
- Self Improvement
- Windows
Development
- PHP
- Resources
- Wordpress
- Work
Interesting
- Entertainment
- Gadgets
- Lifestyle
- LinkRoll
- News
- Photos
- Software
- Technologies
Others
- Malaysia

Integrate social networking in wordpress using facebook connect api and wordpress plugin tutorial

Posted by Ruhani Rabin in PHP, Wordpress | Comments

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

wordpress facebook connect

Facebook connect is a Facebook API to integrate Facebook related social networking option to your website. It provides a secure layer of authentication mechanism to integrate partial Facebook features, user details for you. Today I’m going to show you a way to integrate Facebook authentication for your Wordpress blog. This article assumes that you are already running Wordpress 2.7 or above. It’s possible to make a Facebook connect plugin from the very scratch but here I’m covering the easy way to implement it. Alternatively because of some problems with this plugin, I’ve written another post for much more easier way to integrate facebook (Using Official Plugin). Now here are the steps to make you accomplish on this matter.

#1 - Make the Facebook Application

Do you have a Facebook Profile? If you don’t have a Facebook profile, create one first then move to Facebook developers page to create your website application. A Facebook application is required provide a secure layer of authentication and manage Facebook members for your website. Here is how you should do it.

Visit Facebook Developers page
Click on Start Now Button
You need to Login to Facebook Developers Application and you need to add it to your applications, once you do that you can head over here and use the “Set up New Application” button.
Insert your application name and create the application, here is the typical application settings
Once you are done you need to keep the settings page open for reference to the API Key.

#2 - Implementing the fbConnect Plugin

#3 – See it in Action

Now you’ve added the plugin to your system and integrated the functions to your blog. So it’s time for you to check it out. Try to login using your sidebar and you should be presented with a Facebook login popup dialog.

Once you enter the credentials, you should be logged in to your blog as a Facebook user and will be able to see your Facebook avatar at the sidebar panel.

These are only the basic setup of the plugin. If you like you can take it further, see the rest of this article get the idea of doing it.

#4 – Implement the Facebook Connect options in your Comment posting form (NOT necessary for the newer version of the plugin)

Now we are going to do some changes in the comments.php file which comes with your theme package. Here is a example of implementing the Facebook Login Button just before the Author Name field. Open your comments.php file in your favorite text editor. If you don’t have one you can read this and choose one for yourself and yes they are free. In your text editor search for the line “wp-comments-post.php” then follow the code changes below..

^?View Code PHP

<form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
	<?php if ( $user_ID ) : ?>
  <?php 
  // facebook user checking function
  $fb_user = fb_get_loggedin_user(); //fb user check 
  ?>
 
  <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
 
  <!-- facebook user checking function -->
  <?php
  // if facebook User
  if ($fb_user){
      echo $user_identity." - Via Facebook";
    }
    else echo $user_identity;
  ?>
  </a>. <?php
        // if facebook User
        if ($fb_user){
        echo '<a href="#" onclick="FB.Connect.logout(function() { window.location = ''.get_option('siteurl').'/?fbconnect_action=logout'.''; })">Logout</a></p>';
    }
    else echo "<a href='".get_option('siteurl')."/wp-login.php?action=logout' title='Log out of this account'>Logout &raquo;</a></p>" ; ?>
 
	<?php else : ?>
 
  <p>
	<?php
  	// adding an icon for general login OR facebook login option graphic
    echo "Already a Member? ";
		echo '<a href="'.get_option('siteurl').'/wp-login.php'.'"><b>Login..</b></a><br/>';
    echo "OR Login via Facebook<br/><fb:login-button length="".$loginbutton."" autologoutlink="true" onlogin="window.location = '".$uri."';"></fb:login-button>n"; ?>
  </p>
  <p>
	<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" />
	<label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>

Here is how it looks like.

#5 - Known Issues

This plugin seems not be working with WP-Super Cache plugin, which cache static HTML files of the dynamic Wordpress website.

Well, this is all for now. Please do post your comments about your implementations and possible problems that you’ve hit along the way.

dgnet

#4 makes Parse error: syntax error, unexpected '"', expecting ',' or ';'
on adding an icon...

Martin Pedersen

I can't get the fb-wb-connect function to work with Google Chrome or Firefox... But it works fine in IE... Any clues?

Hartip Simorangkir

great

Greg

Nice section on the comments. I have question. When someone is viewing my site thru a facebook shared link on someones wall (the blue facebook comment box at the top). If they hit the FBConnect button on my site (i.e. they saw something good in the share and want to join my site), this works fine in a Firefox browser and they are added to my sites user list. But if I try to do the same thing in IE7 it doesnt work......they have use the right hand button at the top in facebook to go directly to my site, then IE 7 FBConnect will work. Do you have a fix against Sociable's V1.2.1 for this or a later version? Thanks.

Facebook User

Have installed this..but that 'Publish this comment to Facebook' is not showing..any ideas?

Facebook User

Yes. Facebook Connector Options in wp-admin. Set Auto approval and Comment Form flags.

andy

i have, even since i first installed it..still not showing

Lucy

I am using The Morning After theme. I have followed these instruction and everything look and seems fine until I try to Connect. I get the following message in the facebook box:

“Invalid Argument

The Facebook Connect cross-domain receiver URL (http://heathtavrides.com/wp-content/plugins/fbc...) must have the application’s Connect URL (http://www.heathtavrides.com/) as a prefix. You can configure the Connect URL in the Application Settings Editor.”

Does anyone know how I can fix this? Everything appears to be the way it should. I have my full correct website address as the Connect URL. Do I need to change this or the Canvas URL to something else? Thank you!

Ruhani Rabin

Hi Lucy, Goto facebook and edit your application for your website. Configure the connect url with the whole path to the fbconnect plugin. it should be like

http://heathtavrides.com/wp-content/plugins/fbc...

in your connect to that address and save your application .. the same situation faced by "James Bond" check the comments below.. #comment-7925078

Edward.H

this great tutorial,thanks for your good work, I have submitted a link of this article to our website in order to share it with more people.Check:

http://www.webmasterclip.com/story/integrate-so...

Integrate social networking in wordpress using facebook connect api and wordpress plugin tutorial

#1 - Make the Facebook Application

#2 - Implementing the fbConnect Plugin

#3 – See it in Action

#4 – Implement the Facebook Connect options in your Comment posting form (NOT necessary for the newer version of the plugin)

#5 - Known Issues

Members & Friends

Review or Rate

Last 10 posts in PHP

Featured

Popular Tags