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:
- Register a Facebook application
- Place a Facebook SDK file on your server.
- Create a custom PHP file to grab the follower count.
- 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
- Log-in to Facebook
- Go to this page
- Give your app a name, agree to the terms of service, and press the “Create App” button! (see a pic of this screen)
- You may get a CAPTCHA page. Fill it out and submit. (see a pic of this screen)
- Enter details if you want – I just hit the “Save Changes” button without changing anything. (see a pic of this screen)
- 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.
- Open your favorite text editor and start a new file.
- Save it as something like, my_fb_followers.php
- 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] - Replace the “ENTER-YOUR-APP-ID” text with the App-id from your Facebook app details page.
- Replace the “ENTER-YOUR-APP-SECRET” text with the App-secret from your Facebook app details page.
- 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.
- Save it.
- Upload it to your server, to the same place you put the facebook.php file.
- 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:
- Download this file: phpinfo.php
- Place it in the same folder as your my_fb_followers.php
- Run it like: http://mydomain.com/phpinfo.php
- On the results page, find a variable called “SCRIPT_FILENAME”
- That should give you the path to the phpinfo.php, which is also the path to your my_fb_followers.php
- Once you have everything working, I suggest you delete the phpinfo.php file.
This is really cool.
I had to rescue your post from the spam box, Michael – sorry :-D
lol. That happens. I’m gonna try to do this over lunch if I have time.
I don’t see it yet :-D
Love it man – great tutorial. I will make sure to add this to my defaults for clients from now on!
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.
Don’t forget to update the people on the forum who are interested in this. ;)
Nice work, though! Thanks for sharing with the community!
good point – doing it now – thx
This is sick! Now I’m jealous!
Aww, Tony – don’t be jealous man – just click here and get StandardTheme.
Thanks so much for this. Can’t wait to get some time to implement it!
my privilege!
Arrg. I’m almost there, but the 2 files I’ve uploaded I can’t seem to get to work after editing the followcount.php file.
the tricky part is getting the path right – it’s not a URL, its the server path to the file…
you download this file: phpinfo.php
place it in your main folder and run it like:
http://mydomain.com/phpinfo.php
on the results page, find a variable called “SCRIPT_FILENAME”
that should give you the path to the phpinfo.php, which is also the path to your my_fb_followers.php
Do you need a minimum amount of followers for either the App or the Followcount?
I don’t think so…
for testing, add this in your my_fb_followers.php file right above the last “?>”
echo (“<h2>FB:$fb_fans</h2>”);
Done.
so you got it working?
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.
did you add the code i wanted you to test? it doesn’t appear so.
All done. Your tutorial was very helpful – you made it so easy! Thanks for adding the update re: finding your path, as that saved me a lot of time scratching my head. :-)
looks great, Nathan! Glad you found it useful.
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]
Here ya go: http://dl.dropbox.com/u/1854247/geekrev-soc-cnt_dark.png
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?
the PAGE-ID value in the my_fb_followers.php is the connection between the app and your fan page
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!
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?
you are missing a closing “)”
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?
Oops. That didn’t work. Try this: http://screencast.com/t/eEY4W7kH
here’s a link to my file, but with the variables genericized…
http://dl.dropbox.com/u/1854247/my_fb_followers.php
Very strange. I used your file, and it’s working now. Thanks for the help!
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
Really appreciate this. Created an alternative background image, which is available for download at http://www.mannmithund.ch/images/geekrev-soc-cnt.png
Looks good!
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?
try using the same app data for both the follower count and the comments.
What if I don’t have a “like” page and just a regular FB page, will this still work?
This doesn’t work with a normal friend count.
Is it possible to adjust the code to accomodate a profile instead of a fanpage?
I don’t think that is possible.
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
I’d put them in the root web-viewable folder.
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’);
looks like it – assuming you got the path correct, and that your facebook.php is in the same place
Great guide… a few bumps a long the way but worked like a charm. Thanks!
yeah, it’s just complicated enough to be challenging to one’s patience
Great Tutorial! Thanks
glad to be of help
What does the following error mean?
require(/SITEURL/my_fb_followers.php) [function.require]: failed to open stream:
It usually means you have the path wrong
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; }
you have to add the Standard Theme follower count widget to your sidebar
I did, but the original image still shows up. I’m not sure where to add the code with the link to the bar. The stylesheet? One of the other php files?
If you are referring to “Part 4” in the instructions above, that goes in your custom.css file.
Unfortunately, even after inserting into the custom.css file, the background for the follower widget doesn’t want to change. I can get the text color of the count to change but not the background. Below is the link to the background I’ve uploaded to demonstrate the URL I have inputted is working. Your further help is very much appreciated.
http://sightregained.com/geekrev-soc-cnt_dark.png
please post your exact css code
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; }
well that looks right – you might have a caching issue in your word press install – try clearing your caches
also you have a space before your closing quote on the image URL
I actually figured it out. It was a stray piece of code. :)
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!
hmm… I’ve never seen that error… I looked at your site but I guess you turned it off, so I can’t see what’s going on.
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! :)
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
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.
FInal Update: Herb saved the day and was so great about it!
And when Herb says the tricky part is to get ‘YOUR-PATH’ correct, well, he really means it. (sigh) :)
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?
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.
Awesome, awesome, awesome. Updating it now…
Oh…and how about Google+? Ha!
I’ve been considering it… no time to look at it right now though.
Ah, that means I’ll have to edit my graphic again!!! lol
Ah snap! You have to use Facebook as a page for this, don’t you?
Yep
I would love to be able to add in my Google+ numbers! What about MailChimp too?
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.
Somehow, http://socialstatistics.com/ is doing it, and they’ve been doing it for a while…?
yup – my guess is they are using undocumented API calls or some kind of scraping.
Thank for the tips! You got me started down the road to successfully add my MailChimp count as well.
That’s awesome! Wanna do a guest post to share the secret with the rest of us?
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.
not sure how to help – try using the downloadable code links I supplied instead of copy/pasting the code snippets from this page…
Oh my goodness it works! (and it was easy)
Cheers matie :)
awesome! glad it worked!
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.
no it should go in you first folder that the public can see…. usually named “www” or “htdocs” or something like that.