After a lengthy hiatus & a long summer break from the bloggersphere as well as other work related projects which have been consuming most of my online time , I considered that my return should at least contribute something for lost time spent away from this blog . Within all of this time spent working on various projects , I have come across many great new and interesting scripts ( code )  by which to enhance design and blogger usability . I have always harbored a great passion and deep respect for development and for the Developers who make it all possible for designers and users to get the most out of their designs and their web sites , by working diligently and passionately developing new codes for all users out there .

The JQuery Twitter Tooltip

The following script  which I came across lately , is a great piece of work which was created by the awesome team over at Codrops ( for any of you Code Geeks familiar with their great site )this team basically drops Killer Codes daily ! This particular script was created by a member of the Codrop team named Cody , and I found it to be a truly great and useful script for anyone who owns a blog and has a penchant for writing and putting out content !

JQuery Twitter Search Functions

What this script does in essence is that it can be utilized into your posts via its callback function ( which I will elaborate upon ) , by  wrapping the span class around any word or search term , and the user reading your post can simply click on the twitter icon and view how many twitter users are searching  or discussing that particular term or word . Those of you who run Multi Authored blogs , and cover a wide range of topics will find this script highly beneficial for your blog and especially for the users who frequent your blog .

The twitter search box pops out and can basically be resized and moved around to wherever the user wishes to place it . The box displays tweets in real time and it uses the JQuery Twitter Search Plugin , which can be customized to incorporate its other  two ( 2 ) Style  features by simply delving into the core .js file titled :jquery.twitter.search.js( for those of you not afraid to plunge into the source code ) ; for those of you that prefer  to keep the present design , then you dont need to touch anything and leave everything as it is .

By taking a look at the example provided below , one can gain an idea of how simple this plugin is for any user who frequents your blog to use – simply : Click on the twitter icon and the twitter Pop Up Box appears , you can drag it around , resize it and even leave it where it is while you continue reading the article , it will remain wherever you place it until you decide to close it .

JQuery Twitter Tooltip Example

Disclaimer

Some of you may be wondering as to why I decided to do a write up of a code which already exists on Codrops ? Well , in response and in defense of any such questions running through anyone’s minds at this point , I will simply state the following : I decided that a simple step by step tutorial was required on this as soon as I looked at a user comment originally posted on the article Latest Tweets Tooltip with JQuery. The particular user had stated that he had  :

The Author’s  ( Cody’s ) response to the particular user was that :

Now this is fine and good – IF you know how to work with </code> , but for the greater majority of bloggers wishing to incorporate certain functions and scripts into their WordPress or Blogger Themes who are not familiar with code or HTML , then this can indeed become somewhat of an overwhelming and burdensome task to say the least  .

Thus, I figured at that point that there are probably more users out there who may not know how to implement this particular script into their themes ( blogs ) as it is , and decided to request Cody’s permission in putting it out here for any of you who would like to utilize this awesome script into your themes , and Cody approved it  ( which I thank him for ) .

At this point I would like to state for the record that the JQuery Twitter Tooltip script has been created by Cody over at Codrops and full credit goes to him .

Utilizing the Script into your WordPress Themes

For users of WordPress , I would advise that you head over to Codrops first and download the JQuery Twitter Tooltip Files . Once you have done so , please log into your C-PANEL- ( backend ), and in your (wp-content) Themes Folder , access your Theme and  create a new Folder ; you can name it ” twittertooltip ” ( if you want to ) or whatever you choose .
Upload your Latest Tweets Tooltip zip file (and please Extract your zip file )  and its contents .

Next step : you should create different ” Sub Folders ” such as : twitterjs ( for your twittertooltip.js files ) -  twitterimages ( for your twitter tooltipimages ) and twittercss ( for your twittertooltipcss files ) . Doing this will help you to keep track of where everything is located and it will be better organized and wont interfere with any of your other existing Theme Files . So, please create these sub-folders and move each of the files belonging to each category into the above named folders .

Please note : When I implemented the script I had to ” Re-name ” the twitter tooltip ‘ style.css ‘ file , because the script was ineffective since my theme also has a ‘ style.css ‘ file – therefore : I would advise any one attempting to run this script to Re-name this file to anything other than ‘style.css’ as it may also end up making the script not function .

Once you have organized all of your folders , please open your /jquery.ui.theme.css & your twitter.css file ( once you have Re-Named it ! )  in your Editor of your backend and implement the required images ( such as the : icon-grip.png , close.png  & twitter.png  ) into both of these CSS files and SAVE  . 

Step 3 : Implementing Your Files

Providing you have followed the  steps described above, please go into your Theme File and open up your ” header.php ” file and directly above your </head> tag , link all of your CSS files as displayed below ( * please replace the file extensions with your own ! ) and hit the SAVE button .

Please Note

Prior to saving your ( style.css – which you have renamed to ➔ ) twitterstyle.css file , copy and paste the following code into this file before saving and linking the file into your header.php

1
2
3
4
5
6
7
8
9
10

.search_results {
                width: 300px;
                position:absolute;
                display:none;
                                top:10px;
 
                                z-index:100;
 
 
            }

