Twitter is surely one the most popular social networks on the web, and WordPress is surely one the most popular CMS available today. Usually these two platforms interact only in one way: you get something from Twitter, you post something on Twitter. Let's say that you want to publish your latest tweet as a post on your WordPress site, also checking if there is another brand new tweet available. How we can to this?
Twitter provides a useful guide to create and customize our tweet buttons. In this post, I'll show you how to implement a basic Twitter tweet button with jQuery. Let's get to work.
The following video shows my attempts to use the mobile versions of Facebook and Twitter with Lynx, the textual browser. Facebook fails, while Twitter successfully logs me in and lets me publish a tweet. I hope you find it useful.
The secret of jQuery's Twitter tickers is simple: if you want to safely execute the rotation, timers and the like, put all your routines within the $.getJSON() scope. Otherwise, it won't work. Said that, let's get to work.
How many times did you search for a jQuery Twitter plugin? And how many times did you find a plugin which not only shows your latest tweets but also calculates the time elapsed from your latest tweet and properly format raw text URLs? Honestly, there are great plugins around the Web but only few of them fulfill these requirements (one is surely Tweetable). So here's my brand new jQuery plugin called TwitterFeed.
I decided to create a PHP widget for Twitter because I was honestly tired of using JavaScript widgets which have the major drawback of causing accessibility problems in those browsers that don't support JavaScript at all. Two things came to my attention: how to replace text URLs with HTML links and how to properly calculate the time elapsed from your latest tweet. I addressed the first problem by using regular expressions, while the second was quickly solved thanks to a careful reading of some good tutorials on the subject. So I created the TwitterWidget class, which is as follows:
http://twitter.com/statuses/user_timeline/ followed by your Twitter ID and ended with .rss. To get your Twitter ID, simply visit this site and enter your Twitter username into the form. Done that, you're ready to work with a Twitter feed.
body element of the user home page:
Twitter has five different colors in its palette. Today I spent some time with a color editor and I've identified these colors with their CSS values. Then I've created five different classes using the aforementioned colors, which are as follows:
contenteditable attribute, the good old days of the textarea-driven pages are over. Now by setting this attribute to true, any element of your page becomes editable, that is, its contents can be actually determined by the user's action. In this post, we're going to make a field trip by building up a content editable area for writing a Twitter tweet.
Twitter allows its users to dynamically modify their online status by using the special URL http://twitter.com/home?status=encoded-string, where the encoded-string URL parameter is simply the text string you want to be displayed in your Twitter status box before tweeting it by clicking on "Tweet". This string must be encoded using the JavaScript's core global function encodeURIComponent(), which converts all special characters in an URL-friendly encoded string. So why don't we use jQuery to automate this process? Here's a simple plugin:
jTwitter is a powerful jQuery plugin created to parse a Twitter feed in JSON format. This plugin adds a new global function to the jQuery wrapper and encapsulates the popular global getJSON() method. Also, this plugin allow us to limit the number of tweets returned by the JSON object obtained by the AJAX request (performed using the JSONP standard). Further, we can work on the single properties of such an object by iterating over them using $.each(). An example:
$(document).ready(function(){
$.jTwitter('username', 5, function(data){
$('#posts').empty();
$.each(data, function(i, post){
var tweet = post.text;
$('#posts').append(
'<div class="post">'
+' <div class="txt">'
+ tweet
+' </div>'
+'</div>'
);
});
});
});
As you can see, this plugin accepts a Twitter username, the number of returned tweets and the JSON object itself.
In this post I'm going to show you how to stylize Twitter links with CSS. Twitter links are usually in the form @profilename, and this poses some accessibility problems because of the presence of the at symbol, which is not part of the actual content of the link itself. Let's start with a basic page that contains two Twitter links inside an unordered list. Here are the CSS styles:
body {
background: #008eb9;
color: #333;
margin: 0;
padding: 2em 0;
font: 76% Verdana, sans-serif;
}
#twitter-profiles {
width: 50%;
margin: 0 auto;
padding: 1em;
list-style: none;
background: #fff;
font-size: 1.2em;
}
#twitter-profiles li {
height: 3.5em;
margin-bottom: 0.5em;
padding-left: 3.6em;
background: url(twitter-links/twitter.png) no-repeat 0 0;
}
#twitter-profiles li:hover {
background: url(twitter-links/twitter-hover.png) no-repeat 0 0;
}
#twitter-profiles li a {
color: #008eb9;
text-decoration: none;
display: block;
height: 100%;
line-height: 3.5;
text-transform: lowercase;
word-spacing: -0.3em;
}
#twitter-profiles li a:before {
content: '\0040';
}
Our Twitter links have been turned into block-level elements. The spacing between words has been zeroed, so that we can handle links that contain multiple words, thus making them appear as standard Twitter links (no spaces). Finally, we've used generated content to insert the at symbol just before the actual content of each link. By doing so, accessibility is no longer a problem. You can see this demo here.
In this post I'm going to show you how to create a Twitter header to be used with your tweets and how you can stylize it with CSS. You can reuse the following example in a significant variety of contexts. Let's start with the HTML markup:
<div id="tweets">
<h2><a href="http://www.twitter.com">Twitter</a></h2>
</div>
We have a container for our tweets and an heading element which, in turn, contains a link. Obviously you can change the link URL to make it point to your Twitter profile. The attached CSS code makes use of the following techniques:
#tweets {
margin: 0 auto;
padding: 2em 0;
width: 60%;
}
#tweets h2 {
margin: 0;
height: 3em;
background: #008eb9;
color: #fff;
position: relative;
-moz-border-radius: 6px;
border-radius: 6px;
}
#tweets h2 a {
display: block;
width: 130px;
height: 24px;
text-indent: -1000em;
background: url(twitter-header/twitter.gif) no-repeat;
position: absolute;
top: 1em;
left: 1em;
}
The heading element will create a contextual positioning using the declaration position: relative to allow us to correctly position the link element. The link element has a background image which will be shown instead of its text, that has been hidden using the text-indent property with a negative value. You can see the result here.
In my previous post I've outlined the inner HTML structure created by the Profile widget of Twitter. In this post I'm going to show you how to take advantage of this structure to stylize a Twitter widget with CSS. First, we need an HTML wrapper that will contain our widget. It is as follows:
<body>
<div id="tweets">
<!-- JavaScript here -->
</div>
</body>
The default appearance of such widget is shown below.
Now it's time to apply styles. Remember that we're dealing with JavaScript styles, so we need to override them:
#tweets {
width: 300px;
margin: 0 auto;
}
#tweets .twtr-widget,
#tweets .twtr-doc {
width: 100%;
height: auto;
}
#tweets .twtr-hd {
background: #d40;
color: #fff;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
font-family: Georgia, serif;
}
#tweets .twtr-hd *,
#tweets .twtr-hd h4 a {
background: #d40 !important;
}
#tweets .twtr-hd h3,
#tweets .twtr-hd h4 {
font-weight: normal;
text-align: center;
}
#tweets .twtr-hd h3 {
background: #fff !important;
color: #333 !important;
font-size: 1.5em !important;
padding: 0.2em !important;
-moz-border-radius: 3px;
border-radius: 3px;
}
#tweets .twtr-tweet {
background: #fff;
}
#tweets .twtr-tweet a:link,
#tweets .twtr-tweet a:visited,
#tweets .twtr-tweet a:hover {
color: #c40 !important;
}
#tweets .twtr-tweet .twtr-tweet-text {
border-bottom: 2px dashed #666 !important;
padding-bottom: 4px !important;
}
#tweets .twtr-tweet .twtr-tweet-text p {
color: #333 !important;
}
And this is the result:
As you can see, we made an abundant use of the !important statement to make sure that our styles will override the default ones.
In this post I'm going to outline the inner structure of a Twitter widget from the point of view of the DOM structure created by the JavaScript code. We're going to use the Profile widget, whose embedded code is shown below:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('yourusername').start();
This code generates a large amount of HTML elements. Most of them are presentational elements used to make the widget fit the page. They're as follows:
<div class="twtr-widget twtr-widget-profile" id="twtr-widget-1">
<div class="twtr-doc">
<div class="twtr-hd">
<a class="twtr-profile-img-anchor" href="yoururl">
<img class="twtr-profile-img" src="yourprofileimagepath">
</a>
<h3>Your Full Name</h3>
<h4><a href="yourhomepath">your Twitter username</a></h4>
</div>
<div class="twtr-bd">
<div class="twtr-timeline">
<div class="twtr-tweets">
<div class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-tweet-text">
<p><a href="yourhomepath">your username</a> your tweet.</p>
</div>
</div>
</div>
<!-- more tweets -->
</div>
<div class="twtr-ft">
<div>
<a href="http://www.twitter.com/">
<img src="widget logo path">
</a>
<span>
<a href="your home path">Join the conversation</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, we have a lot of CSS classes with the prefix twtr, so it won't be difficult to change the default layout of your widget by using CSS, provided that you respect cascade and specificity order.
Parsing a Twitter feed with jQuery requires two steps:
The proxy's code, written in PHP, is really simple:
<?php
header('Content-Type: text/xml');
$tweets = file_get_contents('http://twitter.com/statuses/user_timeline/120345723.rss');
echo $tweets;
?>
After this, we can use the $.get() method of jQuery to parse this file:
$(document).ready(function() {
$.get('tweets.php', function(data) {
var $items = $(data).find('item');
$items.each(function() {
var $item = $(this);
var $raw_title = $item.find('title').text();
var $title = $raw_title.replace('gabromanato:', '').replace(/http:.+/, '');
var $raw_date = $item.find('pubDate').text();
var $date = $raw_date.replace('+0000', '');
var $link = $item.find('link').text();
var html = $('<li></li>').html('<a href="'+$link+'">'+$title+'</a>'+ '<div class="pubdate">'+$date+'</div>');
html.appendTo('#tweets');
});
});
});
I did this because Ajax cannot fetch a resource located on another domain (this is called same domain policy), so we have to use a Proxy. You can see the final result here.