Using Twitter and jQuery to keep a website fresh
A website with fresh, relevant content helps visitors see a business is active & has expertise - and is therefore worth working with.
But creating new pages for your site - even blog posts - can be time consuming and costly (either in money or time spent).
In this quick tutorial, I'll show you how to use Twitter to keep your website fresh, with only a beginner's grasp of HTML and graphic design - and how to use a little bit of beginner's level jQuery to enhance the visual experience.
On this site, you'll probably have noticed we have a "thought bubble" coming out of the logo, which is updated regularly (usually every day). This bubble pulls in our latest Twitter post - we use Twitter to post short messages & links related to web design / SEO / online marketing.
Hey presto - fresh, relevant content for the site that can be posted from the office, or from a train, or even from a boring meeting...
I'll now walk you through the HTML to put in your web page; how we created the thought bubble; how to make the thought bubble resize to fit your post; and how we make it fade in.
Step 1 - the HTML:
Twitter have badges available for Blogger, MySpace etc. We use a (simplified) version of the Blogger one to pull in the Twitter post to display in the "thought bubble". First, put the following HTML wherever you want your Twitter update to appear:
<div id="twitter_div">
<ul id="twitter_update_list">
</ul>
</div>
Then, put the following javascript just before the closing </body> tag:
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TWITTER USER NAME.json?callback=twitterCallback2&count=1"></script>
Just make sure you put your Twitter username in the second .js script, where it says, er, TWITTER USER NAME.
(The javascript needs to go at the end, so that the rest of your page can load first - Twitter can be slow to respond, you don't want that to harm your visitor's experience).
2. Create the "thought bubble" (or whatever background you want)
We used Fireworks to create the thought bubble, and the sizes here allow it to fit into the "visual grid" for our site - yours can be different, of course.
- Draw out a rectangle 230px by 100px, with a 1px outline. Set rectangle roundness to 20. Select "Linear" gradient, going from white to the colour of your choice (I use some opacity variants, too)
- Draw out three or four circle, holding down 'shift' to keep them round, using the same Linear gradient as the box, and position them to the top left to create the "thought bubble" effect.
- Adjust the gradient so that the effect finishes just above the line of the lowest of your circles
- Crop and save the thought bubble twice - once from the top to just below the lowest circle, saving it as twitterBgTop, once from the bottom to just below the first circle, saving it as twitterBgBottom - to the relevant images folder on your site
3. Use CSS to style
Here, I'll explain how we've used CSS to make sure the bubble adjusts in size to fit your Tweets (as we know Twitter is at most 140 characters, we created the 'bubble' so that it's bigger than even the largest Tweet - we'll use CSS to make sure it resizes)
- For the wrapper div, set the 'global' styles like text size / colour and the positioning of the bubble (here we use absolute positioning for precision positioning on the page, and give it a high z-index to appear above the 'contact' collapsible panel)
- Set the twitterBgBottom image as background, positioning it to the bottom with no-repeat
#twitter_div {
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgBottom.png);
background-repeat: no-repeat;
background-position: center bottom;
font-size: 10px;
color: #8494B6;
line-height: 1.4em;
text-align: justify;
width: 270px;
position: absolute;
top: -14px;
left: 430px;
z-index: 20;
}
- Style the UL which contains the posts so that there's no bulleting, and give it padding to sit the text within the bubble: here it's 50px left padding because the side of the bubble is 40px in from the left of the parent #twitter_div, which along with the 10px right padding gives 10px 'padding' within the bubble.
- Set the twitterBgTop image as background, positioning it to the top with no-repeat
#twitter_div ul {
list-style-type: none;
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgTop.png);
background-repeat: no-repeat;
background-position: center top;
padding-left: 50px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
margin: 0px;
}
- Style how links that are posted will appear to fit with your site's link scheme (it will inherit, so if you have global link styles, you don't need to do this)
- By setting 'display' to 'block', this ensures the "updated xx hours ago" appears on a separate line
#twitter_div a:link, #twitter_div a:visited {
color: #DF7889;
text-decoration: none;
display: block;
}
#twitter_div a:hover, #twitter_div a:active {
text-decoration: underline;
}
And you're done. The only issue remaining is that, whilst waiting for Twitter to answer the call, it can look a little ugly:
But there's a very simple way of solving this - jQuery.
4. Using jQuery to improve the visual experience
We're already using jQuery on this site to provide the "lightbox" effect for showing case study work. So, let's make the most of jQuery by using it to fade in the 'thought bubble' once it's loaded and ready to show.
First, set the #twitter_div CSS "display" property to "none".
Next, load in the jQuery library. You can either host it yourself (download it from http://jquery.com/), or call it from Google (the way I do it on this site), and link to it from the document <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Then, put the following jQuery function in the <head> of your page. Make sure it comes after the link to the jQuery library.
<script type="text/javascript">
$(document).ready(function () {
$('#twitter_div').fadeIn(3000);
});
</script>
(You can also put it in a separate .js file, and link to it from the <head> of your page.)
What is this doing? When the document it ready, jQuery executes the "fadeIn" function on #twitter_div, which as part of its function resets the CSS property "display" to "block". You can alter the speed of fadeIn by changing the number, as 3000 represents milliseconds, so for example a quicker fadeIn of 1 second would read
$('#twitter_div').fadeIn(1000);
This isn't an accessibility issue - we're calling the Twitter post with Javascript anyway, so having #twitter_div set to display:none by default isn't denying content to any of our users with their browser's Javascript disabled.
So there we have it - an easy way to keep a website fresh and show visitors your expertise, or personality, or even both...!
But creating new pages for your site - even blog posts - can be time consuming and costly (either in money or time spent).
In this quick tutorial, I'll show you how to use Twitter to keep your website fresh, with only a beginner's grasp of HTML and graphic design - and how to use a little bit of beginner's level jQuery to enhance the visual experience.
On this site, you'll probably have noticed we have a "thought bubble" coming out of the logo, which is updated regularly (usually every day). This bubble pulls in our latest Twitter post - we use Twitter to post short messages & links related to web design / SEO / online marketing.
Hey presto - fresh, relevant content for the site that can be posted from the office, or from a train, or even from a boring meeting...
I'll now walk you through the HTML to put in your web page; how we created the thought bubble; how to make the thought bubble resize to fit your post; and how we make it fade in.
Step 1 - the HTML:
Twitter have badges available for Blogger, MySpace etc. We use a (simplified) version of the Blogger one to pull in the Twitter post to display in the "thought bubble". First, put the following HTML wherever you want your Twitter update to appear:
<div id="twitter_div">
<ul id="twitter_update_list">
</ul>
</div>
Then, put the following javascript just before the closing </body> tag:
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TWITTER USER NAME.json?callback=twitterCallback2&count=1"></script>
Just make sure you put your Twitter username in the second .js script, where it says, er, TWITTER USER NAME.
(The javascript needs to go at the end, so that the rest of your page can load first - Twitter can be slow to respond, you don't want that to harm your visitor's experience).
2. Create the "thought bubble" (or whatever background you want)
We used Fireworks to create the thought bubble, and the sizes here allow it to fit into the "visual grid" for our site - yours can be different, of course.
- Draw out a rectangle 230px by 100px, with a 1px outline. Set rectangle roundness to 20. Select "Linear" gradient, going from white to the colour of your choice (I use some opacity variants, too)
- Draw out three or four circle, holding down 'shift' to keep them round, using the same Linear gradient as the box, and position them to the top left to create the "thought bubble" effect.
- Adjust the gradient so that the effect finishes just above the line of the lowest of your circles
- Crop and save the thought bubble twice - once from the top to just below the lowest circle, saving it as twitterBgTop, once from the bottom to just below the first circle, saving it as twitterBgBottom - to the relevant images folder on your site
3. Use CSS to style
Here, I'll explain how we've used CSS to make sure the bubble adjusts in size to fit your Tweets (as we know Twitter is at most 140 characters, we created the 'bubble' so that it's bigger than even the largest Tweet - we'll use CSS to make sure it resizes)
- For the wrapper div, set the 'global' styles like text size / colour and the positioning of the bubble (here we use absolute positioning for precision positioning on the page, and give it a high z-index to appear above the 'contact' collapsible panel)
- Set the twitterBgBottom image as background, positioning it to the bottom with no-repeat
#twitter_div {
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgBottom.png);
background-repeat: no-repeat;
background-position: center bottom;
font-size: 10px;
color: #8494B6;
line-height: 1.4em;
text-align: justify;
width: 270px;
position: absolute;
top: -14px;
left: 430px;
z-index: 20;
}
- Style the UL which contains the posts so that there's no bulleting, and give it padding to sit the text within the bubble: here it's 50px left padding because the side of the bubble is 40px in from the left of the parent #twitter_div, which along with the 10px right padding gives 10px 'padding' within the bubble.
- Set the twitterBgTop image as background, positioning it to the top with no-repeat
#twitter_div ul {
list-style-type: none;
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgTop.png);
background-repeat: no-repeat;
background-position: center top;
padding-left: 50px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
margin: 0px;
}
- Style how links that are posted will appear to fit with your site's link scheme (it will inherit, so if you have global link styles, you don't need to do this)
- By setting 'display' to 'block', this ensures the "updated xx hours ago" appears on a separate line
#twitter_div a:link, #twitter_div a:visited {
color: #DF7889;
text-decoration: none;
display: block;
}
#twitter_div a:hover, #twitter_div a:active {
text-decoration: underline;
}
And you're done. The only issue remaining is that, whilst waiting for Twitter to answer the call, it can look a little ugly:
But there's a very simple way of solving this - jQuery.
4. Using jQuery to improve the visual experience
We're already using jQuery on this site to provide the "lightbox" effect for showing case study work. So, let's make the most of jQuery by using it to fade in the 'thought bubble' once it's loaded and ready to show.
First, set the #twitter_div CSS "display" property to "none".
Next, load in the jQuery library. You can either host it yourself (download it from http://jquery.com/), or call it from Google (the way I do it on this site), and link to it from the document <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Then, put the following jQuery function in the <head> of your page. Make sure it comes after the link to the jQuery library.
<script type="text/javascript">
$(document).ready(function () {
$('#twitter_div').fadeIn(3000);
});
</script>
(You can also put it in a separate .js file, and link to it from the <head> of your page.)
What is this doing? When the document it ready, jQuery executes the "fadeIn" function on #twitter_div, which as part of its function resets the CSS property "display" to "block". You can alter the speed of fadeIn by changing the number, as 3000 represents milliseconds, so for example a quicker fadeIn of 1 second would read
$('#twitter_div').fadeIn(1000);
This isn't an accessibility issue - we're calling the Twitter post with Javascript anyway, so having #twitter_div set to display:none by default isn't denying content to any of our users with their browser's Javascript disabled.
So there we have it - an easy way to keep a website fresh and show visitors your expertise, or personality, or even both...!
Labels: tutorial, web-design
posted by WillsonWebDesign at
17:59
0 Comments:
Post a Comment
<< Home