Forum Home Enhancements - [CM] Flying Twitter Bird (On Forum Home)

This was brought to you by ChiNa-Man


First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

:::::::::::::::::::::::::::::::::::::::::::::

1 Template Edits: Only Copy & Past (Done)

Befor downloading this:

I had this thread actually requested the admins or mods to delete, since after Publishing this I saw another Modification for vBulletin which I havnt seen befor untill I saw the similar thread! That one is used for Threads and publishes threads on Twitter! While this one is different and only on forum home, and does not publish threads or news, Untill you do it yourself by clicking on the BIRD to the left, showing 2 birds instead of 1! But thanks to Paul M, he said it was ok as long its not copied, so now we are good to go...

Modification Start:

For now I only give Credits to SujitKumar (Wordpress.org) that I know made this for Wordpress long ago, and later on made for many other websites, blog and forums with different authors.

It was very hard to configure the codes and to make use of it in vBulletin!

About modification:
Ok this mod is actually showing 2 Birds! One of the birds are flying arround, while the other bird is sitting on the left side of your screen! And where ever you scroll with your mouse the flying bird will follow you and the screen! It will always find a good spot to SIT, not just anywhere! I noticed that it will sit on Forms, Lines or Edges!!

Difference between the 2 Birds:
1: Clicking on the Flying Bird, it will take you to your Twitter Account!
2: Clicking on the Sitting Bird on the left side of your screen, will let you TWIT news directly to your profile!

Lets Get Started:

Step 1: Go to your AdminCP, Click on Styles and Templates, then Style Manager, and on your right side in the dropdown sidebar, you choose Edit Templates!

Now you are in the Templates area! You can either add the following code in your "footer" or your "header" template! But always start with the header. Click and open your header template, and add the following code below everything else.

Code to add in Header:

  <script type="text/javascript" src="js/tripleflap.js"></script>
    <script type="text/javascript">
    var birdSprite="images/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 = "YOUR TWITTER ACCOUNT"; tripleflapInit();
    </script>
    <a id="theBird" href="http://twitter.com/?status=+@New updates:"  target="_blank" style="display: block; position: absolute; width: 64px;  height: 64px; background-image: url(images/birdsprite.png);  background-attachment: initial; background-origin: initial;  background-clip: initial; background-color: transparent; z-index: 947;  left: 0px; top: 550px; background-position: 0px 0px; background-repeat:  no-repeat no-repeat; "></a>

Step 2: Replace the line which is COLORED in RED with your twitter account name! And no URL. So go a head and change the text "TWITTER ACCOUNT NAME" with your account name! And again... do not TYPE any URL!

Step 3: Is to Donwload the ZIP files from the attachments below, and upload the 2 folders to your forum root! One of folder is called "js" and the other is called "images"! Upload them both in your main forum folder!

About the Code Marked With Different Colors:

BLUE is the path to your Flying Bird, and the bird to the left side of the screen, leave it as it is. Do not remove the image because the flying bird is also using the same image!

Purple is the size for the bird on the LEFT! You decide where you want it to sit! So only change the text wich says TOP and LEFT in purple color!

Thats it, I really hope you guys like this, and Please click on INSTALLED!

Notice:
If you dont want the left BIRD to be showen, just change the BLUE line which is the path to the image, simply change it to something else! THATS IT! But do not remove the image from the folder!

Example Image:

[ChiNa]

Originally Posted by gsmlover4u

sir i am not said twiter is wrong site

plz see this
why show me this
i think is this cause google+ or twiter i am not sure
so i post here for better help

website has sent a certificate with diffrent website name then requested accept anyway

Thanks for your reply...

This is a very normal Message, and you get it in your PC as well, and Its not the Twitter widget that gives you this error, its because your site is having conflicts with other jquery files and ajax! But when you use the Twitter Bird then the conflict comes up!

Its simply because it does not like to work with the Twitter Birds JS file... It has nothing to do with the Twitter Widget is not safe or a non secure site like what you said in your first message. And for a test, you cam install it on another template, and I am sure it will not give you the same error....

Regards CM

Ps, Now not many use NOKIA phone to enter a vBulletin website because its not compatible with the browser you use on your PHONE,,, So there can be many things, and try not use your phone!

[gsmlover4u]

sir thanks for reply
sir one more thing is there any way to know that which jquery files and ajax files conflicts ?

[ChiNa]

Originally Posted by gsmlover4u

sir thanks for reply
sir one more thing is there any way to know that which jquery files and ajax files conflicts ?

Thats not easy in your case, because its on your phone! Then I cannot say anything for sure! Phones are very different than computers. If you can give me the name of the browser you use on your phone, then I can search to find a solution for that!

Ps, Sometime I get the same problem on my board, It tells me that the script is busy! It really depends on the server and how busy is the JS file hosted on googles servers..

[Baghira]

Well, some months gone since last post but I hope you can help.

My Twitter Bird is flying, but the insertion of the header code moved my NavBar Submenu to top of the navbar... thats anoying