Amazing Animated Flying Twitter Bird Gadget For Blogger




| 90 comments

animated twitter bird widget blogger
Guest Post - In this post Dasari Harish will show you how to have a stunning Twitter bird Fly around your blog pages, landing randomly in view of visitors to Share your posts and Follow you.

Twitter is one of the most popular Social networking sites in the world among Bloggers to promote their blogs.There are a number of twitter widgets, scripts and plugins available to integrate Twitter with your blog.Most of the icons, buttons or badges are stationary or a fixed floating Twitter gadgets.Now here i have a very cool unique Blogger Twitter widget, an actual Animated flying Twitter Bird that flies around your blog.

This Plugin is java script based and it will display an animated Twitter bird that settles on different places of your blogs visible area. If a you scroll the page, the bird will fly towards the visible part and settle in a new place and it takes random paths for each flight.When you place the cursor over the Twitter Bird "tweet this" and "follow me" links appear,through this the visitor can tweet the article or follow you.


On the demo page you will see the bird land as you scroll look out for the bird following you :

View Demo Button

Add The Flying Twitter Bird To Your Blog


There are Two types here is am giving.You can have the Bird on every page of your blog or just on the post pages..

1. Twitter Bird with tweet text has Post title and URL for all post pages Only.
2. Twitter Bird with tweet text has Current Page title and URL for all Blog pages.

Add Flying Twitter Bird To Post Pages Only

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</body>

3. Copy and paste the following ocde directly Above / Before </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Twitter Bird Widget for Blogger by spiceupyourblogcom -->
<script type="text/javascript" src="http://yourjavascript.com/71110244313/suyb-twitter-bird.js">
</script>
<script type="text/javascript">
var twitterAccount = &quot;Your Twitter User Name Here!&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;
tripleflapInit();
</script>
<!-- Twitter Bird Widget for Blogger by spiceupyourblog.com -->
</b:if>

Important Note:-
Replace Your Twitter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/paulcrowepro , paulcrowepro is the username.


4. Save Your template And Check Out Your Twitter Bird.

Add Flying Twitter Bird To All Pages


Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</body>

3. Copy and paste the following ocde directly Above / Before </body>

<!-- Twitter Bird Widget for Blogger by spiceupyourblog.com -->
<script type="text/javascript" src="http://yourjavascript.com/71110244313/suyb-twitter-bird.js">
</script>
<script type="text/javascript">
var twitterAccount = &quot;Your Twitter User Name Here!&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;
tripleflapInit();
</script>
<!-- Twitter Bird Widget for Blogger by spiceupyourblog.com -->

Important Note:-
Replace Your Twitter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/paulcrowepro , paulcrowepro is the username.

4. Save Your template And Check Out Your Twitter Bird.

Final Words

I Hope you Liked this post and don't forget to share this article with your network. :).Thanks to Paul Crowe for inviting me to write a Guest post on his Great Blog.



By Guest Author -Dasari Harish is the Author of Way2Blogging.org, were he provides Blogger Gadgets and Tutorials. You can also follow Dasari Harish On Twitter.



Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

