If you are a regular visitor here, then you must have noticed a blue twitter bird flying around the page. Isn’t it cute? It was actually a mod_jtwitter Joomla module. I believe it was developed by Romacron. Which Which i felt very cute and thought of getting him in this blog.  Actually my friend Anubhab(co-blogger) had left his pet bird at my home when he had to leave to Kolkata. I felt that he is really missing his bird a lot. That is when i thought about presenting a virtual bird here in our blog.  In case you are curious which bird it is, just have a look at the below picture. Pets are wonderful, because animals are such agreeable friends – they ask no questions, they pass no criticisms.  There’s a saying like “Our perfect companions never have fewer than four feet”.

I was thinking to make this flying twitter bird a WordPress plugin and then make a post on this. But since so many of my friends want me to share it fast. I thought of giving away the code for our flying twitter bird. And Kunal of TechHogger was the last to request for this twitter bird. So this post is dedicated to all of my WordPress blog mates  As I mentioned earlier this was a Joomla module done in CSS sprites. The developers have done an amazing job using JavaScript and CSS spites. CSS sprite is something related to image mapping. We have earlier discusssed about image mapping.

Do read:

• Create An Image With Multiple Links using Image Map.

The below image can give you an idea on how this flying twitter bird works using css sprites.

Now lets discuss about adding this twitter bird in WordPress.

Since my plugin is not yet ready for use in WordPress, you’ll have to do some simple editing in your theme files to add this twitter bird. As soon as my plugin is ready, I’ll be posting about it here. Please subscribe to our blog or follow us on twitter to get updates about the flying twitter bird plugin.

Update:

We’ve now made it simple for you all. Just copy the below code and paste it in the footer.php just before </body> and save it. By now, the twitter bird should be flying in your blog. Just refresh your page and check if it is working.

However, you’ll need to edit your twitter username in the below code. You can do it using our real-time html editor. Enjoy!!

<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/techgyo";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
   </script>
<a id="theBird" href="http://twitter.com/techgyo" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLfollow" href="http://twitter.com/techgyo" target="_blank" title="follow me" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; "></a>

Footer.php is a theme file .Every WordPress theme would have it on the location : “wp-contents/themes/themename/footer.php“

Step 1:

Open a notepad and copy the below code and you need to make changes in the fields highlight with color. Download tripleflap.js and birdsprite.png files here. You may now create a folder under wp-content and name it “twitbird” upload the zip file “TechGyo.com Flying Twitter bird” and extract it. Now replace  tripleflap.js and birdsprite.png with the link to the files you’ve just uploaded.

If you found this article helpful, share promote this post in twitter, Facebook and Digg, also share it among your friends! Also if you would like to learn more such cool tricks please subscribe to our email newsletter.

If you are confused at any point, just leave your message as comments.  I’ll take care of the rest

About Sreejesh

+Sreejesh Editor in Chief of TechGyo.com. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS). If you’d like to connect with him, head on over to the contact page. You can follow him on Twitter Facebook