How to add a Twitter Poll to your website

Twitter is great and with it comes great ideas from everywhere. Today, I decided to try a new kind of poll that I really liked and will boost your Twitter mentions a lot. I am talking about Twitter Polls. If you don’t know what it is, keep reading, you will enjoy it.

I saw it first on the IGN E3 2011 coverage. They had this nice poll to vote on “Who’s winning the E3 2011?”. The answers were actually 3 tweet buttons that you could click and they would count the amount of votes. Something like this:

Each click would tweet something like this:

I think Sony is winning #E3. Count my vote on @ign http://t.co/efMlpmF via @ign

This is actually pretty simple to build. Just a few lines of code to your HTML and CSS. Lets start with the HTML:

<div class="twitter-poll">  
	<p class="question">What is your favorite color?</p>
	<div class="answer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.yourwebsite.com/?green" data-text="I think my favorite color is #green" data-count="horizontal" data-via="yourprofile">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <span>Green</span></div>
	<div class="answer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.yourwebsite.com/?blue" data-text="I think my favorite color is #blue" data-count="horizontal" data-via="yourprofile">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <span>Blue</span></div>
	<div class="answer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.yourwebsite.com/?red" data-text="I think my favorite color is #red" data-count="horizontal" data-via="yourprofile">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <span>Red</span></div>
</div>

Replace the values inside the “question”, “answer”s, “data-url”, “data-text” classes and the span tag contents for your desired values. I think the code itself is pretty self explanatory.

IMPORTANT: Remember to give your URLs some sort of unique value. I did this with a simple query string (?green, ?blue, ?red). You need to do this so the votes are counted correctly. Also, DO NOT shorten your URLs, Twitter will automatically do this for you.

Now the CSS:

/* Twitter Poll */
.twitter-poll { clear:both; }
.twitter-poll .question { font-style:italic; }
.twitter-poll .answer > span { display:inline-block; vertical-align:top; line-height:20px; font-size:16px; font-weight:bold; font-style:italic; }

That is it. I actually integrated it smoothly in one of my WordPress blogs and it worked out pretty nice (androidmodo.com if you’re into Android). This will obviously boost your mentions and consequently your amount of followers. Great option if you are low on followers or just want to spread your name a little bit more.

How to integrate this into WordPress?

Easy. Just add the HTML code to a “Text” widget on your sidebar and the CSS to your main CSS file. If you don’t know how to edit your CSS file, remember that you can do it from your admin panel clicking on Appearance -> Editor.

If I get bored some day, I’ll probably try to integrate this into a plugin. Who knows. 🙂

Questions? Comments? Ideas? As usual, leave them in the comments section below. I’ll try my best to help.

Have fun!