1
2
3
4

<link type="text/css" href="<?php bloginfo('template_directory'); ?>/twittertooltip/twittercss/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="<?php bloginfo('template_directory'); ?>/twittertooltip/twittercss/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="<?php bloginfo('template_directory'); ?>/twittertooltip/twittercss/jquery.ui.resizable.css" rel="stylesheet" />
<link type="text/css" href="<?php bloginfo('template_directory'); ?>/twittertooltip/twittercss/twitterstyle.css" rel="stylesheet" />

Step 4 : Installing the JS Files

Since you have installed the CSS files into your  header.php </head> tag , you will now open up your footer.php file , and directly above the </body> tag , please copy and paste the files displayed below ( replacing the jquery.twitterpopup.js and the jquery.twitter.search.js with your own files please ! ) .

Also , in order for the script to function properly – you will need to replace the callback function from the one provided as an example below [  $('#wrapper')  ] , to whatever name your own Theme wrapper has ( please dont forget to do this or else the script will be ineffective ! ) . Once you have followed the steps described , please hit the ” save ” button .

1
2
3
4
5
6
7
8
9

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/twittertooltip/twitterjs/jquery.twitterpopup.js"></script>
        
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/twittertooltip/twitterjs/jquery.twitter.search.js"></script>
        
<script>
            
$(function() {
                
$('#wrapper').find('.twitter_search').twitterpopup();
           
 });
        
</script>


Making the script work within your Theme

Now that you have implemented all of your scripts , and you are ready to create your next article / post , all you will have to do is simply utilize the following span around any word or term you wish like so :

1
2
3

<span class="twitter_search">Web development</span> , and as many other words 
or terms you wish as in the examples provided here on this post .
 That is it - your Twitter Tooltip Search is now ready !

Implementation for the Blogger Platform : Step 1

First , please head on over to Codrops and download the Twitter Tooltip Search file , upload your files to your own host or Blogger itself . Next please implement all of the images provided within the Twitter Tooltip File into the proper CSS files and save them .

In your Blogger Dashboard go to : Design > Edit HTML  > ( There is no need to Expand Widgets for this installation ) . Simply scroll down and locate the following tag ]]></b:skin>
 , and once you’ve done so – please copy the CSS snippet code for the twitter tooltip searchdirectly above the ]]></b:skin>
tag .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 /* latest tweets tooltip */

span.twitter_search{
   
 padding-right:20px;
    
background:transparent url(../twitterimages/twitter.png) no-repeat center right;
   
 cursor:pointer;
}

.twitterSearchClose{
   
 position:absolute;
 right:0px;
 top:0px;
    
background:#aaa url(../twitterimages/close.png) no-repeat center right;
    
width:13px;
   
height:13px;
    
cursor:pointer;
}


.search_results {
                
width: 300px;
                
position:absolute;
                
display:none;
                                
top:10px;

                                
z-index:100;

                                
            
}

Blogger : Step  2

Once you have copied and pasted the CSS above your ]]></b:skin> tag , scroll further down until you locate your </head> tag, and directly above your </head> tag please copy and paste the following scripts provided below . * Please make sure you replace the example files below with your own files *

1
2
3
4



 
<link type="text/css" href="http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.ui.core.css" rel="stylesheet" />

<link type="text/css" href="http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.ui_.theme_.css" rel="stylesheet" />

<link type="text/css" href="http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.ui.resizable.css" rel="stylesheet" />



Step 3

After you have applied the above scripts above your </head> tag , scroll all the way to the end (bottom ) of your source and locate the </body> tag and directly above this tag please copy and paste the scripts provided below . Please Note : Notice the function named $(#wrapper) should be replaced by the ID of your theme’s name which varies for every theme and has a different name or ID.

If you fail to replace this with the ID of your own themes ID ( of your container ) , the JQuery Twitter Tooltip will NOT work ! Therefore , please keep this in mind when implementing this script . ( If any of you encounter any issues within installing the script , you can contact me and I will assist you in implementing it . ) *

** An example of what your themes ID may be similar to might look something like this ( but not exactly ! ) : #body-wrapper **

1
2
3
4
5
6
7
8
9
10



<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.twitterpopup.js'></script>

<script type='text/javascript' src='http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.twitter.search.js'></script>
        
<script>
            
$(function() {
                
$('#wrapper').find('.twitter_search').twitterpopup();
           
 });
        
</script>





Running the Twitter Tooltip Search within your Blogger Theme

The function for the script to work within your theme is in essence the same as it is for WordPress . When you are ready to create your next post all you will need to do is simply run the span around any word or term you wish to emphasize like so :

1
2
3

<span class="twitter_search">Web Design</span> , or any other word you wish to wrap the span around  . 
That is it - your Twitter Tooltip Search is now ready for your Blogger Theme ! 
Drag it , resize it , its all up to you !

If any of you encounter any problems within utilizing this script , you can contact me and I will try to assist you – or if you wish you may also contact Cody over at Codrops .
Enjoy your Twitter Tooltip .

Thank you Cody for this great script !