Add Facebook To Standard Theme’s Follow Count Widget

Welcome to WordPress Wednesdays! Usually, Matthew’s stuff will be shown here, but I (Herb) decided to share a tip today instead. Standard Theme comes shipped with an excellent widget that lets you show-off the number of Twitter and Feedburner followers your blog has. Unfortunately, it leaves out Facebook. This modification rectifies that shortcoming. I’ll walk you through the process after the break!

Here’s what the finish product looks like here at GeekRev:

Making this happen will require the following steps:

1. Register a Facebook application
2. Place a Facebook SDK file on your server.
3. Create a custom PHP file to grab the follower count.
4. Modify Standard Theme to include the count.

This tweak requires editing one of the original Standard Theme files (followcount.php). So, as usual, backup everything before you make this modification.

Part 1 – Register a Facebook Application

1. Log-in to Facebook
2. Go to this page
3. Give your app a name, agree to the terms of service, and press the “Create App” button! (see a pic of this screen)
4. You may get a CAPTCHA page. Fill it out and submit. (see a pic of this screen)
5. Enter details if you want – I just hit the “Save Changes” button without changing anything. (see a pic of this screen)
6. You should have an app details page that shows you a bunch of “keys” for your app. (see a pic of this screen). You need to keep this screen open in a tab, or copy/paste the info somewhere where you can get to it later.

Part 2 – Place a Facebook SDK file on your server

You need to place this file on your server, in the same folder as your web pages. It is a file from the Facebook SDK that has the functions you need for making this all work. You do not need to change anything in this file.

Part 3 – Create a custom PHP file to grab the follower count.

1. Open your favorite text editor and start a new file.
2. Save it as something like, my_fb_followers.php
3. Paste the following code into it: [PHP]<?php
   require_once(‘facebook.php’);
   $facebook = new Facebook(array(
   ‘appId’  => ‘ENTER-YOUR-APP-ID’,
   ‘secret’ => ‘ENTER-YOUR-APP-SECRET’,
   ‘cookie’ => true,
   ));
   $result = $facebook->api(array(
   ‘method’ => ‘fql.query’,
   ‘query’ => ‘select fan_count from page where page_id = ENTER-YOUR-PAGE-ID;’
   ));
   $fb_fans = $result[0][‘fan_count’];$sum = $sum + $fb_fans;
   ?>[/PHP]
4. Replace the “ENTER-YOUR-APP-ID” text with the App-id from your Facebook app details page.
5. Replace the “ENTER-YOUR-APP-SECRET” text with the App-secret from your Facebook app details page.
6. Replace the “ENTER-YOUR-PAGE-ID” text with your fan page’s id. You can find this by editing your page in Facebook and looking at the URL. The PAGE-ID is not a URL, it is  a multi-digit number. You’ll see it as part of the URL when you edit your fan page.
7. Save it.
8. Upload it to your server, to the same place you put the facebook.php file.
9. If you’re having trouble, try this [download] of the file, and edit it.

Part 4 – Modify Standard Theme to include the count.

You can leave the appearance of the widget as is if you want, but I was trying to reduce the amount of code I had to insert into the default Standard Theme files. So, I created a custom background image for the widget that includes icons for Facebook, Twitter, and Feedburner. This is all done in CSS, which I took care of by inserting the following into my custom.css file. The first part sets the background image (feel free to use the light one I made or the dark one I made), and the second part hides the follower count text.

 

[CSS].follower_count { background: url(“http://MY-URL-PATH/geekrev-soc-cnt.png”) no-repeat scroll left top transparent; }

.follower_count .count_label { display: none; }[/CSS]

NOTE: Be sure to change “MY-URL-PATH” to your actual URL path to the graphic.

Now, go to the theme editor page, and edit the followcount.php file (remember to back this stuff up first).

Find this line:

[PHP]$sum = $this->twitter_count($twitter_username, $args[‘widget_id’], $clear_cache) + $this->feed_count($feedburner_name, $args[‘widget_id’], $clear_cache);[/PHP]

Add the following code, right after it. IMPORTANT: you need to replace “YOUR-PATH” with the actual path to your file.

[PHP]require(‘/YOUR-PATH/my_fb_followers.php’);[/PHP]

Save the file. If you refresh your site, you should be all set.

Update

The tricky part is getting YOUR-PATH right – it’s not a URL, it’s the server path to the file. Here’s one way to find it:

1. Download this file: phpinfo.php
2. Place it in the same folder as your my_fb_followers.php
3. Run it like: http://mydomain.com/phpinfo.php
4. On the results page, find a variable called “SCRIPT_FILENAME”
5. That should give you the path to the phpinfo.php, which is also the path to your my_fb_followers.php
6. Once you have everything working, I suggest you delete the phpinfo.php file.