Share Feedback with Twitter and the Bit.ly API

Share Feedback with Twitter and the Bit.ly API

Regular blog readers probably notice the wide range of social media “Share this” links found on most sites. With everyone from CNN to ESPN integrating ways of sharing content, one of the most popular techniques is using a URL shortener to neaten up and condense the link.

Today we’re going to explore this idea of sharing content a little bit more. Sharing links to content is just one piece of the social media equation. Capturing the response to it is quite another.

Let’s get started:

What We’re Building

Share Feedback with Twitter

Today’s tutorial will walk through the creation of a customizable “Tweet this” link that integrates the Bit.ly API and Twitter updates. The goal will be to have a selectable menu of prefaces, and then tweet the preface and link accordingly. Here are some examples of possible end results:

  1. Reading: Article Name / Article Link
  2. I absolutely loved: Article Name / Article Link
  3. Made me think: Article Name / Article Link
  4. Completely disagree: Article Name / Article Link
  5. Article Name / Article Link

What’s the point?

This way a reader will be able to add some personality to the shared link, rather than sticking to a rigid “Currently Reading” preface like the one this blog is (currently) guilty of*. People respond to content differently, and this is a kind of system that helps them share it easily. If I found a post thought-provoking, I’d like to say so. On the flip side, you (as the site owner) will be able to see what kind of feedback people are giving about your content. Think of it like an indirect polling system.

I haven’t seen this kind of Twitter feedback system done anywhere else with blogs yet, but then again the internet is a big place. Now that we’ve all got our eyes on the same prize, let’s get introduced to the API’s we’ll be working with:

*For those wondering, yes, this will be part of the upcoming Build Internet theme update.

The Bit.ly API

The Bit.ly Dashboard

The Bit.ly Developer Tools allow you to take a URL and return the new shortened link. It sounds simple because it is. This also means that working with the API is surprisingly pleasant, and will most likely leave you feeling quite smart afterward.

In order to shorten links with this API, you will need an API key. This key will allow all shortened links to be automatically associated with the key’s account. One is automatically generated for you after registering a new account. No cost necessary. You will find this information listed under the “Accounts” tab of the Bit.ly dashboard once logged in. I will not be using a valid API key for this tutorial, so be sure to substitute your own in accordingly.

Automatic Shortening

David Walsh wrote up a nice PHP option for shortening links last Spring. It’s not the only way to access the API (e.g. JavaScript), but this method keeps account information private because the key is only visible server-side. His tutorial will be the basis for our Bit.ly integration.

Create a new PHP file for the shortening script. Mine will be called “shorten.php” for this tutorial. You will need to put in your own Bit.ly API information where noted in the script.

I’ve copied a slightly modified code below for simplicity sake, but please refer back to his article for any further explanations or credit. The only difference is that the original echo statement is removed upon successful shortening. After running this script, we end up with a shortened version of the original URL stored in the $short variable.

The Page Setup

Create a new PHP file and paste in the code below. Notice that we are loading in the shorten.php script created in the last step at the top of the page. This area is also responsible for specifying the page title.

Composing the Tweet with jQuery

jQuery will be responsible for taking all of the pieces and putting them into a functional link. Passing the $short variable from PHP to jQuery is surprisingly simple thanks to a well-placed echo statement. The code below should be added into the script tag created in the previous step.

There’s a few main things to be aware of in the script above. The variables for short_url and post_title are assigned based on the contents of the PHP counterparts. The user_feedback variable will contain the “feedback” value (e.g. Love it) and the tweet variable contains the compiled result for Twitter.

There are two functions in charge of everything. The getFeedback function is responsible for updating the feedback value when the page initially loads and when the select box is changed. The composeTweet function combines the contents of all variables into a single tweet. Once the tweet is composed, the relevant “Tweet This” link (in next section) gets updated accordingly.

Simple Posting with Twitter

A sample tweet
This is the easy part. Using a constructed URL, we’ll open Twitter in new window with the status box automatically filled. The user will need to submit the tweet template from Twitter before it is posted. Since we’ve already written the jQuery code responsible for setting the URL, the only thing left to do is create the target “Tweet This” link.

