Display Latest Tweet with Show/Hide Cookies

My previous theme displays my latest tweet at the top of every page. It turned out to be an excellent technique for getting more followers – visitors see the tweet, click the link, and possibly follow me on Twitter. There is even a cookie-powered “Hide” link for uninterested visitors to hide the tweet for awhile. I received quite a few requests for a tutorial on the technique, so here is how to display your latest tweet with show/hide cookies. For this tutorial, we’ll be using HTML, CSS, jQuery and WordPress. To get a better idea, check out the following demo of the finished product.

Overview

Once implemented, this technique will display your latest tweet as a link on your web page(s). Visitors may click on the tweet to arrive at your Twitter page, and/or click on the “Hide” link to hide latest tweets for some period of time. By default, the tweet will remain hidden for one day, or until the cookie is removed from the browser cache. We’ll see how to specify a different “hide duration” in the jQuery part of the tutorial.

Where is the latest tweet displayed on the page? That depends on the CSS. By default, the tweet will appear exactly where you put the HTML/PHP code in your WordPress theme template. Then with a few additional CSS styles, we’ll see how to position the tweet in a fixed position at the top of your pages.

Step 1: WordPress

To begin, you need WordPress and the SimpleTwitter plugin, or some other way of caching and displaying your latest tweet. The SimpleTwitter plugin is lightweight and simple to use:

1. Go to the SimpleTwitter Settings Page
2. Enter your Twitter name and cache time
3. Save Settings

You can use whatever cache time you like, but don’t go crazy in either direction. Base your decision on your tweet frequency. For heavy tweeters, something like 10 minutes, and for lighter tweeters maybe 120 minutes (2 hours). Once you save your settings, it’s time to add the HTML/PHP code to display the tweet on your pages.

Step 2: HTML/PHP

With the SimpleTwitter plugin configured, we now want to add the HTML and PHP code required to display your latest tweet. This code may be placed anywhere in your theme template, but is designed to be placed in the footer.php file, and then absolutely positioned with CSS to display at the top of your pages.

<div id="tweet-link">
	<div>
		<a id="tweet-latest" rel="nofollow" href="https://x.com/perishable">
			<?php if (function_exists('get_twitter_msg')) { get_twitter_msg(); } ?>
		</a>
		<span><a id="tweet-hide" href="#">hide</a></span>
	</div>
</div>

The only edit to make here is changing my Twitter name, “perishable”, with that of your own. This is basically just a little HTML markup with the requisite SimpleTwitter template tag. Nothing fancy. Once this code is in place, it’s time to style it up with a little CSS.

Step 3: CSS

In your stylesheet, include the following CSS:

div#tweet-link {
	background: url(http://example.com/images/twitter-bird.png) no-repeat 0 8px;
	display: none; overflow: hidden; line-height: 1.6;
	}
div#tweet-link div {
	padding: 5px 5px 5px 45px;
	}
a#tweet-hide {
	background-color: #ebebe3;
	text-transform: uppercase;
	border: 1px solid #827960;
	 -webkit-border-radius: 5px;
	 -khtml-border-radius: 5px;
	 -moz-border-radius: 5px;
	border-radius: 5px;
	padding: 2px 3px;
	}

For the twitter-bird background, just grab a copy of the image appearing at the beginning of this tutorial and place it into your theme’s /images/ directory. If you’re using the default WordPress stylesheet, style.css, the background image should display just fine. If it doesn’t, make sure the image at the specified location.

Notice also that with div#tweet-link{display:none;}, we’re hiding the latest tweet by default. Once the jQuery kicks in, the tweet will be displayed, so if you don’t see it, don’t panic – we’ll get there in just a minute. The last thing to note about this CSS code is the use of proprietary browser-specific prefixes for the rounded corners on the button. Feel free to remove this fluff and restyle the “Hide” button however you wish.

Positioning the tweet: To fix the position of your tweet at the top of your web pages, two additional lines of CSS are required. First, add the following to the div#tweet-link selector:

position: fixed; width: 100%; right: 0; top: 0;

And then add this line to the div#tweet-link div selector:

text-align: right; float: right; clear: none;

Refresh your page and you should see the tweet displayed in the upper-right corner. You may need to tweak the CSS a little to get everything so arranged with your design, but the real trick here is keeping that Latest Tweet displayed at the top of the window regardless of where the user is scrolling on the page. Again, check out my previous theme to see an example of the tweet displayed with fixed positioning. I have found that displaying a persistent tweet at the top of my pages is an excellent way to attract new followers. And with the handy Hide button, everyone’s a winner.

Step 4: jQuery

Last step involves two jQuery scripts. The first part of the following code is the excellent Cookie plugin, which enables the “show/hide-cookie” part of the technique. No changes should be made to the Cookie plugin. It is included here without comments for convenience, but you can learn more here.

The second jQuery snippet displays the tweet, and then sets a “perishableLatestTweet” cookie with a “hide” value of one day. To change this to a different hide duration, edit the “1” in the line commented with “// 1 day”. Other than possibly that, nothing needs changed/edited – this code is good to go.

// Cookie plugin - Copyright (c) 2006 Klaus Hartl (stilbuero.de)
jQuery.cookie = function(name, value, options) {
	if (typeof value != 'undefined') {
		options = options || {};
		if (value === null) { value = ''; options.expires = -1; }
		var expires = '';
		if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
			var date;
			if (typeof options.expires == 'number') {
				date = new Date();
				date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
			} else {
				date = options.expires;
			}
			expires = '; expires=' + date.toUTCString();
		}
		var path = options.path ? '; path=' + (options.path) : '';
		var domain = options.domain ? '; domain=' + (options.domain) : '';
		var secure = options.secure ? '; secure' : '';
		document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
	} else {
		var cookieValue = null;
		if (document.cookie && document.cookie != '') {
			var cookies = document.cookie.split(';');
			for (var i = 0; i < cookies.length; i++) {
				var cookie = jQuery.trim(cookies[i]);
				if (cookie.substring(0, name.length + 1) == (name + '=')) {
					cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
					break;
				}
			}
		}
		return cookieValue;
	}
};
// Hide Latest Tweet with Cookies
$(document).ready(function(){
	$('#tweet-link').attr('style','display:block;');
	var remember = $.cookie('perishableLatestTweet');
	if (remember == 'hide'){
		$('#tweet-link').attr('style','display:none;');
	}
	$('a#tweet-hide').click(function(){
		$('#tweet-link').slideToggle('normal');
		return false;
	})
	$('a#tweet-hide').click(function(){
		$.cookie('perishableLatestTweet','hide',{expires:1}); // 1 day
		return false;
	})
});

Include this jQuery at some point after including the jQuery library. Everything should be working at this point. If not, see the next section.

Troubleshooting Tips

If everything went well, your latest tweet should be displayed in the specified location on your web page(s). If you don’t see it, check the following:

• WordPress – is the SimpleTwitter plugin active and properly configured?
• HTML/PHP – is the required code somewhere in your theme template?
• CSS – is the CSS included somewhere in your theme (e.g., style.css)?
• jQuery – is the jQuery script included after jQuery?

Everything should work great, but if not check these things first. The only thing that may require some thought is fine-tuning the CSS positioning and general styling to match your design. Depending on existing styles, the CSS may require some tweaking.

Comments, questions, and suggestions always welcome! :)

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.