More

    Flying Twitter Bird JavaScript Code for WordPress Blog – Updated

    Must read

    Everything You Should Know About Facebook Business Suit

    Facebooks awaited plan from 2019 finally got into action this year. Sheryl Sandberg, Facebook's Chief Operating Officer, has officially announced its new...

    Google Maps New Feature Will Replicate The COVID-19 Status In Your Area

    With the COVID-19 pandemic, unfortunately, anticipated to stay longer, Google Maps added a new feature to its already long-list of countenances.  This...

    Apple Launched First-Ever Online Store For India On September 23

    Apple marked its expansion by launching its first online store in India on September 23. The Cupertino-based tech giant revealed the news...

    Explore The Most Awaited Discord Screen Share Feature

    Discord is one of the VoIP application and a group-chatting platform designed especially for gamers. But over five years, it is being...
    Flying Twitter Bird JavaScript Code for WordPress Blog - Updated 3
    Sreejeshhttps://techgyo.com
    Hi there! I'm +Sreejesh and I am an internet enthusiast. I started writing on this blog as a hobby, now full time blogger. In this blog, I cover topics about blogging, and how to make money online, and also some interesting techy news, tips and tutorials. Checkout archives

    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://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(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.

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





    Latest

    Now, Futuristic Smart Suit Will Monitor Real-time Fitness

    Ever-Heard of Futuristic Smart Suits?Continuous advancement in technology in the early 21st century has fostered the development of...

    Google Maps New Feature Will Replicate The COVID-19 Status In Your Area

    With the COVID-19 pandemic, unfortunately, anticipated to stay longer, Google Maps added a new feature to its already long-list of countenances.  This...

    8 Incredible VR and AR Apps that are a must-have for your iPhone!

    Virtual Reality and Augmented Reality have touched all facets of life, with its magic-like bliss! Whether it be the Medical field, Engineering,...

    Explore The Most Awaited Discord Screen Share Feature

    Discord is one of the VoIP application and a group-chatting platform designed especially for gamers. But over five years, it is being...

    Apple Launched First-Ever Online Store For India On September 23

    Apple marked its expansion by launching its first online store in India on September 23. The Cupertino-based tech giant revealed the news...

    More Like This