Advertisement
Creative Coding

Using Bitly URLs in WordPress and use them with Twitter and GooglePlus Scripts

by

So you want to use your bitly account with your WordPress based website? Well that’s really simple. All you need is to pay attention and follow the steps accordingly in the following tutorial!

When bitly was introduced most of the developers and users were not comfortable using it. Later on as the World Wide Web developed more, sites like Twitter, Facebook and YouTube started to use the same concept. Now Google Plus even supports it.

In this article you will be learning an easy and useful method of adeptly connecting your bitly account with your WordPress website or blog, and then use your bitly account to generate short urls for “Tweet” and “Share” buttons. This task is really simple and I use it on my blog as well and the results are quite impressive. Best of luck trying it out and if you face any problem, do leave your questions in the comments section below.


Step 1 Preparing The Code

Login to your bitly account. If you don’t have one, it takes only a minute to setup your account. After logging into your account, go to the settings page, scroll down almost half the way and copy your API. We’ll be using this in a minute or so.


Step 2.1 Modifying Your functions.php

Copy the code below and paste it in your functions file. (Although the code is straightforward, I have added comments in the code so as to make it easier to understand).


//automatically create bit.ly url for wordpress widgets
function bitly()
{
	//login information
	$url = get_permalink();  //for wordpress permalink
	$login = 'USERNAME-HERE';	//your bit.ly login
	$apikey = 'API-HERE'; //add your bit.ly API
	$format = 'json';	//choose between json or xml
	$version = '2.0.1';
	//generate the URL
	$bitly = 'http://api.bit.ly/shorten?version='.$version.'&longUrl='.urlencode($url).'&login='.$login.'&apiKey='.$apikey.'&format='.$format;

	//fetch url
	$response = file_get_contents($bitly);
//for json formating
	if(strtolower($format) == 'json')
	{
		$json = @json_decode($response,true);
		echo $json['results'][$url]['shortUrl'];
	}
	else //for xml formatting
	{
		$xml = simplexml_load_string($response);
		echo 'http://bit.ly/'.$xml->results->nodeKeyVal->hash;
	}
}

Step 2.2 Writing a Test post

Now, enter your username and paste your API in the place given. Upload your functions.php file in your theme folder. Now write a test post in html mode and paste this

<?php bitly(); ?>

in the content region. Go to the published post and see whether the link is bitly redirected URL or not. If not then check your username and bitly API in the functions file again.


Step 3 Adding Twitter and +1 buttons

Now you are familiar with the code and how to use this, let’s benefit from the code and see some examples for inspiration and encouragement. Below are examples of this code being used with Twitter and Google Plus that I use on my blog.

The first one is of twitter and the code shows the size of the button and the links to suggested people.


<a href="http://twitter.com/share?url=<?php echo urlencode( bitly()); ?>&counturl=<?php urlencode(the_permalink()); ?>" class="twitter-share-button" data-count="horizontal" data-via="USERNAME-HERE">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

You can copy the above code or you can go to Twitter and design the code as you like. Remember to change the “data-via” type. Notice the urlencode function is passed the newly created bitly function.

For Google Plus, copy the code below. If you want a more customized code, then go to Google+ and design the +1 button as per your liking. Notice how I have changed the code to incorporate bitly function.


<g:plusone size="medium" href="<? bitly(); ?>"></g:plusone>

Step 4 Usage

Now that you have edited and customized the codes, paste the edited code in the loop of your wordpress file or you can also paste it in single.php right after the meta() tag.

Now when you’ll click on the Tweet or +1 button, you will get the bitly URL. Happy Tweeting!


Conclusion

So what is the use of these bitly urls?

  • First, you can easily monitor the your bitly links from your bitly account. It displays the number of times your link was visited.
  • Second, the shortened URL can easily be tweeted and +1 by your followers and readers alike.
  • Third you can easily send the shortened links to your friends and others via SMS and email. These shortened urls look elegant and do not clutter the place in emails and you can easily send these to corporate and the like.
Related Posts
  • Code
    Web Development
    Securely Handling User's Login CredentialsSecure wide retina preview
    Consider the following tips on how to properly secure your user's login credentials.Read More…
  • Computer Skills
    App Training
    PopClip: Scripting ExtensionsPopclip400
    PopClip is a great utility program that, once you get used to it, is very hard to live without. This tutorial is going to show how to write a scripting extension by making an example extension.Read More…
  • Code
    Plugins
    Communicating With the WordPress.org Plugin APIWordpressdotorg plugin api border 400
    Over the last few weeks I have been wondering on how to possibly pull data about my plugins hosted on WordPress.org and display it on my website. The first thing that came to mind was "Web Scrapping" but quite frankly this is a lot of work, feels like going back in time, and is not something a good web citizen should do. In some cases, it could be illegal.Read More…
  • Code
    Creative Coding
    A Look at the WordPress HTTP API: A Practical Example of wp_remote_getDiagram http api
    In the last article in this series, we took a look at the PHP functions that are available for making remote requests. Specifically, we reviewed: file_get_contents cURL And we also discussed the WordPress function wp_remote_get. In this article, we're going to put the wp_remote_get to work. This function is part of the HTTP API - to practical use by using it to retrieve the following two things: The number of followers we have on Twitter Our most recent Tweet The nice thing is that we won't need to use any OAuth or authentication mechanisms, and we'll only need to take advantage of Twitter responses and PHP's JSON functionality. So in this article, we're going to take a practical look at how to do exactly this, then we'll end the series reviewing all of the information that wp_remote_get returns so that we'll know how to properly handle it in future work.Read More…
  • Code
    PHP
    How to Setup Recurring PaymentsSetup recurring payments retina preview
    It's likely that, at some point, you'll want to implement recurring or subscription payments for a SaaS or other service. Thankfully, PayPal offers the tools we need to implement a fully integrated subscription payment solution.Read More…
  • Computer Skills
    Automation
    Automating Tasks With ServicesAutomator400
    If you’ve used a Mac for any length of time, you’ve no doubt encountered the services menu at some point, and you’ve probably wondered to yourself "just what is that menu for?" Well, in this tutorial, we’re going to decipher the mystery of the services menu, and we’ll see just how useful services can be by creating one of our very own that we’ll be able to use whenever we need to replace a long, ungainly URL with a shortened one.Read More…