This is another one simple,lightweight jquery plugin to create twitter like top tweet widget. This Twitter like top tweet plugin can be used to show top news, updates, recent comments, Events etc.
This is a very simple script you can modify this script easily making only few changes.
Publishing this script in a hope that it will be useful to someone. 🙂
This is a very simple script you can modify this script easily making only few changes.
Publishing this script in a hope that it will be useful to someone. 🙂
View Demo Download Source
Twitter like top tweet Implimentation
-
1) Include javascript and stylesheet
-
2) Activate Plugin
-
4) Ajax-Server
-
3) More Configuration Options
- unlimited – to show all the tweets
- any numeric value
- true
- false
- down- to scroll down
- up-to scroll up
|
1 2 |
<script src="js/jquery.js"></script> <script src="js/toptweet.jquery.js"></script> |
|
1 |
<link rel="stylesheet" type="text/css" href="css/style.css"> |
|
1 2 3 |
$(document).ready(function( { $(".twtr-tweets").topnews(); }); |
3) Plugin options
This option is useful to those guys who wants to stop scrolling on mouse over
default value of startstop is false.
|
1 2 3 4 5 6 |
$(document).ready(function( { $(".twtr-tweets").topnews({ startstop:true, move:'down' }); }); |
Server side script is as follows,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php $con = mysql_connect("localhost","root","admin"); if($con) mysql_select_db("tweets",$con) or die("Can't select Database.."); if($_POST['functionName']="get_recent_tweet") get_recent_tweet(); function get_recent_tweet() { $limit=$_POST['lim']; $count=0; $res=mysql_query("select * from tweeter order by id desc limit ".$limit); while($row=mysql_fetch_array($res)) { $msg[]=" <table border="0" cellspacing="0" cellpadding="0"--> <a class="tweet_by" href="#">".$row['name']."</a> ".$row['tweets']." <a class="anothter_link" href="".$row[">".$row['site']."</a> "; } echo implode("~",$msg); } ?> |
| Option | default | Description |
|---|---|---|
| limit | 10 | set the limit for tweets
|
| startstop | false | stop on mouse over
|
| move | down | To set scrolling direction of the scroller
|
contact : shrikantjadhav86@gmail.com
Thank you, amazing article exactly what I was looking for. believe it or not after 2days of searching I found out that there are hundreds of people who are looking for something like that and didnt find it yet.
You are welcome, i am still working on it to make it more useful. you will have new updates soon.
How to use stop on mouse over
sorry to say but this functionality is not available in current version . right now i am working on it. you will have this functionality and some new options very soon.
Hi
This plugin really very useful…I m also looking for the stop on mouse over facility.hope to c that soon.
Hi Bobby,Soniya,
Thanks for the appreciation. we have got 2 requests so we must work on it 😀
you will find this feature very soon.
—————————————————————–
I have just added the feature, and updated demo as well as source code with little CSS touch.
thanks once again for this useful suggestion.
this control looks really good and almsot perfect for my needs.
My only problem is that I have to integrated it wth .NET and dont really undertsand how to swap out the server side bit. So if anyne has anypointers as to how to get ths workng wth .NET I would very much like to hear from you.
jj
I work out how to get this great control to work with .net all i needed to do was change the ‘get_tweet’ function to call a .net webservce rather than the ajax_server.php.
hey guys, I have uploaded new source code of this plugin with one option to set stop on mouse over. 🙂
$(“.twtr-tweets”).topnews({
startstop:true
});
for allowing stop on mouse over just set startstop:true
default value of startstop is false.
Hi,
The mouse on stop over was really helpful for me.I am using that now inside my rails application.I had one more concern.In your plugin script there is a code for joining the string with ~ and then inside the script the string is split using ~.I am a Ruby on Rails programmer and this is working fine.Inside my application the scrolling is working perfect.Each time i am accesing the recent messages from the table and is shown inside the scroll..But if i give ~ inside the content it seems to break the code since the demiliter used here is ~.Is there a method to solve this.
Thanks in advance
Soniya
You need to modify the scroller plugin and ajax server script. its not a big deal just change ‘~’ with the any other special character that is not in your content. or use multiple ‘~’ like ‘~~~’ to merge and split.
You need to modify the scroller plugin and ajax server script. its not a big deal just change ‘~’ with the any other special character that is not in your content. or use multiple ‘~’ like ‘~~~’ to merge and split.
Thanks wery GOOD!!!
I have the code running, and it is working beautifully…except:
After a certain period of time, the motion becomes jerky, and the memory used by the browser steadily increases. I have used several browsers, and all have similar problems.
Is there a way to free resources after data has been seen?
Hi Shrikant,
Great work, Im moving from ASPx to PHP so still learning this has helped me loads, thankyou.
Is there a click event?, that is when I click on news item it directs me to a page.
if not how would i implement.
thanks, i really appreciate your help.
Max
you can add html+plain contents inside that div, but if u want to add click event to whole div we need to implement that feature. let me know if this solution is sufficient for you.
Thank you a lot for this,
it’s very useful.
The only thing I spent some time of, if you want to embed your widget in a tabbed website, you have to define your timers globally so you have the chance to clear when you reload the tab.
Thanks again
i am not getting what you mean exactly please expalin it more and example would be helpful
this is a great control but I too have experienced the memory issues that BestBuzz has…. one other thing… will Google index the content of the control?
i think, you guys are using old version code can you please download the new one and try again…if it doesn’t work let me know.
can i ask the purpose of the “http://s.twimg.com/a/1274899949/images/fronts/gradient.png” file that is part of the pre-built css? clicking it takes you to an xml file on a twitter hosted site?
what’s it do? is it needed?
awesome plugin. thanks for the hard work.
also, even in the demo, the records do not display at the correct START. they start in the middle of your tweets (in your case, ID#5) and loop back around….?
It is designed to show 10 recent comments so when you add 11th comment, comment 1 will be disappeared and regarding wrong demo the database entries are wrong that’s why they are not showing in proper way.
Thanks for pointing that We will change.
Hi Shrikant, I’ll be interested in what you find when you go to change it. I don’t think the problem has to do with the data since I found the same problem with my own data. It comes out of the database fine, but doesnt get displayed correctly, either from a starting point, or as it continues around the loop. Also, can you let me know about that twimg png? Thanks!!!
@lg : As we said before there was problem in data, u also have the same problem may be because of same database table structure that we have been using in our demo page. now we have resolved the problem fixing the entries. you can take a look to make sure its working fine. regarding “twimg png”…u r right, its not needed…to achieve same look and feel we have used same css file from twitter. you can remove it from there.
Can anyone please help me?
I have done everything according to the tutorial but the tweets does not display.
I don’t know what is the problem. Can anyone anyone please describe what to change on the index page. Thanks……
🙂
Make sure of following things
– You have configured database parameters properly and table is also created.
– jquery in included.
after this if u are not able to make it work then post ur page url here and we will have a look at it.
I just found out that the problem was in ajax server. It wasn’t configured correctly.
THANKS 🙂 🙂 🙂
I really like you plugin but I am having this difficulty and I wonder if you could assist me. How do you stop already displayed tweets from showing up again. I realized you are using a loop to start from 0 again when cur == limit. How do you prevent that. I have lots of data in a database wish to display them one after the other using ajax until i have displayed all in database.
I must admit that I am still not confidence in jquery. Thank you!!
Hi maxwell, i have uploaded new source code please use that one, and set limit=’unlimited’, it will work for you.
Thanks alot for the update, I am yet to implement the changes but I’m pretty sure it will work as expected. Thanks again!
I would like to use this to call posts from my database and display it on my site. my posts are called with the function posts_html How can i get the posts to be called from the database instead of the tweets? Any help would be much appreciated. 🙂
@trevor: Actually in demo script all the entries are being fetched from database only and not from Tweets. so just download the script and and make changes to database config file and you are done 😀
Hello Amit.
Thank you for the reply. I have changed these setting and the scroll tweets work. but i can see any posts. All i see is a message that says “Undefined” . Any idea why?
It simply means wrong table “field” configuration. tweet javascript is not getting data to display. If you have firebug check your ajax request response. i am sure it will be blank. let us know if this works.
I have adapted your code to run inside of Joomla in a component I am writing. I get the article box to display and items are being pulled from the database and being displayed, but I get the following error in firebug:
$(obj + ” div:last”) is null
and the items do not scroll. Any ideas?
can u send me the link to the page….so i can take a inner code look to find out the exact problem.
Its really very cool and helpful for me. Thanks yaar. Now can you tell me how can I pause / slow / fast this scrolling by clicking a button? 8) 8) 8)
pause, play events are already implemented there onmouseover just call that event on button click. There is also a speed parameter in code u can change it on button click event but i think u need to re-initialize the script to apply new speed setting. Give it a try
Thanks yaar.
hi,
i used this script and it works fine. But i have a small problem. this script is not working in ie6, ie7 and ie8.
whereas it works fine in firefox, chrome, safari and ie9.
Can you help me with making it work in ie older versions.
thank you
what happens when u run it in IE ?? error ?
hi,
there is no error but the scroller is not working in ie7 and ie8. it is working fine in other versions including ie9.
it is on this page http://sniptz.com
Thank you
hi there is no any error with the plugin, it is working fine with IE 7 and IE 8, i thing you are missing something. please check your code.
Thanks Amit for sharing this article. I am not using twitter regularly for promotion of my website. This jQuery plugin helps me to drive more traffic.