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: 'https://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.

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

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:

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:

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.

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.

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.

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.

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.

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.

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.