Make sure this link is in your final page result:

Keep in mind that once the page is loaded, the jQuery script will overwrite the default link destination with the compiled tweet. I’ve set the target page to open in a new window for simplicity sake.

What about the API?

If you haven’t already been introduced to it, the Twitter API is wonderful. We won’t be using it for this tutorial, but I highly recommend spending a spare hour or two exploring options when you get the chance.

The API can do more than just fill in the status box, but requires a few extra steps. If you are interested in creating automatic tweets, you will need to have the user authenticate your site to their Twitter account. This would give you the ability to post to user’s accounts without having to open a new window for Twitter. If your site relies heavily on social media sharing, this might be the best option to explore. Depending on the response to this tutorial, an introduction to the API will probably find its way into an upcoming post.

Going Further

Depending on how long your post titles are, it might be a good idea to include a hashtag to identify your site. Implementing this would be as simple as adding another variable to the link construction in jQuery. If you got lost at any step of the way, I recommend downloading the project source files below to see the results in action. Remember that you will need to insert your Bit.ly account information before running the page successfully.

WordPress Integration

There’s also a fair amount of blog integration that can happen with WordPress template tags. I’ve commented in a few places where it might make sense to insert WordPress defaults. With a little luck and planning, you’ll be able to automate a similar system into your next theme update.

Have I missed anything? Thought of any cool applications for a feedback system like this? Be sure to share any comments or questions below.

Posted Friday, February 19th, 2010 · Back to Top

SPONSOR

Add Comment

