asked on

add twitter widget with one twit showing and rotating on website

i want to add a widget like this one to my website: http://www.rzdesign.nl/

it shows only one twit at a time, but rotates them

any one know how to do this?

thanks

bugada

There is a tuturial baseon on php + jquery, but you can easily translate the php part into an ajax request:

http://www.lazydada.com/2010-06-12/rotating-twitter-tweet-feed-in-wordpress/

webdott

ASKER

i am lost on that one. i will read it more and try to understand it.
it has a jCarousel it looks like to show the tweets, that is not what i am looking for.
sorry if my question reads as rotates like carousel, i want just the text to show
on tweet, then after a few seconds, show another single tweet.

i want something very simple like the one at http://www.rzdesign.nl/
where he has the twit bird in the middle of the page and then his
tweets rotate out 1 at a time, not rotate like the carousel.

thanks for sending me that. i will keep looking at it, but it looks like
that is not what i am looking for.

webdott

ASKER

i found this at twitter:

http://twitter.com/widgets/which_widget [ you have to login to see it ]

it gives me what i want except it ads my username, twitter badge, and a link to twitter on it.

i would like just the tweet text that changes [ even if the tweets do not ] every few seconds
to make it look like something is happening even if no new tweets have been posted.

thanks

webdott

ASKER

i did this with there widget. it works, but it only shows the most current.
anyone know how to make it rotate with the last 10 most recent or so?

http://www.myblankweb.com/twitter.html

ASKER CERTIFIED SOLUTION

bugada

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

bugada

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

webdott

ASKER

i am a little lost, but this definetly looks like what i want [ the newsticker is exactly it ]
from the link http://medienfreunde.com/lab/innerfade/

i followed the first link:
http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=n

changed the 12345 and the count=10
i see all the text in page
-- what do i do with that text ?

i downloaded the file on the page.

it gave me the same looking sample as the site http://medienfreunde.com/lab/innerfade/
i have all of the files and folders.

i am still lost as to where to put the text or hyperlink from
http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=n

i think i can go from there if i knew where to put that call

thanks - this is definitely on the right track!

webdott

ASKER

awesome!

thanks. it took a while but i got it withyour help above.

webdott

ASKER

to do this you have to:
----------------------------------------------------------------------------------------
step one:
----------------------------------------------------------------------------------------
create a folder just like images, but name it js
in js folder, copy these 3 .js files as listed below

your tree should be

[folder] js
[.js file in folder ] jquery.js
[.js file in folder ] scripts.js
[.js file in folder ] jquery.innerfade.js

i attached each file below
jquery.innerfade.js
scripts.js
jquery.js

webdott

ASKER

----------------------------------------------------------------------------------------
step two:
----------------------------------------------------------------------------------------

create your website page like below and your done

you can play around with the layout, but EVERYTHING in the
must stay in the div. I have it in a table, you can take it out

hope this helps

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>twitter scrolling recent tweets</title>

<script type='text/javascript' src= 'js/jquery.js'></script> 
<script type='text/javascript' src= 'js/scripts.js'></script> 
<script type='text/javascript' src= 'js/jquery.innerfade.js'></script> 

<style type="text/css">
.style1 {
				border-color: #c0c0c0;
				border-width: 0;
}
.style3 {
				margin-left: 0px;
}
</style>

</head>

<body>
<!-- /#top --> 
   
<div id="content"> 
<div class="col-full"> 
  
<div id="twitter"> 

 
</div><!-- /#twitter --> 
<table style="width: 600px" cellpadding="0" cellspacing="0" class="style1">
				<tr>
								<td style="width: 95px"><a href="http://www.twitter.com/myblankweb" title="Follow us on Twitter" ><img src="images/ico-twitter.png"/></a> </td>
								<td valign="top" style=" font-family:'Trebuchet MS';font-size:12pt; color:gray">
								<ul id="twitter_update_list"</ul class="style3" style="height: 89px;"></td>
				</tr>
</table>



<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> 
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/myblankweb.json?callback=twitterCallback2&amp;count=10"></script> 

</div>

</body>

</html>

Open in new window

bugada

glad that helped you, and thanx for the complete solution.