WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Tutorials» Excellent Tutorials to Utilize the Power of WordPress and Facebook

Excellent Tutorials to Utilize the Power of WordPress and Facebook

Last updated on June 21st, 2012 by Editorial Staff
34 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

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.

34 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

25 Comments

Leave a Reply
  1. Andrew Edney says:
    Jan 30, 2011 at 6:30 am

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

    Reply
  2. kadee says:
    Nov 24, 2010 at 11:45 am

    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!).

    Reply
  3. Shahab Khan says:
    Apr 13, 2010 at 2:27 pm

    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.

    Reply
  4. Piet says:
    Apr 13, 2010 at 9:54 am

    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?

    Reply
    • Editorial Staff says:
      Apr 13, 2010 at 9:58 am

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

      Reply
      • Piet says:
        Apr 13, 2010 at 4:36 pm

        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!

        Reply
        • Editorial Staff says:
          Apr 13, 2010 at 5:19 pm

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

  5. magicmule says:
    Mar 25, 2010 at 11:14 am

    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

    Reply
    • Editorial Staff says:
      Mar 26, 2010 at 10:36 pm

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

      Reply
  6. leandro says:
    Mar 17, 2010 at 7:53 pm

    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

    Reply
    • Editorial Staff says:
      Mar 18, 2010 at 4:47 am

      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?

      Reply
  7. Kevin Tan the WP Blogger says:
    Feb 8, 2010 at 4:30 am

    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

    Reply
    • Editorial Staff says:
      Feb 8, 2010 at 6:52 am

      Glad you liked it Kevin.

      Reply
  8. Paul Gardner says:
    Feb 7, 2010 at 5:55 pm

    Great tutorial

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

    Reply
    • Editorial Staff says:
      Feb 8, 2010 at 6:53 am

      Yes, you can simply go to your developers section:

      http://www.facebook.com/developers/ << And it will show you.

      Reply
  9. Sabuj Kundu aka manchumahara says:
    Jan 3, 2010 at 3:42 pm

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

    Reply
  10. David DWQ says:
    Nov 24, 2009 at 10:47 am

    This is a really usefull article, thanks.

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

    Cheers!

    Reply
    • Editorial Staff says:
      Nov 30, 2009 at 2:25 pm

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

      Reply
  11. clippingimages says:
    Oct 28, 2009 at 6:47 pm

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

    Reply
  12. Dana Kaminski says:
    Oct 18, 2009 at 4:53 pm

    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

    Reply
  13. Taa says:
    Oct 13, 2009 at 10:10 pm

    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

    Reply
  14. Jen | UPrinting says:
    Oct 13, 2009 at 7:33 pm

    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!

    Reply
  15. raiderhost says:
    Oct 5, 2009 at 8:11 pm

    make its printed dude :)

    Reply
  16. Arleen Bothwell says:
    Oct 5, 2009 at 6:56 pm

    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.

    Reply
  17. Tim Moon says:
    Oct 5, 2009 at 6:55 pm

    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!

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
MainWP
MainWP Coupon
Get 15% OFF on MainWP WordPress multisite manager plugin.
Sprout Invoices
Sprout Invoices Coupon
Get 50% OFF on Sprout Invoices WordPress invoicing plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.