Social media buttons met html code voor uw website

Omdat social media heel belangrijk is voor het delen van uw website-inhoud heb je sociale media buttons nodig, zodat bezoekers van uw website op diverse sociale netwerken zoals Facebook en Twitter kunnen delen.

We hebben zoveel mogelijk verschillende knoppen in grijstinten en ronde vorm van 32x32 pixels.

Waarom grijs? Het heeft kleinere bestanden en het laadt sneller op uw website!

En bovenop dit alles, ze zijn gratis inclusief de html code om ze in uw html-bestanden te zetten.

CSS code is niet nodig omdat alle codering in html gebeurt.
Voorbeeld van alle ronde grijze social media buttons

Klik op een aantal van de knoppen om te zien wat er gebeurt.
Social media buttons
Digg, Email, Facebook, Feeds, Google+, LinkedIn, Pinboard, Pinterest, Pocket, Reddit, StumbleUpon, Tumblr, Twitter en Wordpress.

Html code om alle buttons in één rij te tonen
Kopieër deze html code in uw 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

U kunt ook een regel code verwijderen als je een bepaalde sociale media niet wil gebruiken.

Buttons tonen in meerder lijnen
Als u de sociale knoppen wilt weergegeven in 2 rijen dan kun je <p></p> of </br> in het midden van de lijnen met code plaatsen. Als u wilt dat de sociale knoppen in meer dan 2 rijen wordt weergegeven dan zetten we meerdere <p></p> or </br> tussen de lijnen met code.

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 de social buttons

Vergeet niet "http://users.telenet.be/archivision/social/" te hernoemen naar uw website waar je de beeldbestanden hebt upgeload. Vooral als je de knoppen wilt manipuleren.

Veranderen ook archivisiondirectory.blogspot.cm en archivisiondirectory.blogspot.com naar een van uw websites.

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.