Create Your Own Custom Social Share Count Buttons

TAKE CONTROL OF YOUR BUTTONS

If you're tired of using the built-in styles of Facebook, Twitter, Google+, and StumbleUpon's like and share buttons, you're not alone. Here's how we implemented them here on Medialoot.com using PHP and jQuery. You may want to be familiar with HTML, CSS, and javascript to complete this tutorial.

Design Your buttons

When we first set out to create our own social buttons, we had a few improvements in mind. We were previously using the default buttons provided by each social media platform, but they were slow, and their style was both outdated and didn't match our site. We wanted prettier buttons, we wanted the buttons to be quicker and not slow down our site, and we wanted our users to have an easy time using them and sharing our items.

We started this process in Photoshop, and Tony created some really pretty buttons that were just too irresistible to not implement. This should be your first step too. Create buttons that match your site. We recommend mocking them up in design software first.

Slice your buttons into HTML & CSS

Once you have the design for how you’d like your buttons to look, it’s time to slice them into HTML/CSS and place them on your site. Here’s what our HTML looks like:

<a class="post-share facebook" href="http://www.facebook.com/plugins/like.php?href=http://medialoot.com/blog/&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=#################" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=100,width=200');return false;">Facebook<span></span></a>
<a class="post-share twitter" href="https://twitter.com/share?url=http://medialoot.com/blog/&text=Text for Twitter Here&via=medialoot" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Twitter<span></span></a>
<a class="post-share gplus" href="https://plus.google.com/share?url=http://medialoot.com/blog/" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Google Plus<span></span></a>
<a class="post-share stumble" href="http://www.stumbleupon.com/submit?url=http://medialoot.com/blog/" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=800');return false;">Stumbleupon<span></span></a>
                            

And here’s our CSS for these buttons. We used a small sprite for the social icons on our buttons, which you can download in the tutorial zip file found here. Upload this image somewhere relative to your .css file and adjust the url in the CSS below to map to that image. Be sure to place this CSS in a .css file that is being called on all of the pages you'd like to have these buttons displayed.

a.post-share {
    display: block;
    width: 94px;
    height: 46px;
    float: left;
    margin: 10px 0px 0px 0px;
    background: #3e599a url(sidebar-share.png) no-repeat 0 0;
    text-decoration:none;
    width: 197px;
    text-indent: 50px;
    font: 15px/46px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #ffffff;
}
a.post-share:hover {
    opacity: 0.8;
    text-decoration: none;
    cursor: pointer;
}
a.post-share span {
    width: 20px;
    height: 16px;
    padding: 15px;
    display: block;
    float:right;
    background-color: #4665af;
    color: #ffffff;
    vertical-align: middle;
    font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    text-indent: 0;
}
a.post-share.facebook {
    background: #3e599a url(sidebar-share.png) no-repeat 0 1px;
    margin-right: 10px;
}
a.post-share.facebook span {
    background-color: #4665af;
}
a.post-share.twitter {
    background: #4b8cbe url(sidebar-share.png) no-repeat -0px -111px;
    margin-right: 10px;
}
a.post-share.twitter span {
    background-color: #529fda;
}
a.post-share.gplus {
    background: #b8382e url(sidebar-share.png) no-repeat -0px -50px;
    margin-right: 10px;
}
a.post-share.gplus span {
    background-color: #d24238;
}
a.post-share.stumble {
    background: #e15131 url(sidebar-share.png) no-repeat -0px -165px;
}
a.post-share.stumble span {
    background-color: #fd5d3b;
}
                            

Create Your PHP File

Next step is to create a PHP file where you will store some functions to grab social counts from the different social media APIs. I chose to grab these counts via PHP because when I created the scripts, StumbleUpon wasn't able to properly reply to my JSON request, and this was the workaround. This script will be loaded asynchronously via javascript, so we don't have to worry too much about load times.

Feel free to just grab the PHP file, it's in the tutorial zip file found here and upload it somewhere on your own hosting platform. If you do so, you'll want to make 2 changes. Change line 46 to be your own domain instead of http://medialoot.com, and Change the number "20" on line 44 to be the number of characters for your domain. For example "http://medialoot.com" is 20 characters, which is why the number 20 is there.

