One of our users over at our Facebook community page asked us to cover the installation and setup of Simple Facebook Connect plugin for WordPress. For those who do not know, Simple Facebook Connect is a plugin created by Otto (@otto42) to make it easy for your site to use Facebook social plugins. This plugin works in a series of sub-systems that lets you add any sort of Facebook functionality (facebook logins, comments etc) you like to your WordPress blog. By far this is the most complete WordPress plugin for facebook features however the installation process may seem a bit difficult for beginners. In this article, we will show you how to install and setup Simple Facebook Connect for WordPress.
Features
Before we go ahead with the setup instructions, lets take a look at full features that Simple Facebook Connect offers.
- Enables your site to connect to Facebook with JS SDK
- Implements OpenGraph tags, entirely automatically
- Comment using Facebook credentials (with Facebook avatar support)
- Automatically Publish new posts to Facebook Profile or Application or Fan Page
- Manually Publish posts to FB Profile or Application or Fan Page
- Integrate comments made on Facebook back into your own site
- Login with your Facebook credentials, optionally using Facebook avatars instead of Gravatars
- New user registration with Facebook credentials (using the Facebook Registration Authentication system)
- Facebook Photo Album integration in the Media uploader
- Like Button and shortcode
- User Status Widget and shortcode
- Live Stream Widget and shortcode
- Fan Box Widget and shortcode
- Fan Count Chicklet and Widget
- Activity Feed Widget
- “Share” button and Shortcode (reworked version of Like button, as Share button is no longer supported by Facebook)
That’s quite a lot for one plugin. But remember, you don’t have to use all the features it offers. You can still use the plugin and enable only what you need.
Installation and Setup
First thing you need to do is install and activate Simple Facebook Connect plugin. Upon activation, a new option will be added under your Settings Menu called Simple Facebook Connect. Once you click on that, it will ask you to enter your application secret, application ID, and facebook fan page.
Now most of you probably have no clue what the heck the first two are, and you are probably wondering why you need these. You need these for this plugin to work properly (Auto-publish to Facebook, Facebook login, registration etc). Unfortunately, at this point in time, you cannot move forward without having those elements filled in. So we will show you how to get your own application ID and application secret key.
First you need to visit Facebook Developers Page. After you login, click on Apps link in the navigation bar. Then click on Create a new App icon (top left).
Obviously, change the application name to your own, and then click ok. It will prompt you to fill out the captcha. Once you have done that, you will be taken to a screen that will give you the basic information for your application.
Now do everything we demonstrate in the image above. Edit the icon to match your site’s logo, so your users know what they are connecting to. Keep your contact email updated. Select your category. Check the box for Website and then enter your url. Your application ID and app secret are listed at the top. You can copy and paste them in your Simple Facebook Connect plugin settings.
Now this only leaves us with the Facebook Fan Page ID. If you are using a fan page for your site (which most of us do), then you need to enter it in the field there. You can find the ID of the page by simply bringing your mouse over to your fan page edit link (the ID is listed there).
Once you click Save changes, a whole bunch of new options should be available to you now under SFC Plugins.
Check the ones that you plan on using, and leave the others blank. In our example, we will leave all boxes checked, so we can cover everything.
Below the Facebook Plugins, you will have an option for Facebook Metadata. By default Simple Facebook Connect plugin pulls Facebook Meta Data information from your posts. But if for some reason, you didn’t have an image for the post, or an error occurs, there is an option to enter default values.
Enter the path of your default image (which most likely should be your logo), and the description of the site. Below this you will see the option for Login Settings.
You can check to have Facebook Avatars override Gravatars when available. This is entirely a personal preference. Next you will have the Like Button settings.
If you don’t know what the like buttons look like, then scroll up on this page, and you will see the example of the facebook like button. You have the option to enter it either before your post content, after your post content, both before and after, or manually. You can select from the like button layouts, the action name, and send button.
We have checked the settings that tends to work the best among our clients.
There is also share button settings (which essentially has been replaced by the like button). So honestly this part is useless if you are using the like button. But lets say, if you wanted to use this one instead of the like button, then you can select the options from adding it before the content, after the content, before and after the content, or manual insertion. You can also select from Box count or button count.
We left the settings to be default. You can pick for yourself where you want these.
Next option available is the auto-publish settings.
You can choose to auto-publish to your facebook profile and/or facebook application page. If you have the Facebook Fan Page ID inserted, then it will publish to your fan page. You will have to grant SFC permission by clicking on the button and authorizing through facebook. This is safe authorization because you are authorizing your own application.
Next is Fan Box settings which is for folks who are CSS rockstars and want to customize the look of their facebook fan page. You have to know how to use Firebug in order to really use this custom CSS box because SFC provides no documentation of each class. So use firebug to detect what you want to modify, and then place the custom styling in this area.
So are you wondering how would these settings look like on your site? Well check out the screenshots for the plugin.
We hope this article helped you do a basic setup for Simple Facebook Connect.
Plugin is no longer available for download.
How do I get the buttons to be linked to my Business page instead of my personal page. To log into my Business Page, I have to log into personal page and then select the page I manage. When in the developer site it does not allow me the option to choose which page the app if for and automatically configures everything for my personal page. Please tell me how to get it done for my business page only. Everyone is LIKING the wrong page.
I cant download the plugin when i follow the link:
Whoops!
We couldn’t find that plugin. Maybe you were looking for one of these?
Has it change name?
No Simple Facebook Connect is no longer maintained by the plugin author any more as there is now an official facebook plugin available which does all that and then some more.
I installed this and I really like it. But I did get about 50 errors from this plugin when I went to Nibbler. Should I be concerned?
Thanks for the help. You Rock!
I have tried numerous connect with facebook plugins and I can’t get them to work properly. Each time I press the facebook button it doesn’t go anywhere. Error message tells me there are too many redirects. Do you have any idea what could be going wrong? Thanks
Hi, How do I make the buttons go on the right side of the Author name and Email text box, just like you have done here. (The Connect with Facebook & Sign in with Twitter buttons are on the right side, whereas on mine its on the top.)
Please let me know.
Thank you.
Use CSS styling to float them to the right.
Hi, it’s clear for me when I use private facebook profile. But as I’m logged in to the facebook Page I’ve created for small business, there is no possibility to create an application. I go to developers page, I log in, I click on Apps in top menu…and I’m redirected to facebook page with the timeline.
Is FSC, and creating apps option only for private profiles? Is there any other option I can connect facebook Page with wordpress?
Yes, a user must create apps not a page.
@wpbeginner, can you share with us how you arrange the sign in with twitter and connect with facebook button near this comment area?
That’s simply CSS modifications. Unfortunately, we don’t teach CSS here.
@wpbeginner : Does it support open graph og:video tag ?
I’ve got an error when re-setting up the plugin when my wp upload had to be wiped out. An error occurred with my app. Please try again later.API Error Code: 191API Error Description: The specified URL is not owned by the applicationError Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.
Nice article. I configured the app. But I am having problem. How is it possible for me to show the status messages of my FAN PAGE in my WP theme?
@arsalkeen If you show the entire stream, then you can bring your fan page communication. Otherwise, it is not possible to do so.
@wpbeginner hmm.. the SFC Fanbox widget seems to be sort of a solution.
This is an excellent article. I currently use Disqus. Is there a way to integrate this with disqus so that it automatically logs you in as a Facebook user in disqus? Ideally I’d like to keep disqus because it’s more visually appealing. What do you think?
Hi i seem to be having abit of trouble setting this up any chnce you can help us out on this.