Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

add twitter widget with one twit showing and rotating on website

Posted on 2010-09-10
11
Medium Priority
?
879 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 2000 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
 
LVL 10

Assisted Solution

by:bugada
bugada earned 2000 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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…
Suggested Courses

926 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