How To: Sociable WP Plugin With Auto TinyURL Or Bit.ly Shortening

PUBLISHED ON

May 18th, 2009

DISCUSS

Sociable is a plugin which adds social media buttons to your posts, and does so easily, and beautifully. This plugin created by Joost de Valk, automatically add links to your favorite social bookmarking sites on your posts, pages and in your RSS feed. You can choose from 99 different social bookmarking sites! It supports TwitThis also, but it doesn’t create short urls for TwitThis. In this article I will show You how to create short urls for Sociable Wordpress plugin.

Plugin:

Sociable – Social Bookmarking for WordPress

Go to Plugin Homepage

Problem:

When using TwittThis, this plugin use full page or post url. Twitter only allows you 140 characters for you to get your message across. Since you are promoting a link, you will want all the room you can get for “the pitch.” Some links can be rather large(even 140 characters themselves).

Solution:

Solution to this is a URL shortner. A URL shortner will take your existing link and convert it into a nice, clean package that is far shorter in terms of characters.

How to:

First of all in your wordpress theme directory you should have a functions.php file which contains common functions to be used inside your themes. In case you don’t have one, create a file called functions.php inside your favorite wordpress theme directory.

1
2
3

<?php
 
?>

TinyURL

Open the functions.php file and add followig function which will allow you to create TinyURL.com urls on demand.

// Ondemand function to generate tinyurl
function getTinyUrl($url) {  
     $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);  
     return $tinyurl;  
}

save and close the functions.php file.

Now we have function which will create TinyURL for our post/page.
Next step is find sociable.php which is located in wp-content\plugins\sociable directory.
Open sociable.php and find the following block:

// Load the post's data
	$blogname 	= urlencode(get_bloginfo('name')." ".get_bloginfo('description'));
	$post 		= $wp_query->post;
 
	$excerpt	= urlencode(strip_tags(strip_shortcodes($post->post_excerpt)));
	if ($excerpt == "") {
		$excerpt = urlencode(substr(strip_tags(strip_shortcodes($post->post_content)),0,250));
	}
	$excerpt	= str_replace('+','%20',$excerpt);
 
	$permalink 	= urlencode(get_permalink($post->ID));
 
	$title 		= urlencode($post->post_title);
	$title 		= str_replace('+','%20',$title);
 
	$rss 		= urlencode(get_bloginfo('ref_url'));
 
	$html .= "\n<div class=\"sociable\">\n";
 
	$tagline = get_option("sociable_tagline");
	if ($tagline != "") {
		$html .= "<div class=\"sociable_tagline\">\n";
		$html .= stripslashes($tagline);
		$html .= "\n</div>";
	}
 
	$html .= "\n<ul>\n";

just below

1	$permalink = urlencode(get_permalink($post->ID));

add next line:

1	$turl = getTinyUrl(get_permalink($post->ID));

now you should have something like this:

// Load the post's data
	$blogname 	= urlencode(get_bloginfo('name')." ".get_bloginfo('description'));
	$post 		= $wp_query->post;
 
	$excerpt	= urlencode(strip_tags(strip_shortcodes($post->post_excerpt)));
	if ($excerpt == "") {
		$excerpt = urlencode(substr(strip_tags(strip_shortcodes($post->post_content)),0,250));
	}
	$excerpt	= str_replace('+','%20',$excerpt);
 
	$permalink 	= urlencode(get_permalink($post->ID));
 
	$turl = getTinyUrl(get_permalink($post->ID));
 
	$title 		= urlencode($post->post_title);
	$title 		= str_replace('+','%20',$title);
 
	$rss 		= urlencode(get_bloginfo('ref_url'));
 
	$html .= "\n<div class=\"sociable\">\n";
 
	$tagline = get_option("sociable_tagline");
	if ($tagline != "") {
		$html .= "<div class=\"sociable_tagline\">\n";
		$html .= stripslashes($tagline);
		$html .= "\n</div>";
	}
 
	$html .= "\n<ul>\n";

Next, in sociable.php find

$url = $site['url'];
$url = str_replace('PERMALINK', $permalink, $url);
$url = str_replace('TITLE', $title, $url);
$url = str_replace('RSS', $rss, $url);
$url = str_replace('BLOGNAME', $blogname, $url);
$url = str_replace('EXCERPT', $excerpt, $url);

