Posted on by herbhalstead

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.

90 Replies to “Add Facebook To Standard Theme’s Follow Count Widget”

    1. well, do me a favor – when you implement it, tell me if I miss anything – I went over the list 10 times or more, and I think it is complete, but I have this feeling that I am missing a step.

      Reply
  3. Pingback: Tweets that mention Add Facebook To Standard Theme's Follow Count Widget → -- Topsy.com

              1. Wait… LOL “for testing” I thought you were going to do something. No

                One thing I noticed towards the end of Part 1, is the “submit it” link, does that need to be submitted?

                Let me hit this again, I may have flunked a step.

                Reply

  9. Hey Herb! Great tutorial. I would love to use the three graphics you put on your follower count widget the “f” “bird” and “burner” image but I actually have been using the dark follower count image that was included with ST. Take a look (http://www.gbrenna.com/). Wondering if you could create one of those using the dark image too?

    The image is located in the standard theme folder under [images/followers_count_bg-dark.png]

    Reply
  10. Pingback: WordPressing | Graham Brenna

  11. Herb,

    Great tutorial. I second Michael earlier and thank you for sharing with this with the Standard community on behalf of 8BIT.

    I’m actually trying this out myself! I’ve got it working, so the that the widget is showing all counts, but my question is how does the relationship work between a Facebook Page and the ‘app’?

    Right now the widget displays the follower count for the ‘app’ (just 1, me), but how do I hook the app up to an existing page so that it pulls from that follower count?

    Reply

      1. Awesome. Thank you.

        I was messing with that value earlier, but it seems that the page’s I were testing with we’re public yet, and therefore weren’t working. I tested it with a well-known page and that worked perfectly!

        Reply

  12. Great tutorial. But I’m getting an error.

    “Parse error: syntax error, unexpected T_STRING, expecting ‘)’ in . . . /wp-content/facebook-fan-count.php on line 4”

    Any idea what I did wrong?

    Reply

      1. Hmm. I copied and pasted the code exactly as you had it. Here’s what I have (I’ve truncated the numbers):

        '1...8',
        'secret' => '6...0',
        'cookie' => true,
        ));
        $result = $facebook->api(array(
        'method' => 'fql.query',
        'query' => 'select fan_count from page where page_id = 5...1;'
        ));
        $fb_fans = $result[0]['fan_count']; 
         
        $sum = $sum + $fb_fans;
        ?>

        What am I missing?

        Reply

        2. Looks good to me… I even compared it to the one I use on this server. You might try typing it out by hand instead of copy pasting – maybe the browser is converting characters in this post???

          Make sure your require(”); call is properly punctuated in the followcount.php

          Reply

  14. Thanks for the tutorial. Mine works fine as long as I dont have the Facebook comments plugin activated and then if I activate it I get the error message (starting where the number should be) “Fatal error: Cannot redeclare class FacebookApiException in /~REDACTED~/facebook.php on line 91” and it will not load the rest of my page. I can only assume it has to do with something that both add ons are trying to access? Any thoughts?

    Reply

  17. Hi I am trying to get this to work but it seems that it is only counting my twitter and rss. Can you tell me exactly where on my server I need to put the php files…. Thanks

    Reply

  18. so i’ve done everything i was wondering if this is correct????

    $sum = $this->twitter_count($twitter_username,  $args[‘widget_id’], $clear_cache) +  $this->feed_count($feedburner_name, $args[‘widget_id’],  $clear_cache); require(‘/home/caffeio2/public_html/iamchefapple/my_fb_followers.php’);

    Reply

      1. Thanks. Figured that out, but can’t figure out actually placing the icon. Where does this code go? What does it replace?

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

        Reply

                  1. This is what I have in my custom.css:

                    .follower_count { background: url(“http://sightregained.com/geekrev-soc-cnt_dark.png”) no-repeat scroll left top transparent; }

                    .follower_count .count_label { display: none; }

                    Reply

  22. This has been great! I had the image working but the Facebook count wasn’t adding in to the total. I corrected that but then something went wrong and I can’t figure it out. This is the message I am getting under my image: simplexmlelement.–construct – entity: line.

    I reloaded my original files but cannot get it to correct. Any help is appreciated!

    Reply

      1. I just turned it back on. If you don’t mind taking a look, I appreciate it. I know Sundays are busy for pastors so I appreciate you getting back to me so quickly! Wasn’t expecting that! :)

        Reply

        1. if you look at the source code, and do a search to find that error, you’ll see some more info… basically it looks like you may have a TYPO on the followcount.php – check your added code REALLY close to make sure you haven’t left out an apostrophe

          Reply

          1. Herb: Thank you for your response. I tried to locate the error but could not. I also contacted 8bits support but they refer me back to you. Would you be willing to look at my followcount.php to see if you can locate the error? If so, send me your email and I’ll email it to you.

            Thanks for you help.

            Reply

  23. Herb,

    We have a network of twitter accounts (4) rather than just one. Any chance that you know how to have the exisiting Standard Theme widget show the sum of multiple twitter account followers counts in the total?

    Reply

    1. I know the way to make it happen – you need to edit the widget admin form to include multiple twitter accounts – then loop through them in the count code – I don’t have code to show you because it’s not a quick fix.

      Reply

      1. From my research into adding G+ support, I can;t find an API all that allows me to extract follower counts… no plans for mailchimp… hopefully someone else can figure that one out.

        Reply

  26. This looks awesome, but somewhere I’m doing something wrong. I got my path figured out, but when I put this after the $sum code:

    require(‘/home1/herrings/public_html/daveherringme/wp-content/themes/StandardTheme_261/my_fb_followers.php’);

    …the entire sidebar disappears and the icon is blank. I put the .php files in my standard theme folder. Is that correct? Can’t seem to get this to work.

    Reply

  28. So I am really new to this stuff and I thought I figured this whole thing out but I did not get it to work. I figured out my problem I believe. I think I figured out the hard stuff but not the simple part. So when you say to add the facebook.php file and the my_fb_followers.php files to the same place as your pages. Where is that exactly. I logged on with my ftp program then do I go to the standard them folder? Or is it before that? Not really sure.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *