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
webdottAsked:
Who is Participating?
 
bugadaConnect With a Mentor Commented:
Well this api return last "n" twit

http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=n

substitute "12345" with your twitter username and "count=n" with "count=10" to get last ten twits

what you get is a json response that you can easily integrate in your rotating text.
0
 
bugadaCommented:
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/
0
 
webdottAuthor Commented:
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.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
webdottAuthor Commented:
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
0
 
webdottAuthor Commented:
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

0
 
bugadaConnect With a Mentor Commented:
in addition;

to add rotation you can download innerfade jquery plugin (http://medienfreunde.com/lab/innerfade/)
with javascript call the Twitter API and process the resultin JSON: you have to populate your <ul> twitter_update_list with the desired twitter data (a <li> foreach twit) and configure innerfade as follows:


$(document).ready(
   function(){
	$('#twitter_update_list').innerfade({
		speed: 'slow',
		timeout: 4000,
		type: 'sequence',
		containerheight: '220px'
	});
    }
);

Open in new window

0
 
webdottAuthor Commented:
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!
0
 
webdottAuthor Commented:
awesome!

thanks. it took a while but i got it withyour help above.
0
 
webdottAuthor Commented:
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
0
 
webdottAuthor Commented:
----------------------------------------------------------------------------------------
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

0
 
bugadaCommented:
glad that helped you, and thanx for the complete solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.