Solved

add twitter widget with one twit showing and rotating on website

Posted on 2010-09-10
11
867 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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

Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

623 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