How to make links in your WordPress Twitter widget clickable

When Twitter changed API to 2.0 and disabled the old one, we adapted to it. But with the adaptation comes small problem – you can gain the tweets, but only as a plain text, without already prepared and existing nice links to your profiles, hashtags and linkify the content of the twitter widget itself. I made a screenshots for better imagining this issue:

tweet with links

Tweet with links

So above is a standard tweet from twitter, which has all the nice links and stuff. Below you can see this very same tweet, just gathered from Twitter API in our Milo – Responsive and Multipurpose WordPress Theme


Plain text tweet – without linkification

Types of linkes in tweet

  • Twitter Username – always starts with “@”, and it should point to http://www.twitter.com/USERNAME
  • Hashtag – always starts with “#” and should point to http://www.twitter.com/hashtag/HASHTAG_NAME
  • Standard link – starting with http, https, www and point to the original address of the link

Regular expression for linkify username in tweet

This regexp makes the job:

$text = preg_replace('/(?<=^|\s)@([a-z0-9_]+)/i',
				'<a href="http://www.twitter.com/$1">@$1</a>',

Regular expression for linkify hashtag in tweet

For hashtag is the regexp pretty different

$text = preg_replace('/(#\w+)/i',
				'<a href="http://www.twitter.com/hashtag/##_replace_#$1">$1</a>',

Regular expression for linkify normal links in tweet

The true fun starts, when you need to convert all strings starting “http, https and www” and having structure of link to actual website link with standard “a” tag. We will be using the “preg_replace_callback” function for finding the links and replacing the links in our WordPress widget. I extracted these two functions from our OOP framework, so it wont work for you out of the but you will have to change the method names.

This is the first method, which actually finds the links based on regexp, and they are passed into callback

private function _linkify( $text ) {
	$pattern = '(?xi)\b((?:https?://|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'".,<>?]))';
	return preg_replace_callback("#$pattern#i", array($this,'_linkify_helper'), $text);

And here goes the callback:

public function _linkify_helper($matches){
	$input = $matches[0];
	$url = preg_match('!^https?://!i', $input) ? $input : "http://$input";
	return '<a href="' . $url . '" rel="nofollow" target="_blank">' . "$input</a>";

So this is basically how the tweet looks like, after passing it trough the regular expressions, written above:


Tweet with links created by regular expression

Leave a Reply

porno turbanli porno turk porno gay porno mobil porno anal porno