30 Awesome Social Bookmarking Buttons

Pin It

I absolutely adore social networking buttons!  I usually have them strategically placed throughout my pages.  When used correctly, they can provide a whole new selection of readers, or keep bringing back ones that you have had. I find the best places to put them are top left or right, eye level with the top of your post, and at the beginning and end of your posts.  (Me saying this doesn't mean that you have to put them in all those locations, but those seem to be the most natural placements)


1.) Burnt Wood Social Media Icon Set

2.) Grass Texture Social Icon Set by Social Icon Studio

3.) Clear Bubble Icons by Web Treats etc

4.) Handycons 2 by Janko at Warp Speed

5.) Simple Glowing Neon Social Icon Pack by Social Icon Studio

6.)

7.) Vintage Polaroid Style Social Icons by Social Icon Studio

8.) Glowing Neon Social Networking Icons by WebTreats

9.) Glossy Black Comment Bubble Social Networking Icons by WebTreats

10.) Elegancy Speaks!  by Cheth Studios

 11.)  3D Glossy Black Button Social Networking Icons by WebTreats

 12.) Faded Round Stamps Social Icon Pack by Social Icon Studio

13:) Social Icons by plechi

14.) Social Icons by Tydlinka

15.) Glossy Space Icons by Web Treats Etc

16.) Free Clock Social Icons

17.)  Hand Drawn Social Media Shapes by Web Treats Etc

18.) Hand Drawn Social Media

20.) Social Buzz Icon Pack

21.) Social Media Icon Badges by Peach Pops

22.)  Retro Icon Set by Pink Mustache

23.) Social Media Icons Pack by Font Fabric

24.)  Upojenie Icons

25.) Picasso Social Media Icon

26.) Latte Art Social Icons by Cute Little Factory

27.)  Bulb Social Media Icons

28.) Social Media Ballons

29.) Yammy Social Media Icon Kit

30.) Green Thumb Social Media Icon Set

Want to learn how to install these buttons?  Visit How to Install Social Networking Icons on your Blog.

Don't want to take the time to figure out install?  Want something ready and premade that you just have to stick a link into? Check out NiftyButtons, where they have a link generator built into the site.  Want a tutorial on how to use that?  Check out my Nifty Buttons Tutorial for Blogger!

Nifty Buttons Tutorial for Blogger {Tutorial}

Pin It

So today I want to talk about this awesome site called Nifty Buttons.  It's a site that is made for Bloggers who want cool and unique social networking buttons, but do not have the know-how or desire to create or find their own.  With this site, you can pick a set of buttons, insert your code into the form fields and it will automatically generate the code you need to paste on your blog!

Step 1:
Go to Niftybuttons

Step 2:
Choose your Social Networking Buttons

Step 3:
Insert your Links
*Note: You do not have to fill in all the links, just the ones you fill in will be generated.

Step 4:
Submit and Copy the code provided.

Step 5:
Go to Blogger Layout and click Add Gadget in the section where you want to add your buttons.

Step 6:
Select HTML/Javascript Gadget

Step 7:  Paste the code that you recieved into your HTML/JavaScript Widget and hit save.  You can move this widget where you want your icons to appear. 

Enjoy!

Making your own Social Bookmarking Buttons {Code and Tutorial}

Pin It

Making your own unique Social Bookmarking buttons is easy.  All you need are some images, your links and one little block of code to repeat over and over again.

Start by finding some Bookmarking images that you like.  These can either be designed by you or you can find them on the web.  Check out these buttons!  Once you have the buttons that you like, upload them somewhere that you can access them from.  I use photobucket for this purpose.

Next take a look at this code, which is for a simple facebook button like this:

<a href="https://www.facebook.com/pages/My-Nerdy-Mom/386904641334831" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://i18.photobucket.com/albums/b144/junelley/facebookbutton2.png" /></a>

All you have to do is take the text above and replace the blue text with your Facebook Page URL, and replace the red text with the URL for your image.  

So great.... Now we've got one button, lets do some more.  All you have to do now is make the same piece of code for each different networking site that you want to link to.  So to make a link to follow your rss feed, for example... you're going to replace that same blue code with the link to your feedburner feed (or whereever else you burn your feed)  and you'll replace the code in red with the link to your RSS feed button.  Here's how mine looks:

<a href="http://feeds.feedburner.com/MyNerdyMom" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://i18.photobucket.com/albums/b144/junelley/feedburnerbutton2.png" /></a>

I make mine in a notepad document before I install it into my blog, this makes it easier to keep track of which one that you are working on.

Soon, you'll have a bunch of snippets of code.  Here's what to do to install them on your blog.

Place them one right after another, like this:

<a href="https://www.facebook.com/pages/My-Nerdy-Mom/386904641334831" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://i18.photobucket.com/albums/b144/junelley/facebookbutton2.png" /></a>

 <a href="http://feeds.feedburner.com/MyNerdyMom" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://i18.photobucket.com/albums/b144/junelley/feedburnerbutton2.png" /></a>

<a href="http://technorati.com/blogs/mynerdymom.blogspot.com" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://i18.photobucket.com/albums/b144/junelley/technoratibutton2.png" /></a>

Which will then appear all neatly in a row, like this!




Have fun installing your own custom buttons to match your blog!!! :)