Loading...

Blog

How to Create a Custom Facebook Share Button with a Custom Counter

To add on to How to Create a Custom Facebook Share Button for your iFrame Tab, we at Daddy Design have figured out how to add a fully customizable counter to go along with it! Let’s get started:

The Code

Step 1: PHP

<?php
function fb_count() {
global $fbcount;
$facebook = file_get_contents('http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.daddydesign.com/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/');
$fbbegin = '<share_count>'; $fbend = '</share_count>';
$fbpage = $facebook;
$fbparts = explode($fbbegin,$fbpage);
$fbpage = $fbparts[1];
$fbparts = explode($fbend,$fbpage);
$fbcount = $fbparts[0];
if($fbcount == '') { $fbcount = '0'; }
}		
?>

First, you will want to grab this code and save it as its own PHP file on your server. Name this file social.php. After saving this file, change the URL in $facebook = file_get_contents(‘http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.daddydesign.com/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/‘); to the URL you wish to ‘Share’.

<?php
require("social.php");
fb_count();
?>

After you have your social.php file set up, you will then want to migrate to the web page in which your custom Facebook share button with a custom counter will be placed. With the code above, place it under the <html> tag of your page. Make sure that require{“social.php”) is linked appropriately.

<?php
$title=urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url=urlencode("http://www.daddydesign.com/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary=urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image=urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>

Remember this? If not, you can read about it here. This is the backend to your custom Facebook ‘Share’ button. Plug in the necessary information to display in the Facebook ‘Share’ window.

Step 2: XHTML

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)"> 
Insert text or an image here. 
</a>

This is the all-important link that will lead to the pop up Facebook ‘Share’ window. Once again, if you are unfamiliar with its function, please check the original tutorial.

<div id="fbcount">
<?php	echo $fbcount; ?>
</div>

Last but not least, this is the code for the Facebook ‘Share’ counter to show. The $fbcount will be fed from the social.php file, so be sure to have the above code. And with the code being inside the #fbcount div, you have unlimited options on how to make your Facebook ‘Share’ counter look awesome with CSS.

Completed Code

<!DOCTYPE html>
<html lang="en-us">
<?php
require("social.php");
fb_count();
twit_count();
?>
<head>
<meta charset="utf-8">
<title>Daddy Design - Custom Facebook Share Button With Custom Counter - Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<base target='_blank' />
</head>
<body>
<div id="container">
<?php
$title=urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url=urlencode("http://www.daddydesign.com/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary=urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image=urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>
<a onclick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=620,height=280');" href="javascript: void(0)"> 
Insert text or an image here. 
</a>
<div id="fbcount">
<?php	echo $fbcount; ?>
</div>
</div>
</body>
</html>

Live Demos

Example 1

Example 2

Example 3

Do you like our examples? Download all of the codes here.

Please Note

Your web page must be a PHP file in order for this to work.

Be sure to read our article on how to create a custom Facebook share button before starting this tutorial to have full knowledge on how to create and customize your very own Facebook ‘Share’ button.

The counter will only read the full number of Facebook ‘Shares’. The number will not be shortened to (for example:) “10K”. Be sure to keep this in mind while designing your own custom Facebook ‘Share’ button with a custom counter. We are working on a way to shorten larger numbers.

In order to see the Facebook ‘share’ you have just posted on the counter, the page must be refreshed after submitting. We are working on a code that will automatically refresh the page after submitting your Facebook ‘share’.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. If you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial. Only comments will be responded to.

Leave a Comment

46 comments
Divyesh
Divyesh

where to find social.php file in counter code.

xsavitch
xsavitch

good job, thank you so much :)

George
George

Great! I was looking for something like this from weeks. But how do you implement this for Wordpress?

Pradeep Maurya
Pradeep Maurya

Hello Great tutorial. but i want to open a new popup window after share , is it possible?.

Mike
Mike

Great tutorial, can you make this for a like button ?

Nathan
Nathan