and add at the end next line

1	$url = str_replace('TINY', $turl, $url);

So now you should have this:

$url = $site['url'];
$url = str_replace('PERMALINK', $permalink, $url);
$url = str_replace('TITLE', $title, $url);
$url = str_replace('RSS', $rss, $url);
$url = str_replace('BLOGNAME', $blogname, $url);
$url = str_replace('EXCERPT', $excerpt, $url);
$url = str_replace('TINY', $turl, $url);

Next find

	'TwitThis' => Array(
		'favicon' => 'twitter.png',
		'url' => 'http://twitter.com/home?status=PERMALINK',
	),

and change it to

	'TwitThis' => Array(
		'favicon' => 'twitter.png',
		'url' => 'http://twitter.com/home?status=TINY',
	),

Save sociable.php.
Voila! Now we have Sociable Wordpress Plugin wich generates short url via TinyURL for TwitThis Button.

Bit.ly

One of the more popular URL shortening services is Bit.ly.
Note that Bit.ly requires you to sign up for an account. Once you have an account, you may attain your login and URL information.
Open the functions.php file and add followig function which will allow you to create dynamic Bit.ly urls on demand.

// Ondemand function to generate dynamic bit.ly urls
function getBitlyUrl($url) {  
    // fill up this 2 lines below with your login and api key
    $bitlylogin = 'yourlogin';
    $bitlyapikey= 'yourapikey';
 
 
    // you dont need to change below this line
    $bitlyurl = file_get_contents("http://api.bit.ly/shorten?version=2.0.1&longUrl=".$url."&login=".$bitlylogin."&apiKey=".$bitlyapikey);  
 
    $bitlycontent = json_decode($bitlyurl,true);
 
    $bitlyerror = $bitlycontent["errorCode"];
 
    if ($bitlyerror == 0){
        $bitlyurl = $bitlycontent["results"][$url]["shortUrl"];
    }
    else $bitlyurl = $url;
 
    return $bitlyurl;
}

save and close the functions.php file.
Now we have function wich will create dynamic Bit.ly urls for our post/page.

Next step is find sociable.php which is located in wp-content\plugins\sociable directory.
Open sociable.php and find the following block:

// Load the post's data
	$blogname 	= urlencode(get_bloginfo('name')." ".get_bloginfo('description'));
	$post 		= $wp_query->post;
 
	$excerpt	= urlencode(strip_tags(strip_shortcodes($post->post_excerpt)));
	if ($excerpt == "") {
		$excerpt = urlencode(substr(strip_tags(strip_shortcodes($post->post_content)),0,250));
	}
	$excerpt	= str_replace('+','%20',$excerpt);
 
	$permalink 	= urlencode(get_permalink($post->ID));
 
	$title 		= urlencode($post->post_title);
	$title 		= str_replace('+','%20',$title);
 
	$rss 		= urlencode(get_bloginfo('ref_url'));
 
	$html .= "\n<div class=\"sociable\">\n";
 
	$tagline = get_option("sociable_tagline");
	if ($tagline != "") {
		$html .= "<div class=\"sociable_tagline\">\n";
		$html .= stripslashes($tagline);
		$html .= "\n</div>";
	}
 
	$html .= "\n<ul>\n";

just below

1	$permalink = urlencode(get_permalink($post->ID));

add next line:

1	$burl = getBitlyUrl(get_permalink($post->ID));

now you should have something like this:

// Load the post's data
	$blogname 	= urlencode(get_bloginfo('name')." ".get_bloginfo('description'));
	$post 		= $wp_query->post;
 
	$excerpt	= urlencode(strip_tags(strip_shortcodes($post->post_excerpt)));
	if ($excerpt == "") {
		$excerpt = urlencode(substr(strip_tags(strip_shortcodes($post->post_content)),0,250));
	}
	$excerpt	= str_replace('+','%20',$excerpt);
 
	$permalink 	= urlencode(get_permalink($post->ID));
 
	$burl = getBitlyUrl(get_permalink($post->ID));
 
	$title 		= urlencode($post->post_title);
	$title 		= str_replace('+','%20',$title);
 
	$rss 		= urlencode(get_bloginfo('ref_url'));
 
	$html .= "\n<div class=\"sociable\">\n";
 
	$tagline = get_option("sociable_tagline");
	if ($tagline != "") {
		$html .= "<div class=\"sociable_tagline\">\n";
		$html .= stripslashes($tagline);
		$html .= "\n</div>";
	}
 
	$html .= "\n<ul>\n";

