Recent Posts:

Archives:

Blogroll:

Get Email Updates:
Enter your email address:

Wednesday, 3 December 2008

How to create your own Twitter Widget. (like the one on this page!):

Basic knowledge of HTML, CSS and FTP is assumed.

Step 1:
Download the source files: twitterwidget.zip
Don't modify any files inside the 'tweet' folder.

Step 2:
In the head section of your page add:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="tweet/demo.css" type="text/css" media="all">
<link rel="stylesheet" href="tweet/jquery.twitter.css" type="text/css" media="all">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="tweet/jquery.twitter.js"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "PUT YOUR TWITTER USERNAME HERE",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true
});
});
//--><!]]>
</script>
</head>

Note:
<link rel="stylesheet" href="tweet/demo.css" type="text/css" media="all">
Is included for demonstration - you should include your own style sheet.
numTweets 5, sets the number of twitter posts to 5, modify it to add more or less posts.


Step 3:
Modify the width of the widget to suit your page.
Open the 'tweet' file and open jquery.twitter.css.
Change the 'width: 20em;' attribute at the top of the file to suit your needs. 12em is small and 40em is big.


Step 4:
To change the colour of the widget:
Open the 'tweet' file and open jquery.twitter.css.
Change:
div#twitter {
width: 20em;
margin-bottom: 2em;
border: 1px solid #473624; <------- CHANGE THIS HTML COLOUR CODE (#4473624;) to your chosen colour.
}

div#twitter h2 {
margin: 0;
padding: 0.4em 1em;
font-size: 1.1em;
color: #fff;
background-color: #473624; <------- CHANGE THIS HTML COLOUR CODE (#4473624;) to your chosen colour.
}

a#profileLink {
display: block;
padding: 0.3em 1em;
color: #fff;
background-color: #473624; <------- CHANGE THIS HTML COLOUR CODE (#4473624;) to your chosen colour.
}

You're done!


0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

‹Home

Newer›