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://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://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//techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(https://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(https://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.
my twitter brid is not flying i just copy code an past in my foot not working
You need to replace the Js code with your own one to make it work
Thanks for sharing this awesome tutorial
Very nice…. Implemented and it works perfectly. Thanks!
can i use it for tumblr?
okay, the bird can fly already, thanks !!! it’s nice !
I made it after on footer, is it right ?
why my twitter flying birds can’t fly ?
@Didii, where did you add the code?
Very nice. Works perfectly. Thanks!
I just had to say thanks! I’ve been using another code for the bird and it never worked!
Yours works perfectly!
🙂
Working great in my blog,thanks brother
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
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
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.
This is amazing, I don’t know what else to say. Perfect execution of a cool idea!
Glad that you liked it.
so nice! thanks for the info!
You’re welcome!
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.
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.
Yes bro. There was some other HTML error in the sources code before.
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://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//techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(https://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(https://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>
sorry, it’s still not working… did you check source of my website?
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.
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
How can we put this bird into an html index page?
Please help me out.
You can just copy the whole code and paste it before tag and it should work for you.
paste code here
hello there thanks for your grat post, as usual ((o:
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.
Oops.. yeah i just removed it now.
🙂
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!
This is really awesome, would u allow me to transform it for blogger?
Oh dear, this code is also for blogger.!
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.
Sure bro. My pleasure. Please do share it on twitter, fb and digg.
I added the edited code to footer.php but cannot see the bird yet ;-(
Ooh 🙁
Did you upload birdsprite.png and tripleflap.j file and link it in the code?
Please send your entire code to my email srj.cooldude @ gmail.com. I’ll check it out!
I am mailing you codes along with the full details. Thanks for helping Sreejesh.
Hi Kunal. I checked the code. The issue was with the link to the triflap.js. try opening http://techhogger.com/wp-content/Twitbird/tripleflap.js Its 404!! please recheck the link and test the code at https://techgyo.com/HTML-Editor.htm
@Kunal I’ve mailed you the corrected codes, check if its working now.
Thank a lot Srejesh. The codes sent by you worked. I can the tweetbird on my blog now.
Thanks Buddy.
Wel 🙂 plz do promote this post if it helped u!
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.