Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

Display Latest Tweet with Show/Hide Cookies

[ Twitter Bird ] 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.

Update: This simple technique no longer works thanks to the 2013 Twitter API, which makes it much more complicated to grab your latest tweet. For WordPress, check out the Latest Tweets Widget.</update>

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://twitter.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.

Update: I changed the image path to include http://example.com/ (for SEO purposes), so remove that bit to get just images/twitter-bird.png for the background url() value.</update>

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.
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »

4 responses to “Display Latest Tweet with Show/Hide Cookies”

  1. The alternate theme link doesn’t work. :)

    • Jeff Starr 2011/02/25 9:41 am

      Ah yes, Thank you – it looks like I forgot to install a theme-switch plugin on this new WP install. It should be working soon ;)

  2. Thanks for great article, and let me know if there are any way to display latest twit as a forum signature.

  3. how about $_SESSION ? :D

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.