Solved

add twitter widget with one twit showing and rotating on website

Posted on 2010-09-10
11
857 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:webdott
  • 7
  • 4
11 Comments
 
LVL 10

Expert Comment

by:bugada
ID: 33647026
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
 

Author Comment

by:webdott
ID: 33648802
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
 

Author Comment

by:webdott
ID: 33648948
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
 

Author Comment

by:webdott
ID: 33649187
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
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
ID: 33651040
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 10

Assisted Solution

by:bugada
bugada earned 500 total points
ID: 33651080
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
 

Author Comment

by:webdott
ID: 33651796
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
 

Author Closing Comment

by:webdott
ID: 33652149
awesome!

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

Author Comment

by:webdott
ID: 33652159
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
 

Author Comment

by:webdott
ID: 33652164
----------------------------------------------------------------------------------------
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
 
LVL 10

Expert Comment

by:bugada
ID: 33652633
glad that helped you, and thanx for the complete solution.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now