This is awesome, I hope I manage to do it with my very small knowledge of coding, will this: A: work in Joomla B: will I be able to see all the people who have shared this link? I want to be able to encourage people to share a post on my facebook page (it's a competition) obviously I want to pick a winner at random so I will need to be able to see the people who have shared it!

Adrian
Adrian

The image no longer shows up in the facebook post.

Tom
Tom

Great and easy tutorial, thank you! Is there any way to get the popup window to be displayed in the middle of the screen instead of upper-left corner?

MPO
MPO

How do I create this for a HTML webpage?

andrew
andrew

Hi, Very cool tutorial. I really appreciate it. I was just wondering, though, if it's possible to dynamically update the counter after each share, rather than on each page load. Thanks again!

Carlos Aguilar
Carlos Aguilar

The build in sharing buttons from the Jetpack WordPress Plugin are pretty sweet, I've been looking for some that I can personalize even further, do you also have some custom codes for the other social networks?

Ravinder
Ravinder

Very Nice. Sir.. Is there any same fb like iframe code.. same as your share.. If yes.. Please tell me.. Thanks

Rozani
Rozani

Thanks a lot. how about twitter and google plus? Hope you can do tutorial for these buttons too. Thanks.

Alex
Alex

Is it possible to also modify the Facebook "Send" button?

Shaimoom Newaz
Shaimoom Newaz

Thanks for this. How would implement this on a WordPress site?

paul
paul

I was curious, I have the HTML code for the like button but it has the Sign in long verbage after the LIKE button. What I would really like to see is how do you do the LIKE button with the counter going next to it? This is the basic HTML code that i have with the long verbage: My Great Web page

Delroy Brown
Delroy Brown

what id the twit_count(); function for? you don't mention it at all

Sachin Khanna
Sachin Khanna

I m using this code....it's working fine... but only problem is count is not stared from 0, it is started from 345.... how can i make it to start from 0... Plz help me..... n Thanks for lovely article...

mauro
mauro

g00d work...thanks

Rasmus Olesen
Rasmus Olesen

I am having trouble getting an image on my share box. I specify it, but nothing happens. Do i need to specify it in open graph instead?

Shailesh
Shailesh

Really good post .But How can we close window after share the link ?

Neil
Neil

Hello! Great tutorial, thanks! It all seems to work, except the popout "share" window displays the php commands (e.g. displays title as "" and summary as "") instead of the information defined earlier. Any thoughts on why this would not be echoing properly? Thanks again!

Michael
Michael

Anyone got this to work in a Concrete5 site? I cant get it to work :(

site stats
site stats

I created my own facebook share button but I havn't think about counting how many people actually click the button.. Thank you so much for the share! greate article. ;)

John
John

can you tell me how to make these lines with numbers ?

jasmijn
jasmijn

Hi there, I used the code in a facebook fanpage to share a great campaign to win something. But now we like to see who shared it so we can give away our prices. I know that facebook doesn't show everything because of privacy issues but hope that there still is a way to see it. Thanks in advance! Jasmijn

daddydesign
daddydesign

We think FB fixed this issue, please let us know if the image still isn’t showing up.

daddydesign
daddydesign

Should work the same way, have you tried it?

daddydesign
daddydesign

I am sure there is a way but we just don't know.. Hopefully someone can show us all how to.

daddydesign
daddydesign

Not now, but we are working on some and I will keep you updated

daddydesign
daddydesign

It's nothing important, that was for another code for twitter count button. We never created the tutorial for it. Sorry about that, we will take it out this week.

daddydesign
daddydesign

1. You need to make sure to change the URL to your own page URL and not the one inserted form the tutorial. 2. If your button shows 345, it's because your URL has been liked or shared in Facebook 345 times before adding this button and you can not change that.

Neil
Neil

Solved my problem.. should have read through the tutorial more carefully. I didn't realize the whole html should be saved as a .php file. Thanks! Works great.

admin
admin

should work in blogger as well..

daddydesign
daddydesign

It's a wordpress plugin called "SyntaxHighlighter".

Divyesh
Divyesh

ok but while sharing to fb in popup box there is image but originally in fb image not see, what u say I have to use open graph in head or any solution. thnx.

Ski
Ski

the image still isn't showing up for me? When i use your link it works, when I use my own nothing shows up.

James M.
James M.

Probably takes a little Ajax to do that. But it would definitely make it look more awesome.

Steve
Steve

Its funny. I have the same problem. I put your p[images][0] file on my server with the name thumbnail3.jpg and tested it. It works. Then i created my own file with the same dimension & dpi and it doesnt works. And now comes the best: I took your pictures and saved it again with my Photoshop CS5 under thumbnail4.jpg (same server, same image, same dimension, same dpi, only file open and save) and baaam -> the image doesn't work anymore. I have no idea what the heck the problem is. Does it anything have to do with the file itself. And a couple of months it works fine and now is your image the only one which works. Maybe other question: What for an image program do you use? I would be really glad for your help.

daddydesign
daddydesign

Did you use our exact code? It should work..