90 comments:

  1. Hi
    Your options for posts and home page are interchanged such that

    Add Flying Twitter Bird To Home Page And Post Pages( The second code is for this option) and Vice versa. Please look at the issue and resolve. Hope you understand it.:)

    ReplyDelete
  2. @ Muhammad - Thanks for the heads up i have fixed it.

    ReplyDelete
  3. That's cute man!!! Awesome job...

    ReplyDelete
  4. Wonderful and funny...

    By
    http://hari11888.blogspot.com

    ReplyDelete
  5. Friend... its not work in my blog...

    what to do?

    ReplyDelete
  6. @ Hari - The code is definitely working you must have gone wrong somewhere.Try again !

    ReplyDelete
  7. very nice and useful widget ..thanks to Harish and Paul....:)

    ReplyDelete
  8. WOW! u replied my request so ffaasstt! :D thanks very much, Bro!

    ...but... it doesnt work on my template.. ;_((( maybe it because i use modified template?? UGH! ;_(

    ReplyDelete
  9. it didn't work for me.. I'm using third party template would that be a prob? please help :(

    ReplyDelete
  10. Ups!! its work!! *i think the application needs time to adapted on template.. hehehe again, thank you brothers!!

    ReplyDelete
  11. thanks its working

    ReplyDelete
  12. awesome widget. very cute :)
    admin can u help make static pages.
    my blog dont have static pages.. i use coustom made template.
    is there any way i could make that possible?
    i dont want do change my template just for sstatic pages.. but its allmost the last thing i need to make my blog look pro.
    u can visit at bollytadka[dot]com

    ReplyDelete
  13. @ Admin - All Blogger blogs have static pages.Just click your edit posts link in the dashboard, then edit pages in the top menu, then create new page.

    Anyone having trouble adding the Twitter Bird can try adding the code to a Html / Javascript gadget.

    ReplyDelete
  14. I love this twitter bird! But I've followed your instructions and nothing is showing up??? I've rechecked both blogs I've tried it on???
    Any suggestions? Thanks Tania. Nelson.

    ReplyDelete
  15. Absolutely love this cute widget!

    ReplyDelete
  16. @ All - I have Updated The Post And Made It Easier To Add The Twitter Bird To Your Posts.If it was not working for you try the new instructions, please let me know if your succeeded with the new instructions.

    ReplyDelete
  17. yay! working now thanks! <3 it!!!

    ReplyDelete
  18. it is really cool. but it is not faster like yours.

    ReplyDelete
  19. Hello, i have applied the way u explained but the bird is not coming up, does it take time to appear fo the first time?
    pls do visit and do tell me if i need anything to change, ur suggestion are welcomed...
    www.drkenit.blogspot.com

    ReplyDelete
  20. Do i need to click expand widgets template? it had not been mentioned in ur tutorial

    ReplyDelete
  21. @ Dr Kenit - You dont need to tick the expand widget template box for this one.

    ReplyDelete
  22. The first code only works on my comments page. the second code doesn't work at all. Can you help me out?

    ReplyDelete
  23. Cannot get it to work on my blog. No idea why. It is really cute.

    Simple Wyrdings

    ReplyDelete
  24. nice posting and i want try in my blog .... (www.virtualltyreal.blogspot.com)

    ReplyDelete
  25. I'm a total noob when it comes to blogger. How do I add things like links to my facebook, twitter and youtube accounts? I see the add widgets option but which do I use to add these things how do add links to your facebook youtube and twitter onto your blogger.?

    ReplyDelete
  26. Its really cool widget. Thanks for adding this article

    ReplyDelete
  27. I can't get this to work on my blog... I am copying the code after /body and changing the username to match my twitter account. I use a template right from blogger ... nothing special or custom. I've tried lots of your stuff and none of it is working. What am I doing wrong?

    ReplyDelete
  28. Twitter bird in blogs- makes the webpage more lively to watch! Its a cool addition for bloggers, helpful for beginners........

    ReplyDelete
  29. If you were having trouble with the post pages only version i have made some changes that should fix it.Thanks for all your comments and help, if you still have any issues make sure to let us know.

    ReplyDelete
  30. Is there any way possible to get rid of the bird when the blog is not mine? I am sick of the bird when I read. Help! :(

    ReplyDelete
  31. @ Anon - Unless you use a javascript block There is not.You should only see the bird on this page of Spice Up Your Blog ?

    ReplyDelete
  32. Hey, great twitter add on. I was wondering what would be involved in personalising the bird graphics, I'm looking to swap the twitter bird for a parrot...

    ReplyDelete
  33. am follow ur instruction, but its not working, and nothing appear on my blog, please visit my blog. thanks,

    http://aufafielfelix.blogspot.com/

    I need ur advise.

    ReplyDelete
  34. @ Cik Aufa - The code is working so you may have made a mistake along the way im afraid.

    ReplyDelete
  35. Thanks it works great. A bit slow in reaction. Not sure why?
    Also it will be great if it could show the latest tweet in a tweeting bird mode :) Greedy need hi hee... :) Thanks Paul!

    ReplyDelete
  36. this really works and vrey cool !! i love it
    thanks !! for such great Amazing Animated Flying Twitter Bird Gadget

    ReplyDelete
  37. Thanks so much! was looking how to do this everywhere a while back and this one was the easiest to understand that actually worked. Its actually the way i found spiceupyourblog and now I have it bookmarked and anytime I need anything for my blog this is where I come! =D Thanks again!

    ReplyDelete
  38. dear, it's awesome..but it's not working for my blog, i did exactly the instruction..

    ReplyDelete
  39. i hd tried diz on my blog...i hd entered my username..the blue bird is flyin' but i cn enter my twitter.. y??

    ReplyDelete
  40. Thanks For The bird it's so cute!

    ReplyDelete
  41. Thanks Dude...I have been using this thing on my blog...Very Innovative !!

    ReplyDelete
  42. hi,
    i love the bird its so cool and cute, however its not working on my blog i added the code to a Html / Javascript gadget. what do i do now, please see it at incomediva.com its showing twitter bird gadget

    ReplyDelete
  43. @ Favorazzi - The code is added to your closing body tag not a gadget as shown in step 3.

    ReplyDelete
  44. really nice... funny toooooo..................

    ReplyDelete
  45. This is so cute.I had to add it again since it doesn't stay when you change the template but now that I know that trick of pushing CTRL and F I'm all good.

    ReplyDelete
  46. not working on my blog lol :(

    ReplyDelete
  47. @ Dede - Sorry to hear that, it seems to work for most people so there is not an error in the code.It could be effected by something else in your template I'm afraid.Give it another try and if it does not work you may have to leave it :(

    ReplyDelete
  48. thanks for this amazing twitter gadget.
    my blog is topratinggames.tk

    ReplyDelete
  49. Thanks for this cute feature. :) I like how the instructions are user-friendly. :)

    ReplyDelete
  50. like it very much..thanks for the easy steps!

    ReplyDelete
  51. It's amazing n funny . . . thank you....very much

    ReplyDelete
  52. hihihi thanx
    i now have a flying bird on my site :P
    wWw.albsofts.com

    ReplyDelete
  53. thanks! you're great. :-) onlinenlereview.tk

    ReplyDelete
  54. I need to be able to block this thing. I visited a site with it and it was horrible. Cute concept, but it is very distracting.

    ReplyDelete
  55. thank you so much!!
    *made my day :)*

    ReplyDelete
  56. That is just the cutest thing! Thanks for sharing!

    ReplyDelete
  57. This is really cute! Thank you very much :)

    ReplyDelete
  58. Did not work for me. Makes me very sad because it is one of the coolest gadgets I've seen in all my years of blogging.. sad I can't make it work.. but still wanted to tell you how great I think it is..

    ReplyDelete
  59. hi i post code in my blog but its not working can any one post working code
    i tried twitter.com/username or alone "username"

    ReplyDelete
  60. Hello I'm Ar MratKhine thanks you so much :)

    ReplyDelete
  61. thnks a lotttttt.... its really amazing. i am waiting for your more new exiting posts..

    ReplyDelete
  62. I so sorry.

    Listen folks! Follow just as instructed and add the code IMMEDIATELY after body and remember to "SAVE" it button, then open your Blog!

    IT DOES WORK! PERFECTLY!!

    ReplyDelete
  63. Hi,
    Can i use this for blogger Dynamic Views..?
    Thanks
    http://ideid.blogspot.in/

    ReplyDelete
  64. thank you.I added Flying Twitter Bird in my blog

    http://www.shithun.com/

    ReplyDelete
  65. working like a charm
    http://syncitii.blogspot.com/

    ReplyDelete
  66. Everything works, until I click on the bird then it says my Twitter account doesn't exist ?
    If i type the Twitter username into Twitter it takes me to the page.

    Love the widget though :)

    ReplyDelete
  67. Thanks for the wonderful post!

    Please let me know how do i get the side bar share widget (The one you are using on your site titled "Please share this Post")
    Thanks.

    Blessings!

    ReplyDelete
  68. Hey how to get amazing twitter flying bird on weebly plzzz help me

    ReplyDelete
  69. Hi
    I tried editing page HTML as shown and also by adding a HTML/Javascript widget. Nothing worked for me, please help.
    liveitinstyle.blogspot.com

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us