How to Combine Subscribe and Twitter Into One Gadget

There are many free icons you can use to invite readers to subscribe to your posts. You also want to show off your Feedburner and Twitter counters. And let’s not forget those fetching ‘follow me on Twitter’ images! If you add each one as a separate gadget, you can clutter your sidebar. So why not create a table to hold everything in one place? Don’t run away just because I mentioned tables — this post gives you everything you need to install a Subscribe/Twitter gadget. I’ve even provided the fancy icons in one of my Photobucket albums, at no charge.


Here’s what the gadget looks like. The layout is similar to the one on BloggingWithSuccess, where I also write. For this tutorial I use my custom purple RSS and a free Twitter icon. For my e-Mail icon I added purple to the gmail symbol. An optional gray bar separates the table from any text that you want in the same gadget.

My Subscribe Boxes

Step: Preparation.

  1. Find your Feedburner account name which you’ll use to replace mine shown in red, WebNewsAndTipsFromBoldenProductions in sections B & D.

    If you’re on self-hosted WordPress your RSS link might look like this
    “http://bloggingwithsuccess.net/feed”. If so don’t use the account name here. You will need to replace the entire “http://feeds2.feedburner.com/WebNewsAndTipsFromBoldenProductions ” line in the section B of the tutorial. For the section D (email subscription form) you will need to use your unique account name to replace the name in red.

    no Feedburner account?
    Bookmark this post and come back after you read the Feedburner help pages.

  2. Find your Twitter account name for the second line in the gadget. Use it to replace my account name in section C, sbanow.

    no Twitter account?
    You can omit that section of the code or return after you signup at Twitter!

Tip:To make the account name changes, do a text search and find (Ctrl + F keys) for the names in red. It’s hard to spot words mixed in with html tags! You can also use your browser’s Edit, Find feature.

Step: Add a Gadget

Go to your Blogger/WP Dashboard and add a text/html gadget to your sidebar. You’ll be copying the code and pasting, using the html view of your editor — not the visual or rich text view. The code is broken into sections so you can omit some of the icons (e.g. if you don’t use Twitter, skip that section). As you copy each section, replace the items in red, if any, with your account information. Do not leave any empty lines.

Step: Copy and Paste the Table

  1. Section A – Define the table (you must copy this section)

    <div align=”left”>
    <table border=”0″><tbody>

  2. Section B – Define the RSS row (optional)

    <tr><td><a href=”http://feeds2.feedburner.com/WebNewsAndTipsFromBoldenProductions” rel=”alternate” title=”Purple RSS image” type=”application/rss+xml”><img alt=”” style=”margin: 0pt 3pt 0px 0px;” src=”http://i282.photobucket.com/albums/kk272/SBA_jpgs/rssbpwebnews.png” border=”0″ /> by RSS</a></td>
    <td><a href=”http://feeds2.feedburner.com/WebNewsAndTipsFromBoldenProductions“><img style=”border: 0pt none ;” alt=”” src=”http://feeds2.feedburner.com/%7Efc/WebNewsAndTipsFromBoldenProductions?bg=99CCFF&amp;fg=444444&amp;anim=0″ height=”26″ width=”88″ />
    </a></td></tr>

  3. Section C – Define the Twitter row. (optional)

    <tr><td><a href=”http://twitter.com/sbanow“><img src=”http://i282.photobucket.com/albums/kk272/SBA_jpgs/bpwebtwitter.png” align=”middle” /></a>
    </td>
    <td><a href=”http://twitter.com/sbanow”><script language=”javascript” src=”http://twittercounter.com/embed/?username=sbanow&amp;style=blue” type=”text/javascript”></script></a></td></tr>

  4. Section D – Email Subscription (optional)

    <tr><td valign=”top”><img alt=”subscribe by email” src=”http://i282.photobucket.com/albums/kk272/SBA_jpgs/emailicon.png” border=”0″ />ail</td>
    <td><form action=”http://feedburner.google.com/fb/a/mailverify” style=”border: 0px solid rgb(204, 204, 204); padding: 3px; text-align: left;” target=”popupwindow” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=WebNewsAndTipsFromBoldenProductions‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><input style=”width: 140px;” name=”email” type=”text”><input value=”WebNewsAndTipsFromBoldenProductions” name=”uri” type=”hidden”><input value=”en_US” name=”loc” type=”hidden”><input value=”Subscribe by e-mail” type=”submit”></form></td>

  5. Section E – End the table – (you must copy this section.)

    </tr></tbody></table></div>

  6. Section F – Gray separator bar (optional)

    <p style=”border-style: outset; border-color: rgb(51, 0, 0);”></p>

Step: Save the Gadget in the Sidebar

Save the gadget and try all of the links. Make any adjustments. The photobucket images are shown in bluish purple in case you want to replace those icons with your own.

That’s it.


I’m anxious to hear if you used this or if you need any help — Leave a comment and we can take a peek!


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


4 Comments

  1. Nice design! Of course you may have to coordinate the icon colors unless the purple fits (find a pink RSS button (?).

  2. Whoah, you make it seem so easy. I'm off to try this on my blog and if I fail, guess who i'll blame? (jk)
    Thanx for the tip.

Comments are closed.