My Nerdy Mom: 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:

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!