Skip to Content

Blogging Basics: Follow Me Buttons on Sidebar

Sharing is caring!

Please welcome Adriana to 3 Boys and a Dog.  I put out a plea for someone that could tell us how to get the “follow me” buttons in our sidebar.  I let them know it had to be in “dummy language” and be written for Blogger and Word Press.  Adriana responded and did an EXCELLENT job of writing the tutorial.  So, Crystal, here is your answer. 🙂  ~Kelli

Social networks are hot right now, and linking your social network profile to your blog is even hotter. The trouble is, getting that cute little Twitter bird in your sidebar and making it clickable (and pointing in the right direction) can seem pretty daunting – especially if you’ve never done it before.

Don’t worry! It’s not complicated. You don’t even need to hire a web designer. Just follow these simple steps:

First, find the buttons you want to use. The web is teeming with free Twitter, Facebook, and LinkedIn buttons. Simply go to your favorite search engine and type in “free social networking icons” and you’ll find thousands.

Next, download the icons you want to use to your site, then upload them to your server or file hosting site. If you’re using Word Press you can do this from your dashboard by clicking “Media” then “Add New.” Click on “select files” and browse your computer files to find the correct one. Double-click it to upload it to your host.

If you’re on Blogger you will need to store the image on a photo sharing site like Picasa or Flickr. For either platform, make sure you write down the full file path for the image.

Now, place a text widget (Blogger calls them gadgets) in the sidebar where you want your icon to appear.

From the Word Press dashboard, click “Appearance”, then “Widgets”, and choose a Text widget from the “Available Widgets” section. Click and drag it to the sidebar you like on the right side of the page.

From the Blogger dashboard, go to the layout tab and click on “Page Elements.” You’ll see a graphical representation of your layout. At the top of the sidebar area, click “Add a Gadget.” Scroll until you find the one called “Text” and click on it.

Now you need to construct the HTML that will display the button and make it clickable. It’s going to look like this when you’re done:

<a href=””><img src=”” alt=”” /></a>

And here’s what that all means.

The first part,<span style=”color: #ff0000;”> “&lt;a href=”</span> tells the browser to expect a link, which of course is “”. That’s where you want people to go when they click on the button. Make sure you put the <span style=”color: #ff0000;”> “&gt;”</span> in there, so the browser knows where the link ends.

The second part, <span style=”color: #ff0000;”>”&lt;img src=”</span> tells the browser where to find the image. That’s the location of the  file you uploaded earlier. Again, make sure you use the <span style=”color: #ff0000;”>”&gt;”</span> to tell the browser you’re done giving it the file location.

The last part, <span style=”color: #ff0000;”> “&lt;/a&gt;” </span> tells the browser you’ve ended the link. Without that, all kinds of weird things will happen, so don’t forget it.

On either blogging platform you should now have an empty text widget. On Blogger the widget will be in a pop-up, and on Word Press it opens in the sidebar location. (If you don’t see it, click the little down arrow next to where it says “Text”. If your Blogger box went missing, click “Edit” on the appropriate Gadget.) Type a title for your new text widget in the first box – something like “Follow Me!” works great.

In the text area, copy and paste your code from above. Click “Save” and you’re done!

That’s it. Just plug in your Twitter page (or Facebook profile, or any other site you want to link to) and the link to the image you chose, and you’re done. Piece of cake!

One word of caution, though. Please resist the urge to skip step two and link directly to the button designer’s page. You’ll lose your link if their site disappears, and more importantly, it’s considered rude. So host the image on your own server.

I’ve already done some of the work for you. The Twitter images you see  here are in the public domain, which means you are free to use them.  Just right-click and choose “save as” to download to your computer.

TwitterBadge Twitter_Bar_1

You can also get more twitter buttons here:

Adriana Copaceanu blogs about building a successful online business at Be sure to check out her site for even more great tips about blogging and to learn how to write a marketing plan. And you can follow her on twitter @adrianacopacean

Sharing is caring!

Betsy Henry

Saturday 3rd of April 2010

Hi I'm here from SITs. Thanks for the info. I was wondering how to put the "share on facebook, stumble and technorati" etc. info on the you know?

You can reply to or my email. Thanks! Betsy


Saturday 3rd of April 2010

@Betsy Henry, See 14 and 15 for sharing on social media and following button tutorials :-)

BTW, thanks for stopping by!

Crystal & Co

Wednesday 24th of February 2010

Ladies, this is awesome!!!

Adriana- where would I find a free HTML code for changing my commenting format to an easy one like what is used here in 3 Boys and a Dog. I have that people have to log in to leave a comment- it keeps readers from leaving comments.

I have googled and come up with nothing. .-= Crystal & Co´s last blog ..Once Upon a Time You Trusted Yourself =-.


Wednesday 24th of February 2010

@Crystal & Co, Crystal, actually you just need to go into your dashboard and update the comment settings.

From dashboard, click settings.

then click "commenting"

change your settings to: Who can comment: Anyone - includes Anonymous Users

Comment Form Placement: Embedded below post

That should do it for you. :-)

Ashley P

Wednesday 24th of February 2010

Hi, I'm a new follower, I found you through blogger link up. Would love if you could follow my blog as well .-= Ashley P´s last blog ..FREE First Aid Kit -probably OH only =-.

Jimena Pinto-kroujiline

Tuesday 30th of March 2010

I am a children's illustrationist and I want to show you some of my work. Become a fan of "What is Amelia up to?" Enjoy great bedtime stories, songs and activities for kids!

Best Wishes, Jimena Pinto-Kroujiline