Solved

add twitter widget with one twit showing and rotating on website

Posted on 2010-09-10
11
860 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

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
 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 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