38 Comments 22 Mentions

  1. Design Informer Author Editor

    WOW! This is awesome Zach. Really something that I need to look into. Keep up the great work. You guys are always coming up with these excellent tutorials.

    ·

  2. Armin C. Author Editor

    I like it. My inputs:
    1. In the demo, I think you made the background of the options red by accident?
    2. How about adding a option for a totally custom input?
    That way users can still save time with premade comments and if they want even more personalisation they can input their own comment, quicker than usual.

    All in all a very nice tutorial :)

    ·

  3. Codesquid Author Editor

    This is a neat idea! A really simple little trick to help user give more meaningful feedback!

    ·

  4. Michal Kozak Author Editor

    Nice idea. Kinda strange nobody thought of that this way before.

    ·

  5. Bart Author Editor

    Well this seems to be a good solution but i have noticed that many providers don’t allow to read files from different servers as the request comes from.

    so instead of file_get_contents(); i recommend to use the curl functions for getting the response from the bit.ly API..

    here is my solution:
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $bitly);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_HEADER, 0);

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

    just replace line 21 in the make_bitly_url function with this code to make it work.

    ·

  6. Kawsar Ali Author Editor

    Sweet nice one. Should be useful

    Also, you guys might want to include the article title and wordpress short url for the tweet button at the bottom of each post . Right now it just says “Currently reading”.

    ·

  7. Johnny Author Editor

    Really good post, it’s nice to get an insight into how these sort of things work. :)

    ·

  8. Martin Leblanc Author Editor

    This is a fantastic idea.

    ·

  9. mahmoud kamal Author Editor

    good idea Zach Dunn ;)

    ·

  10. liam Author Editor

    This is a really useful idea and well pulled off. Very nice.

    ·

  11. Monica Author Editor

    thanks for the tutorial. the bitly api is really user-friendly, i just never thought of using it in this way.

    ·

  12. Jordan Walker Author Editor

    That is a really neat tool that can be directly implemented. Great work!

    ·

  13. Amberly | Web Designer Author Editor

    This is awesome.. thanks for sharing..

    ·

  14. çiçekçi Author Editor

    hi

    This is a really useful idea and well pulled off.
    thanks

    ·

  15. Smashing Share Author Editor

    very nice one. i like it

    ·

  16. Josh Author Editor

    Thanks for putting this together Zach. Very nice and an inspiring change for the usual ones you see around. Especially with the select box options idea

    ·

  17. Ian Evans Author Editor

    We have the rare title that is over 140 characters…how does the script handle that? Thanks!

    ·

    • Zach Dunn Author Editor

      @Ian

      The script doesn’t handle this currently. Tweets that are over 140 characters will not be transferred into Twitter. I recommend you throw in a character counter or have a short version ready for the tweet version. You could save it as post metadata.

      ·

  18. sigara bırakma merkezi Author Editor

    Really good selections. I like the Sunset Bees one, so warm and summery.

    ·

  19. John Media@dedicated server Author Editor

    Quite a nice tutorial I did learned a lot about using this in my WP site. I’m quite happy you’ve included in some codes and screenies thanks

    ·

  20. Kulp Author Editor

    Thank You.Good Blog

    ·

  21. Tramadol Author Editor

    How about adding a option for a totally custom input?
    That way users can still save time with premade comments and if they want even more personalisation they can input their own comment.

    ·

  22. Rich Author Editor

    Hi, I like this, but, how would you use it on different pages? The url in the shorten.php is set, so on a dynamic site with posts to ‘like’ how do you use the button then?

    ·

    • Zach Dunn Author Editor

      The link is set inside the shorten.php for demonstration purposes only. You can substitute that with the current URL via PHP as needed.

      ·

  23. Rich Author Editor

    Hi, how do you use this to ‘like’ different pages? The URL is ‘set’ in the shorten.php , how do you tell the shorten.php which page URL the user has liked ?

    ·

  24. tütüne son Author Editor

    Thank you, very nice. However, some files can not be displayed on your website, be aware of.

    ·

  25. Ajans Author Editor

    Thank you, very nice

    ·

  26. arapça tercüme Author Editor

    Thank you nice info

    ·

  27. leandro Author Editor

    Great post, it is possible to do the same with Facebook, to upload a comment with a short url
    Thanks
    leandro

    ·

  28. Serra Author Editor

    Thank you admin nice article good blog

    ·

  29. web design uae Author Editor

    Share Feedback with Twitter and the Bit.ly API – Awesome info.Thanks for the share.

    ·

  30. tütüne son Author Editor

    Good website.i love this post.Thank you

    ·

  31. Megavideo Author Editor

    Thank you for your website post. Manley and I happen to be saving to buy a new book on this matter and your article has made people like us to save money. Your thinking really responded all our questions. In fact, more than what we had recognized prior to when we stumbled on your wonderful blog. My partner and i no longer have doubts and also a troubled mind because you truly attended to all of our needs here. Thanks

    ·

  32. Felipe Cozadd Author Editor

    It is really a nice and useful piece of info. I’m glad that you shared this helpful information with us. Please keep us up to date like this. Thank you for sharing.

    ·

  33. Beats by dr dre cheap Author Editor

    I found this is an educational and interesting publication, so I think it is very useful and knowledgeable. Thank you for the efforts you have made in writing this submission. I am hoping the analogous best work from you next time as well. practically your creative writing ability has inspired me.

    ·

  34. atteroist Author Editor

    Another separate index compiled just by HSBC coupled with geared more to make sure you Chinese export activity fell to help 48.4 from May, down right from 49.3. HSBC said this particular decline reflected weakness throughout the 2 domestic and consequently export markets. [url=http://www.longchampstorenyc.com]longchamps[/url]
    The actual government and therefore Chinese economists close in which to this tool may have played down the main scope concerning any effort which will resuscitate unquestionably the economy, but a very spate to do with upcoming infrastructure projects and furthermore subsidies regarding consumer auto purchases last month indicate any kind of stimulus program already has been underway. [url=http://www.longchampstorenyc.com]longchamps[/url]
    A definite spokesman declined to help you say those parties had produced i would say the approaches but, given i would say the Kremlin’s desire of exert influence over unquestionably the oil sector, suspicion should be likely to help fall on state-backed players untold as Rosneft ROSNG.UL and furthermore Gazprom
    http://www.longchampstorenyc.com

    ·

  35. notebook tamiri Author Editor

    thank you very much nice article

    ·

  36. commercial electricity rates Author Editor

    This is really attention-grabbing, You’re an overly skilled blogger.
    I’ve joined your feed and look forward to seeking extra of your fantastic post.

    Also, I’ve shared your website in my social networks

    ·

 

Build Internet by One Mighty Roar. Since 2008.