It’s no secret that Facebook is the most popular social networking site in the world at present, although Google + and Twitter are not so far behind. You would only be smart if you use that to your advantage and help grow your user base. In this tutorial, we will look at ways in which you can integrate the Facebook API and link your website to Facebook in every possible way.
Registering a Facebook Application:
Certain additions that we will make in this tutorial would require the registration of a Facebook Application and use of the App Id and the Secret Key. Don’t be scared; it hardly involves any coding. The processes that would be described require more of a ‘copy-pasting the code in the right places’.
Go to the Facebook Developers page and click on ‘create a new app’ to start. Provide an “App name” and an “App namespace”. Note that the namespace uniquely identifies the application and can not be a duplicate. Click continue to go to the next screen.
Note the App ID and App Secret for further use. We would be needing it in creating the parts the we are about to do in the next few minutes.
Facebook comments for your posts:
Go to Plugins > Add New to add a new plugin. Search for ‘Facebook Comments’ and Install the application Facebook Comments for WordPress’. In case you have difficulty finding it in the search results, head over to the webpage for the plugin on the WordPress site by clicking here.
Install and activate the plugin. Enter the App ID and App Secret of your Facebook application to run the plugin.
Note for Wamp Server users:
You need the PHP Curl extension to run this plugin and by default, that is not activated in Wamp Server for security issues. Here are the steps to activate it.
Close WAMP if it is running
Navigate to bin\php\(your version of php)\ in the wamp directory (C:\wamp by default), and open the file php.ini with a text editor (like Notepad).
Search for ‘curl’, and uncomment the line extension=php_curl.dll
Navigate to bin\Apache\(your version of apache)\bin\ in the wamp directory and open php.ini.
Search for curl again and uncomment the line extension=php_curl.dll
Save both the files and restart Wamp Server.
Note that there are pros and cons to adding a Facebook comment system. The biggest advantage is that a user’s comment adds to his/her activity in Facebook, meaning that it is visible to the friend circle. That can lead to more traffic if you have quality content.
The biggest downside, however, is that there is no way to back up these comments. In the future, if you decide to shift to a different comment system (like Disqus) or for some reason want to leave the Facebook comment system, there is no way to get those comments back. Also, these comments are generated with respect to the links of your blog posts. If, for some reason, you change the url of the post, getting the old content is not possible.
Add Facebook Like Box or Like Button:
A Facebook Like Box helps you in popularizing the activity of your Facebook page in your WordPress site. It shows a like button and then a list of recent posts from your page, with a “Find Us on Facebook” header. It’s a great way of showcasing content from your page to your site.
The first part is to customize how your plugin would look in your site. For this, head over to the Facebook page for the Like Box plugin by clicking here. You are dynamically shown the preview on the left as you make changes to the options given on the left.
Once you are satisfied with the appearance of your like box, click on ‘Get Code’. Select your app from the dropdown and the copy the HTML5 version.
There are other parameters and options for this plugin which can be manually changed when entering the code.
href – the URL of the Facebook Page for this Like Box. Note that after July 2013 migration of the Facebook Developers, href should be an absolute URL
width – the width of the plugin in pixels. Default width: 300px. WordPress sidebar default: 250px.
height – the height of the plugin in pixels. The default height varies based on number of faces to display, and whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With no faces, and no stream the default height is 63px. If you do not specify anything, the default is taken.
colorscheme – the color scheme for the plugin. Options are ‘light’, ‘dark’. This depends on your theme.
show_faces – specifies whether or not to display profile photos of the people in the plugin. Default value: true.
stream – specifies whether to display a stream of the latest posts from the Facebook Page’s wall.
header – specifies whether to display the Facebook header at the top of the plugin. Values- true, false.
show_border – specifies whether or not to show a border around the plugin, default true. Set to false to style the iframe with your custom CSS.
force_wall – for Places, specifies whether the stream contains posts from the Place’s wall or just checkins from friends. Default value: false. In general, you should not really be bothered about this attribute.
Once you have the code, head over to WordPress Admin and go to Appearance > Widgets. Drag the ‘Text’ Widget to the main sidebar and copy paste all the code as shown below.
Note that after dragging it, a new text box opens where you need to paste the code. Paste both chunks of code that you get.
Save it and go to your home page to check if you did everything correctly.
Viola! We did everything right and here is the result. Congratulations! You can tweak with the options to get a better result if you want.