A Simple Guide to Creating Social Media Sharing Button in HTML

The first things is a create a button using an image (here you can download some amazing button) under an example of clickable button with using HTML code

<a href=”#”><img src=”social.png”></a>

A Visual Example of clickable button

Now the last thing to do a to use the API of every single social to create the share event, in the button create previously you have to add in href section the below URL for Every Single Social
where you will see <SITE> is your URL to share, <TITLE> is the title to insert into the share(where is allow), <TAG> Used to TAG your Page

Facebook http://www.facebook.com/sharer.php?u=<SITE>
Twitter http://twitter.com/share?url=<SITE>&text=<TITLE>@<TAG>
Google+ https://plus.google.com/share?url=<SITE>
Tumblr http://www.tumblr.com/share/link?url=<SITE>&name=<TITLE>
Pinterest javascript:void((function()%7Bvar%20e=document.createElement(‘script’);e.setAttribute(‘type’,’text/javascript’);e.setAttribute(‘charset’,’UTF-8′);e.setAttribute(‘src’,’http://assets.pinterest.com/js/pinmarklet.js?r=’+Math.random()*99999999);document.body.appendChild(e)%7D)());
Linekdin http://www.linkedin.com/shareArticle?mini=true&url=<SITE>
Buffer https://bufferapp.com/add?url=<SITE>&text=%20<TITLE>
Digg http://www.digg.com/submit?url=<SITE>
Reddit http://reddit.com/submit?url=<SITE>&title=<TITLE>
Flattr https://flattr.com/submit/auto?\user_id=&url=<SITE>
StumbleUpon http://www.stumbleupon.com/submit?url=<SITE>&title=<TITLE>

Example of HTML code with Google+

<a href=”https://plus.google.com/share?url=http://www.manazag.com”><img src=”/images/google.png”></a>

Here a clickable button

now finally you have a new one cool share button for the most popular social in the world

AN ADVISE: if you use this button into an email(for example into a newsletter) some email provider can report it as spam or phishing mail, to get around this problem i ussually shorten the URL above with site like


Giuseppe Zagaria