Tutorials HTML and CSS Tutorials How to Create a Share Button for Your Site

How to Create a Share Button for Your Site

StacySummers Tutorials Dec 10, 2012

Learn Photoshop

Information is the most precious treasure nowadays. The one who has it is a rich guy! There is one unwritten rule: sharing is sexy! Especially when it comes about something mind blowing, useful and interesting :)

Want to be cool in the web world? - share something really stunning.

The internet is full of different share buttons, the main task is to choose the right ones. Sometimes you don't even understand what social buttons you need on your own blog. Sometimes you can't find buttons with design that fits your needs. Sometimes you can't find any simple and cool way to implement share buttons on your blog. Don't panic! Today I'll show you how to create some basic and elemental buttons.

Web Design Courses

In case you don't want to deal with huge, crowded code and complex detail customization, this tutorial is exactly for you. Even HTML newbies will find it easy to follow. So, fasten your seatbelts and let's start!

Subscribe to our newsletter and get a cool eBook "Begginers guide to HTML" for free. We'll send you only useful posts and freebies once in two weeks.

Step 1

The first thing you should do is open your HTML file and paste the code below

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>

<a href="
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return;">{sharing is sexy}</a>
<a href="
=URL" target="_blank" onclick="return">{sharing is sexy}</a>

Step 2

Now create a js file that contain such information:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = '';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
twitter: function(purl, ptitle) {
url = '';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
popup: function(url) {,'','toolbar=0,status=0,width=626, height=436');

That is all :) A very simple method to track the statistics of clicking on the share button that is placed directly on the sharing page. This problem was solved with the help of a table in the database and simple ajax:

popup: function(url,soc) {,'','toolbar=0,status=0,width=626, height=436');


This script gets an id from the URL, adds the label to the table and/ or increases the counter by one for a specific social network. It is a simple solution for share buttons. You can easily change the appearance of your buttons via CSS, you can design your own buttons in Photoshop and use them here. You can do almost everything!

Of course, this example is a little bit primitive, but it is a cool point to start creating your own cool share buttons. Give it a go!


Stacy Summers

Hello, I'm Stacy Summers. I want to show you amazing web things and hope you will love them just like me. If you have any questions, please contact me via email ([email protected]) or visit my Facebook page.

subscribe to newsletter
Get Our Free Ebook Beginners Guide to HTML