Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Excellent Tutorials to Utilize the Power of WordPress and Facebook

Last updated on by
Follow WPBeginner on YouTube
Excellent Tutorials to Utilize the Power of WordPress and Facebook

Facebook can play a crucial role in your blog’s growth as it is one of the largest social media network on the web. In this article we will be sharing some of the most valuable tips and tutorials that will let you utilize the power of Facebook and WordPress to your advantage.

We will organize this tutorial in the method from easiest to hardest, so bare with us.

Add a Facebook Share Link Button to WordPress

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="blank"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share this article on Facebook" /></a>

You will need to place this snippet in your single.php and/or page.php. When your users click on this button, it will automatically open a facebook sharer link which will let them share your article with their friends on facebook. You will need to upload a facebook icon to your theme image directory.

Source

Add a Live Facebook Link Share Button to WordPress

You probably have seen the popular tweetmeme retweet button on many blogs. This is the similar button except, this is for facebook. It keeps an active count of how many times the page has been shared, so it can be used as a substitute to the hack shared on the top.

You will need to add the following code in your single.php and/or page.php

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

The code above will show a large facebook sharer button with the count. But if you want to display a smaller button, then you will need to paste the following code:

<script>var fbShare = {
url: 'http://www.wpbeginner.com',
size: 'small',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

This will show a small tweetmeme like button that we have on our post page next to the Related articles at the end of each post.

To learn more parameters refer to the original source.

Display Facebook Status in WordPress

Just like you would display your recent tweet in WordPress, this plugin will let you display your most recent facebook status on your site. Simply install the plugin and paste the code in your template file.

<?php facebook_status("facebook_status_feed_url"); ?>

Create a Facebook Dashboard Widget in WordPress

Facebook is essential as you can use it to provide support, and have a huge interaction with your users. But there will be times that you cannot access facebook from some places. Whether it is from work, school, or some other place. Even though this widget does not let you add any text or share anything on facebook, it keeps you updated with what your friends or fans might be sharing by displaying a feed for your friend status updates, or your notification feeds.

Facebook Dashboard in Your WordPress

Simply download the plugin and install it. You can change the height and width and customize it.

Create a Facebook Fan Page for your WordPress blog

Create a Facebook Page

Just like you should have a twitter profile for your blog, you should create a facebook fan page for your website. This will be another way where you can share your site links, tutorials, and resources with your audience. Facebook can help you increase your blog’s growth just like twitter can and probably faster depending on your niche. So you must make a profile page.

Follow the setup and add the necessary settings that you need to. Also don’t forget to subscribe to WPBeginner’s Facebook Page.

Embed Your Facebook Fan Page in Your Site

Once you have created a page using the method above, you can promote it and get more followers by letting your site users know that it exist. Many top sites including Wired Magazine and others are displaying Facebook fan page on their site to gain more fans (followers).

Here are the three ways you can display them on your site:

Embed Facebook Fan Page in Your Site

Option 1 takes up a lot of space. It shows your streams, and fans. You will see that in the screen shot above, it shows that you are already a fan, but that is because we took the screenshot from the admin page. But if you are not a fan of WPBeginner page, you can see it on our sidebar it will show Become a Fan button.

Option 2 just shows a few of your fans and the count with the title. This is the widely used method that is used among many blogs including ours.

Option 3 is a very simple button and it takes the least amount of space. It does not show the count of fans so it will not be very efficient. Psychologically speaking, when you display social proof, you are more likely to see an increase in new user sign up.

It is against Facebook Terms of Service (TOS) to modify the JavaScript to only show Become a Fan button and exclude everything else. Even though it is possible to do so with a tweak of a few codes, we strongly recommended that you do not violate the TOS because it can result in your Page Removal.

Here is how you can get the code to place on your site:

Embed Facebook Fan Page in Your Site

Embed Facebook Fan Page in Your Site

Click on Other and copy the code. Paste it in your theme file where you want it to appear. Use the correct styling that you like and now you have a facebook fan box on your WordPress blog.

You can modify the height, width and other parameters. For full details check out Facebook Wiki.

If you do not want to go through the Raw Code hassle, then there is a plugin for you called Facebook Fan Box. You can use this plugin to accomplish what we did above.

Create Your Own Facebook App for Your WordPress blog

This application is not super sleek, but what it does is create a simple RSS Feed of your blog with a link to your recent posts. Users can add this application to their facebook profile page to stay updated. There are other application on facebook that lets you do that, but they put a big banner below saying “Provided by”. This app will be completely yours, therefore you would not need copyright or provided by links.

Facebook is now treating websites and blogs as an application, so by using this trick you can give your blogs two lives, one at Facebook and the other at Your Blog. So lets get things started.

First thing you will need to do is Download the plugin by John Eckman called WPBook. Install it in your blog, we will deal with the settings in further steps.

Due to this Plugin and the tutorial, you will accomplish something like this: Facebook App for WPBeginner

This will ask you permission to whether allow or disallow like any other Facebook Application. By allowing, application developers will have access to your birthdate, gender, location and other demographic information to display targetted ads. But in our case, this app is very light and you will not be monetizing it for the most part.

In this app (example), facebook merely acts as a feed reader where your users can share the links and comment from facebook. All comments are stored in the blog’s server not facebook’s server. But it lets you genereate a community in Facebook and most likely get a new audience and visitors to your site. The reason why you will get more exposure is because all friends of the blog user will now see that they are using your application. Whenever they do something, it will go in the friend’s feed hence more people will likely join.

Step 1: Create an Application

To give your blog a life on Facebook, you will need to setup a new application which will require you to signup as a developer. If you are already a user, you will just have to click the allow button, and you will be signed in as a developer.

Set Up a New Facebook Application

Once you click on that, you will see a screen like below. Select a name and agree to the terms to move onto the next step.

Name a New Facebook Application

Step 2 – Configuration

Now you will be given an API which you should never share with anyone. In the Basic Configuration step as shown below, you can add your facebook icon, favicon, description and other info.

Configuration Part 1

The next part is Authentication. When a user use your application, he must click on the “allow” button. Basically in here you will be inserting a post-authorize callback url, which is basically your site URL. When a user allows access to your application, your site will be informed. Same in the next field where is post-remove callback url, your site will be reported when a user removes your app.

In the field insert your site URL name.

Configuration Part 2

Next step is to pick a Canvas URL. This is the URL which your users will use to access your blog via facebook. For example: http://apps.facebook.com/wpbeginner/. The /wpbeginner part is what you are picking in this step. The plugin we installed WPBook is compatible with iFrame so use iFrame. Use the screenshot below as your guide.

Configuration Part 3

Thats it on the Facebook part. Now we will return to our WordPress admin panel and visit the settings of the plugin that we installed called WPBook. If you did not install it till now, this will be the time that you will need to because without it, it won’t work.

Below is the screenshot of settings that we used for WPBook plugin. There are advanced settings that you can use if you so desire.

WPBook Settings

Preview

Application Preview

You are done with integrating your WordPress into Facebook.

Source

If you like the above tutorials feel free to share them with your friends on Facebook, twitter or any where else. If you know of some more cool tutorials, then post them in the comment or contact us. We will add to the post and give full credit.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • http://usingwindowshomeserver.com Andrew Edney

    Thanks for the information – very useful and very easy to set up.

  • http://cambalkonyagmur.com kadee

    This post is really timely for me because I’m taking the plunge and in the process of moving my blog from Blogger to a self-hosted WordPress site (really wish I would have gone with WP in the first place…lesson learned!).

  • http://virgintech.org Shahab Khan

    Creating a facebook app for a blog is really a great idea. I Will definitely give it a try to create one for my own blog.

  • Piet

    Great tutorial, but unfortunately the domain name must be at least 7 characters long. So it doesn’t work on a 4 letter domain with a 2 letter extension :(
    Or do you perhaps have a nice workaround for that?

    • http://www.wpbeginner.com Editorial Staff

      That is a limit set by Facebook, so it is not in our control.

      • Piet

        Yeah, I indeed realize that it is a Facebook limit. So you also do not know of a workaround for this? Well if I ever find one, I will let you know in the comments!

        • http://www.wpbeginner.com Editorial Staff

          Yea sadly we do not have any work arounds at the moment. If you do find out let us know.

  • http://www.beamondcreative.com magicmule

    I’d like to include a within the footer of my website a “facebook fan count”. I believe this will add an incentive to users considering clicking our facebook icon. “join XXXX fans on our facebook page” for example. I want the XXXX to be automatically populated with our facebook fan count. I want to do the same with twitter. Any insight you can provide would be helpful.

    Thanks

    • http://www.wpbeginner.com Editorial Staff

      Yes there is a plugin that can do that. It is called Subscribe Text Counter.

  • http://www.ventanadigital.com.ar leandro

    when i tried to get my FB profile id, facebook shows me this error:

    Forbidden

    You don’t have permission to access /wp-content/plugins/wp-facebookconnect/ on this server.

    i change the plugin folder permissions but nothing happen :S

    • http://www.wpbeginner.com Editorial Staff

      We have no idea without really taking a look at how to fix this. Never had this problem before. Did you try re-uploading the plugin?

  • http://www.imkevintan.com Kevin Tan the WP Blogger

    Hi Syed,

    I ‘digged’ and found your post from ProBlogger’s forum. Thanks for sharing this and the guide to grab our own branded Fan Page URL.

    Kevin Tan

    • http://www.wpbeginner.com Editorial Staff

      Glad you liked it Kevin.

  • http://paulgardner.info/ Paul Gardner

    Great tutorial

    Is there any way of finding out how many facebook users are using your application?

  • http://blog.manchumahara.com Sabuj Kundu aka manchumahara

    Thanks for this great article. I just added my blog to fb aps [Link Removed]
    thank you again

  • https://twitter.com/davidDWQ David DWQ

    This is a really usefull article, thanks.

    Btw, i wanted to share this article on facebook but never found the share button :(

    Cheers!

    • http://www.wpbeginner.com Editorial Staff

      We are working on adding that and other new aspects to our design very soon in the next update.

  • http://www.clippingimages.com clippingimages

    WoW :) Awesome tutorial. Thanks for sharing this nice post.

  • http://hollywoodactorprep.com/blog Dana Kaminski

    I’ve been looking for a way to integrate my Facebook pages , especially the fan page.
    I already have one for my blog
    called “Hollywood Actor Prep”, but it has been sitting
    at Facebook for a long time.
    I hope this works with that existant one at Facebook.

    I appreciate your information and I will subscribe.

    Dana Kaminski

  • http://www.720media.com Taa

    Thanks for the info. Love the use of graphics to illustrate the steps. I find that Facebook posts are very search engine friendly and I appreciate your suggestions. I go back & forth on having just the fans visible or the whole box–right now I’m liking the more detailed info. You can check it out here on the right side – http://www.720media.com
    Thanks again! I just started following you on Twitter too.

    – Taa
    http://www.Twitter.com/720media

  • http://blog.uprinting.com Jen | UPrinting

    Facebook has also helped increase traffic in my blog as well. I already do some of these, but the other suggestions are very informative and helpful. Thanks!

  • http://raiderhost.info raiderhost

    make its printed dude :)

  • http://arleenbothwell.info Arleen Bothwell

    This is worth it. I don’t have time now, but I’m going to save your page in case it disappears. Thank you. Good stuff.

  • http://www.talkwithtim.com Tim Moon

    These are handy tutorials! Sharing my blog posts on Facebook has really helped to drive traffic. Plus, I’ve built up a nice little fan base. Thanks!