A quick description of what this PHP script does… The first four functions are the meat of the script, and each one corresponds to a different social media API to grab the social count. Each function takes the same $url parameter - we fill this in when we call this script via javascript in the next step. To prevent everyone on the internet using this script, we added a check to make sure that the javascript file that calls this script is on our own domain. Finally, we output the collected data as JSON so that our javascript function will later be able to understand our information and output it.

You want more than just these 4 social media sites?

You can definitely expand this to include other sites. Most of them follow the same exact system. You'll just create a new function for the new social site, and be sure to also include the new social site data when the data is output (see lines 48-51 in the PHP file as an example). You'll also need to output that data in the javascript function, but I'll explain that in the next section.

Create your Javascript function

Now we need to add a javascript function to our main .js file or one that's called on every page we want these social count buttons to show. It's going to look something like the one below. Note that we use jQuery, so I chose to call the PHP file via the .ajax function that jQuery nicely makes available. If you're not using jQuery, you'll have to adjust based on what your site uses.

function get_social_counts() {
    var thisUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
    $.ajax({
        type: "GET",
        url: 'https://s3.medialoot.com/images/get_social_counts.php?thisurl='+thisUrl,
        dataType: "json",
        success: function (data){
            $('a.post-share.twitter span').html(data.twitter);
            $('a.post-share.facebook span').html(data.facebook);
            $('a.post-share.gplus span').html(data.gplus);
            $('a.post-share.stumble span').html(data.stumble);
        }
    });
}
                            

You MUST make one change in this script and that's the url: ''. You'll want to change that 'https://s3.medialoot.com/images/get_social_counts.php' to be the location of the .php file you uploaded to your server.

Another note, this function automatically uses the url of the page you're currently on to find the social share count. If you're testing this on a page to see if it works, you may want to replace the var thisUrl with the url of a page that you know has some social shares with your social media sites.

Lastly, make sure to call this function in your $(document).ready function! It's best to use a $(document).ready function that's already loading on your page, so it may look something like this below. If you aren't already calling $(document).ready, then go ahead and add it to either the page inline or at the top of your main .js file.

    $(document).ready(function(){
        get_social_counts();
        //maybe_some_other_functions_too();
    });
                            

You want more than just these 4 social media sites?

If you've already added an additional PHP function in your .php file and made sure to add the data to the json output, then yes, you can add more than the 4 included. To do so, add another line for your data where the succes: function(data){} is. So under the stumble line, you'll want to add something like $('a.post-share.othersite span').html(data.othersite);

Enable Page Share Buttons

At this point, your social share counts should be working and your buttons should be look pretty snazzy. The last thing we want to do is make sure that those buttons easily allow visitors to share your page, and it's pretty easy to do so.

If you've copied and pasted the html, then all you really need to do is adjust the url for each of the four social sites. You'll want to make sure that http://medialoot.com/blog/ is replaced with the url of the page you're on. If this is a static page, you'll have to update this for every page you add the buttons to. However, you're probably using some sort of CMS (Content Management System) or blog platform, and you most likely have some sort of variable you can use here to replace what's displayed. It may look something like {site_url}blog/{url_title}/ like ours, or something else if you're using WordPress etc. Unfortunately there are a bit too many CMS out there to give you the exact variable you need, but check your CMS' knowledge or support site if you're unsure what yours would be.

For Facebook and Twitter, you need to do make a couple of other adjustments. For Facebook, you need an application ID. You can do that by going here, and adding a new app. Once you have an ID, replace all of those ###### in the Facebook a href="" with your own ID. For Twitter, be sure to replace "Text for Twitter Here" and the via=medialoot to your own twitter handler. You may want that "Text for Twitter Here" to be your page title, and you'll want to use variables like you did for the URL to make sure that's dynamic if you're using a CMS.

Test and Admire

That's it! If you changed your javascript function to have a test url, you'll want to change that back to the more dynamic version as shown in my example above. You can also adjust how big you want those windows to pop up with different GET variables in the share urls.

If you've followed this tutorial, let us know how it went! We'd also love to see your examples or if you have any thoughts on how to improve :)