“Tweet This” and URL shortening API

Alright, you’ve all seen those CRAZY “Tweet This” buttons on so many websites, (mainly wordpress). You may have also noticed that some just send you to twitter and you have to manually input the twitter message. Well, how about we just make a button that will automate all this for us?

I really do love it when I click on that button and twitter pops up with a pre-written message like “Check out this site : URL GOES HERE” or “Crazy CSS tutorial on backgrounds. Check it out: URL GOES HERE”, it makes it much easier for me to share my finds. Here’s a great demo.

Okay, I’m working on a new website and it has various posts on it that I want the readers to be able to automatically share on twitter. I also want to include a backlink so that their twitter followers can visit the actual article. Basically, here’s a tutorial on shortening URLs using API and for creating a twitter button.

URL shortening

As you may know, there are tons of URL shortening services. Most, including bit.ly and tinyurl.com support API services which basically means, you can use PHP (and AJAX) in order to use their services on another server. That’s BASICALLY what it means. I’m not a master of this. Bit.ly requires an account so I won’t be getting into that. I don’t want my account to be spammed with a ton of different links. But, if you want to keep track of how many people clicked and posted your link, you are more than welcome to read a tutorial on it elsewhere.

I’m not too big on tinyurl.com anymore because it requires way too many characters. And for twitter use, it’s basically useless so I browsed around and found to.ly which has really basic API info already posted. Let me copy it real quick:

function CompressURL($url) {

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_URL, "http://to.ly/api.php?longurl=".urlencode($url));
  curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
  curl_setopt($ch, CURLOPT_HEADER, 0);

  $shorturl = curl_exec ($ch);
  curl_close ($ch);

  return $shorturl;

}

Add this function to your function.php, if you use an external function list (use require() to add it to your site), or just add this function in your header on your site so that whenever you call upon it later, it will be at your disposal. Now, let’s get the URL of the site you’re on. Let’s say you have a dynamic page and don’t feel like manually writing each separate link. We can use the $_SERVER variable for that. A combination actually:

echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].$_SERVER['QUERY_STRING'];

This will echo out the whole URL, including any GET statements you may have entered. If you don’t want those statements, erase the last $_SERVER variable. Okay, so let’s put it all together to shorten the link using the previous function:

$permalink = "http://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].$_SERVER['QUERY_STRING'];
$url = CompressURL ("$permalink");

Now that we have the compressed URL, let’s move on to the tweet button.

Tweet This Button!

Well, go out and find some great twitter icon. Or make your own. It’s easy. You go into photoshop and make a 150 x 50 px rectangle and write twitter in it. That’s not what this tutorial is about.
Twitter has an easy-to-use API (Is it even API?).

http://twitter.com/home?status= MESSAGE GOES HERE

So there goes the message. Very easy, no? Now, here lies the problem. What kind of message do you want? You could use different functions and variables that describe each page on your site. If you set them manually (in the META tag), use this instead so that the description is already stored for later use. In my newest site, I used the actual content of the page (a quote) for the message:

$description = "An article about php scripting and creating a simple tweet this button.";
echo $description

Twitter has a character limit of one forty, right? We can take care of that too. “substr()” is a function that will allow you to cut up your description. It works like this: substr($string, begin cut, end cut). I use a 100 character cut off:

$twittermsg = substr($description, 0, 100);

$twittermsg .= "...more on".$url;

The message is complete. A hundred character message ending with “…more on URL”. Finally, the button and link:

<a href="http://twitter.com/home?status=<?php echo $twittermsg;?>" target="_blank"> <img src="pictures/images/twitter_button.png" title="Tweet it!" onmouseover="this.src='pictures/images/twitter_button_hover.png'"
onmouseout="this.src='pictures/images/twitter_button.png'" /></a>

The “onmouseover” and “onmouseout” are used for a nice hover effect (onmouseover will be the hoveved, and onmouseout is the non-hovered). Using CSS would be a literal pain because you’d have to create a clickable div or a span…display none. Well, just trust me, this is MUCH easier.

I hope you enjoyed this short tutorial!

Check out my next tutorial for bit.ly API!