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=”http://twitter.com/yourusername”><img src=”http://www.yoursite.com/images/twitter.png” 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 “http://twitter.com/yourusername”. 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.

You can also get more twitter buttons here: http://twitdesign.com/twitterbuttons/

Adriana Copaceanu blogs about building a successful online business at http://www.myonlinebusinessjourney.com. 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!