Flying Twitter Bird JavaScript Code for WordPress Blog - Updated

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.  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 planning  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:

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="https://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script> 
<script type="text/javascript"> 
var birdSprite="https://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 https://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(https://techgyomax-srjcooldude.netdna-ssl.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(https://techgyomax-srjcooldude.netdna-ssl.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(https://techgyomax-srjcooldude.netdna-ssl.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 :)





49 COMMENTS

  1. I just had to say thanks! I've been using another code for the bird and it never worked!

    Yours works perfectly!

    :)

  2. Hi Sreejesh,

    This is very cool...

    One Request can you guide how to use in normal html page....

    Please this will help a lot.

    Regards
    Harish

  3. Hi Sree,
    This application is interesting. I tried in Text widget, but it is not working.. :-( .. if you can do modified code for people like me, it will be surely useful...
    Thanks

  4. Hi Sree,

    I have a blog and i had given its url too.. is it possible to enable this flying twitter bird in my blog.??

    If yes, then tell me how i can do this??

    P.S. I don have a website, i own a blog

    • Hi Senthil, I'm not sure whether you can. But anyway try adding the entire code in your widgets and see if it works.

  5. id="theBirdLfollow" - when clicked should take users to twitter profile page of the given username.
    id="theBirdLtweet" - if configured it with the wp function call for the current page, it will act like a tweet button. But the code is currently having some parse issues i will update on this topic soon. You can subscribe to this blog log via email or follow us on twitter @techgyo to get any future updates on this topic.

  6. This codes will work if image uploaded is on correct place?
    Hey Sreejesh did you check whether his images are uploaded on correct folder?
    Ricardo change your image paths URL and twitter handle properly, this codes surely gonna work for you.

  7. For all those who have complaints that the code is not working in their pages, please copy the entire code and try the code in our HTML editor before proceeding.

    <script type="text/javascript" src="https://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>
    <script type="text/javascript">
    var birdSprite="https://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 ";tripleflapInit();
    </script>
    <a id="theBird" href="http://twitter.com/techgyo" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(https://techgyomax-srjcooldude.netdna-ssl.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(https://techgyomax-srjcooldude.netdna-ssl.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(https://techgyomax-srjcooldude.netdna-ssl.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>

    • Hey Ricard, I did check the code in your page, i found that the code you copied is not working as expected. So I'm updating the code for you. You can now copy the new code and paste in just before tag of your footer.php file of your WordPress theme.

  8. Hello, I did upload birdsprite.png and tripleflap.j file and link it but nothing is happening :(
    Can you help me please?

    • The post is updated, now you don't need to upload anything, just copy-paste the code from the text field

  9. Hi Sreejesh
    You have just approved two spam comments. Read the comments properly.
    I too had the same comment but I deleted them. They can affect your blog you see.

  10. hello!This was a really splendid subject!
    I come from itlay, I was fortunate to look for your theme in bing
    Also I get much in your website really thanks very much i will come again

    • We are glad that you liked our page :) Do come back to read more. Also don't forget to subscribe for our newsletter to stay updated as we post fresh contents!

  11. Thanks a lot Sreejesh. You are doing great!!
    I wanted it badly. I may not implement it today but will try it out. Tutorial is good. Lemme try if at any point I'll face difficulty I'll seek your help.

  12. Thanks for this buddy, the bird is really amazing and I'm sure it would have got you some followers. I'll try to implement this on my blog as soon as possible and will see how it helps my followership.

Comments are closed.