Social media buttons with html code for your website

Because social media becomes very important for sharing your website content you need social buttons so visitors can share your website on various of social networks like Facebook and Twitter.

We made as much as many possible buttons in grayscale and round form of 32x32 pixels.

Why grey? Because it has smaller files and it loads faster!
And on top of it you get them for free including the html code to put them in your html files.
There is no need for css because all coding is html only.

Example of all the round grey social buttons

Click some of the buttons to see what happens.

Social media buttons
Digg, Email, Facebook, Feeds, Google+, LinkedIn, Pinboard, Pinterest, Pocket, Reddit, StumbleUpon, Tumblr, Twitter and Wordpress.

Html code to have all the buttons in one row
Copy the html code to your html files:

HTML CODE:

<div align='center'><ul class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Farchivisiondirectory.blogspot.cm&t=" target="_blank"><img src="http://users.telenet.be/archivision/social/Facebook.png"></a>
<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Farchivisiondirectory.blogspot.cm&text=:%20http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Tweet"><img src="http://users.telenet.be/archivision/social/Twitter.png"></a>
<a href="https://plus.google.com/share?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Share on Google+"><img src="http://users.telenet.be/archivision/social/Google+.png"></a>
<a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Farchivisiondirectory.blogspot.com&t=&s=" target="_blank" title="Post to Tumblr"><img src="http://users.telenet.be/archivision/social/Tumblr.png"></a>
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&description=" target="_blank" title="Pin it"><img src="http://users.telenet.be/archivision/social/Pinterest.png"></a>
<a href="https://getpocket.com/save?url=http%3A%2F%2Farchivisiondirectory.blogspot.com&title=" target="_blank" title="Add to Pocket"><img src="http://users.telenet.be/archivision/social/Pocket.png"></a>
<a href="http://feeds.feedburner.com/ArchivisionDirectory-UsefulItemsNewsArticlesInformationYourWikiAlternative"><img src="http://users.telenet.be/archivision/social/Feed.png" /></a>
<a href="http://www.stumbleupon.com/stumbler/ArchiVisionDir/discoveries/"><img src="http://users.telenet.be/archivision/social/Stumbleupon.png" /></a>
<a href="http://www.reddit.com/submit?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&title=" target="_blank" title="Submit to Reddit"><img src="http://users.telenet.be/archivision/social/Reddit.png"></a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&title=&summary=&source=http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Share on LinkedIn"><img src="http://users.telenet.be/archivision/social/LinkedIn.png"></a>
<a href="http://wordpress.com/press-this.php?u=http%3A%2F%2Farchivisiondirectory.blogspot.cm&t=&s=" target="_blank" title="Publish on WordPress"><img src="http://users.telenet.be/archivision/social/Wordpress.png"></a>
<a href="https://pinboard.in/popup_login/?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&title=&description=" target="_blank" title="Save to Pinboard"><img src="http://users.telenet.be/archivision/social/Pinboard.png"></a>
<a href="http://www.digg.com/submit?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Digg it!"><img src="http://users.telenet.be/archivision/social/Digg.png"></a>
<a href="mailto:?subject=&body=:%20http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Email"><img src="http://users.telenet.be/archivision/social/Email.png"></a>
</ul></div>

Display

You can also delete a code line if you don't use a particular social media.

Buttons displayed in rows
If you want the social buttons displayed in 2 rows than you need to put <p></p> or </br> in the middle of the code lines. If you want to display the social buttons in more than 2 rows put some more <p></p> or </br> between the code lines.

HTML CODE:

<div align='center'><ul class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Farchivisiondirectory.blogspot.cm&t=" target="_blank"><img src="http://users.telenet.be/archivision/social/Facebook.png"></a>
<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Farchivisiondirectory.blogspot.cm&text=:%20http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Tweet"><img src="http://users.telenet.be/archivision/social/Twitter.png"></a>
<a href="https://plus.google.com/share?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Share on Google+"><img src="http://users.telenet.be/archivision/social/Google+.png"></a>
<a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Farchivisiondirectory.blogspot.com&t=&s=" target="_blank" title="Post to Tumblr"><img src="http://users.telenet.be/archivision/social/Tumblr.png"></a>
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&description=" target="_blank" title="Pin it"><img src="http://users.telenet.be/archivision/social/Pinterest.png"></a>
<a href="https://getpocket.com/save?url=http%3A%2F%2Farchivisiondirectory.blogspot.com&title=" target="_blank" title="Add to Pocket"><img src="http://users.telenet.be/archivision/social/Pocket.png"></a>
<a href="http://feeds.feedburner.com/ArchivisionDirectory-UsefulItemsNewsArticlesInformationYourWikiAlternative"><img src="http://users.telenet.be/archivision/social/Feed.png" /></a>
<p></p> OR </br>
<a href="http://www.stumbleupon.com/stumbler/ArchiVisionDir/discoveries/"><img src="http://users.telenet.be/archivision/social/Stumbleupon.png" /></a>
<a href="http://www.reddit.com/submit?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&title=" target="_blank" title="Submit to Reddit"><img src="http://users.telenet.be/archivision/social/Reddit.png"></a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&title=&summary=&source=http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Share on LinkedIn"><img src="http://users.telenet.be/archivision/social/LinkedIn.png"></a>
<a href="http://wordpress.com/press-this.php?u=http%3A%2F%2Farchivisiondirectory.blogspot.cm&t=&s=" target="_blank" title="Publish on WordPress"><img src="http://users.telenet.be/archivision/social/Wordpress.png"></a>
<a href="https://pinboard.in/popup_login/?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm&title=&description=" target="_blank" title="Save to Pinboard"><img src="http://users.telenet.be/archivision/social/Pinboard.png"></a>
<a href="http://www.digg.com/submit?url=http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Digg it!"><img src="http://users.telenet.be/archivision/social/Digg.png"></a>
<a href="mailto:?subject=&body=:%20http%3A%2F%2Farchivisiondirectory.blogspot.cm" target="_blank" title="Email"><img src="http://users.telenet.be/archivision/social/Email.png"></a>
</ul></div>

Display

Download the social buttons

Don't forget to rename "http://users.telenet.be/archivision/social/" to your directory where you put your image files. Especially if you want to manipulate the buttons.

Also change archivisiondirectory.blogspot.cm and archivisiondirectory.blogspot.com to one of your websites.