From our sponsor: Leverage AI for dynamic, custom website builds with ease.
If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for showing the latest tweets about a certain word or phrase.
For this plugin we are using the jQuery Twitter Search Plugin.
Words or phrases that you want to be searched for in Twitter, are wrapped with the following span:
<span class="twitter_search">Some search term</span>
The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.
If you want to configure and restyle the tooltip, you will need to have a look at the configurations of the Twitter Search Plugin. Many parameters can be set here, from style to timings.
You can call the plugin like this:
$(function() {
$('#article').find('.twitter_search').twitterpopup();
});
where #article should be replaced by the ID of your container.
Hey Guys,
cool thing.
I uploaded the folder in my WP-Plugin folder. What do i have to write in the header or so, that it works?!
Big thanks!
Sorry for double Post. What Plugin do you use, to make the code phrases look like code, and made it so good to handle.
Hi, sorry but this is a jQuery Plugin and not a WordPress Plugin, you would have to use it directly. For our code highlighting we are using “Syntax Highlighter and Code Prettifier Plugin for WordPress” by Vijesh Mehta. You can find it here: http://www.lastengine.com/syntax-highlighter-wordpress-plugin/
Cheers
Great effet Cody
this man really master of jQuery…
heummm…G B U \m/
tip + tweet. that’s a really nice idea.
Very nice idea. I just don’t know how often that can be used but still, nice implementation
http://www.handbagsonsales.com
Chanel Handbags
Gucci Handbags Gucci 2010 New Handbag
Hermes Handbags
Balenciaga Handbags
Bottega Veneta Handbags
Chloe Handbags
Coach Handbags
Dior Handbags
Fendi Handbags
Dolce & Gabbana Handbags
Hermes Handbags
Versace Handbags
Prada Handbags
Hello Cody,
Just came across Codrops.
One word for all your work here – AWESOME.
Very useful and totally Web 2.0 work.
One question, where did you get your avatar ?
Thanks.
Awesome script Cody , and it was a snap to implement , great work you guys do here always !
Was wondering if it would be OK w/ you if I could write up a tut on how the script could be implemented manually for users of the Blogger platform as well for users of WP who may not know how to utilize the script ?
Giving you full credit & linking to the original article of course 🙂
Thanx for an awesome script Cody ! 🙂
Hey Mia, thanks a lot. Of course you can create a tut. Let us know if you need any help.
Cheers
Thank you very much Cody, I appreciate your approval of my request 🙂
Hi there ,
Would it be possible to have the latest user tweets rather than the search words? do you know what i mean by that? i tried to put the tweet username between the brackets but it doesn’t work. Any help would be really appreciated…
regards
Hi there,
I’m not sure you saw my comment above.. Please let me know if you know how to do it,..
Hello dave,
this example is using the twitter search plugin (http://jquery.malsup.com/twitter/), and it uses the search API method. If you would like to display the latest tweets of a specific User, then I guess you would need to change the plugin to call the respective api method. Probably you would also need to parse the response in a different way.
Cheers
your site and your posts are awsome … your idea is great, dreaming of the same thing about “related posts” and tags on WP. The idea is here 🙂 thank you so much. I have spent 2 hours on your website now … and I’m crying how much it’s so great 🙂
Thanks for the Tutorial. I am writing this as a Joomla Plugin .
Nice tutorial! Just ported this to WordPress if anyone is still interested:
http://www.cmscrate.com/wordpress/wordpress-plugin-latest-tweets-tooltip
thank u cody…
First off, very nice tutorial and code here. It works great. I do have a follow up question though.
Is there a way to show the Twitter Search query on-hover, instead of having to click the icon/text to show it? I tried going through the code but didn’t find a place to put hover that works. Any help? Thanks!