Next, in sociable.php find

$url = $site['url'];
$url = str_replace('PERMALINK', $permalink, $url);
$url = str_replace('TITLE', $title, $url);
$url = str_replace('RSS', $rss, $url);
$url = str_replace('BLOGNAME', $blogname, $url);
$url = str_replace('EXCERPT', $excerpt, $url);

and add at the end next line

1	$url = str_replace('BITLY', $burl, $url);

So now you should have this:

$url = $site['url'];
$url = str_replace('PERMALINK', $permalink, $url);
$url = str_replace('TITLE', $title, $url);
$url = str_replace('RSS', $rss, $url);
$url = str_replace('BLOGNAME', $blogname, $url);
$url = str_replace('EXCERPT', $excerpt, $url);
$url = str_replace('BITLY', $burl, $url);

Next find

	'TwitThis' => Array(
		'favicon' => 'twitter.png',
		'url' => 'http://twitter.com/home?status=PERMALINK',
	),

and change it to

	'TwitThis' => Array(
		'favicon' => 'twitter.png',
		'url' => 'http://twitter.com/home?status=BITLY',
	),

Save sociable.php.
So now we have Sociable Wordpress Plugin wich generates short url via Bit.ly for TwitThis Button.

At The End

With little tips, tricks and code hacks we have beautiful Sociable Wordpress plugin that supports short urls!
I hope you enjoyed it, and if you did please leave a comment below!

Tell Us What You Think

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

Enjoy This Post?

About Nikola Lazarevic

Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

6 Comments So Far

You’re genius! Works great. Thank a lot for the clear tut. Bye

Reply
liliansi
20. Jun. 2009.
Thanks for that function, it’s very usefull.

Reply
Krystian
24. Jun. 2009.
Exactly what I needed… works exactly as advertised. Impressively described with step-by-step so clear that even my grandmother could have hacked this. Well-done, mate… well-done!

Reply
SwitzerBaden
20. Jul. 2009.
Hmmm… but there is one large issue using this solution. if you have 10 posts on the main page, this bit.ly-ize twitter link hack will add 11+ seconds to your page load time, as the page loop waits for each permalink to be shortened. A better solution would be to shorten the link only when the needed. Any thoughts?

Reply
SwitzerBaden
20. Jul. 2009.
ok, I solved this issue by creating a file called bit2twit.php and passing the permalink to it like so:

'Twitter' => Array( 'favicon' => 'twitter.png', 'awesm_channel' => 'twitter', 'url' => 'bit2twit.php?url=PERMALINK', ),

then, my bit2twit.php file makes the conversion with your getBitlyUrl function, and then redirects the header location to twitter like so:

$url = $_GET['url']; // Ondemand function to generate dynamic bit.ly urls function getBitlyUrl($url) { // fill up this 2 lines below with your login and api key $bitlylogin = 'switzerbaden'; $bitlyapikey= 'R_e06c3df4d1629229278fc355fff1568e';
// you dont need to change below this line $bitlyurl = file_get_contents('http://api.bit.ly/shorten?version=2.0.1&longUrl='.$url.'&login='.$bitlylogin.'&apiKey='.$bitlyapikey); $bitlycontent = json_decode($bitlyurl,true); $bitlyerror = $bitlycontent["errorCode"]; if ($bitlyerror == 0){ $bitlyurl = $bitlycontent["results"][$url]["shortUrl"]; } else $bitlyurl = $url; return $bitlyurl; }
header('Location: http://twitter.com/home?status='.getBitlyUrl($url));

greatly reduced my home page load time by 11 seconds.

Reply
SwitzerBaden
20. Jul. 2009.
Thanks

Reply
Luã de Souza
19. Jul. 2010.