Advertisement
JavaScript & AJAX

How to Create a Helpful Plugin With Twitter Anywhere

by

Twitter Anywhere is a "one-script-include" solution from Twitter to bring the power of their communication platform to your website. We'll be building a small jQuery script that utilizes Twitter Anywhere for your users.


Step 1: Registering Your Application

The first step in the Twitter Anywhere process is to create an application. The registration can be found here. The only field that might cause any level of confusion is the Callback URL. This is to be used when Twitter authenticates the user; it specifies where on your site you want to send the authenticated user back to. For most smaller applications, your website's homepage will likely be sufficient, however, for larger applications, you may want to direct the user back to an area that serves appropriate content for authenticated users.

One important setting worth noting is the Application Type. Now this won't appear in the Application creation process, but will be available by going to your apps, finding your new application, clicking the Settings tab next to Details, and changing the radio button from "Read Only" to "Read and Write" in the Application Type sections.

To be honest, it's embarrassing for me to admit how much time went by, while debugging, before I decided to look here!


Step 2: What's the Script Going to Do?

Using Twitter Anywhere, we're going to concentrate today on the Tweet Box feature. The Tweet Box provides excellent transparency between your website and Twitter, allowing users to tweet directly to their account without leaving your website, and, more importantly, continuing to interact with your content.

The jQuery script we're going to write today could easily be adapted into a jQuery or WordPress plugin. The script will detect the user highlighting a piece of text in say, your blog post, and display a "Tweet this" button. Once the user clicks this button, the script will take the highlighted text and call the Tweet Box function from Twitter Anywhere, inserting the highlighted text as the tweet body.

The user can then either leave the tweet as it is - with a link back to the page they're on - or they can edit any part of it before tweeting.

Security is vital here; the slightest bit of misuse, and the user will revoke access in their settings - and not likely return to give your application a second chance. So, always give the user a preview of exactly what will be posted to their account; it's generally a good practice to make them press the button before processing the tweet.

Tweeting Direct Image Links

The script will also allow for the user to click on any of your images, and achieve the same Tweet Box effect. In this particular instance, the tweet will reference the direct URL to the image.


Step 3: Setting Up the JavaScript Files

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="http://platform.twitter.com/anywhere.js?id=[API-KEY]&v=1"></script>
<script src="http://path-to-script/copybot/script.js"></script>

As you can see above, we need to include a few JavaScript files to make our plugin function correctly.

  • We'll be using jQuery for its ease of use and nice selector engine.
  • We'll use jQuery UI for basic user interaction; when the Tweet Box pops up, we can allow the user to drag it around with their mouse.

  • The next JavaScript include is the Twitter Anywhere file itself. Luckily for us, it's fairly lightweight, coming in at just over 7KB. As you can see, you'll need to supply your API key, which can be found in the Settings of the App page from earlier in this article.
  • The last file is our own script; this will hold all of our jQuery code and Tweet Box function calls.

Step 4: Beginning Our Code

$(document).ready(function(){

});

We'll start in our JavaScript file by containing everything within jQuery's document ready method. Everything in here will fire after the DOM has fully loaded, saving us from any potential errors.

function getSelectionText() {
    var text = "";

    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

The above piece of code will allow you to grab the highlighted text from the user once they have selected it. This code is a fairly standard function, and can be found (and documented) all over the internet.

$('.post').mouseup(function(){
	$('#tweetThis').show();
});

We can then begin to interact with the user with a mouse up event. In this particular page of HTML, I have created a div with a class of 'post'. For the tutorial, we are simply targeting this div so that the code doesn't run every time the user mouses up on the page. Once the user mouses up within this div, we will display a button to the user that allows them to tweet the highlighted text.

$("#anywhere").draggable();

This method uses jQuery UI to allow the user to drag the Tweet Box around at their leisure. We don't pass any options to it as the default functionality will suffice for what we're doing.

$('#tweetThis').click(function(){
		$('#tbox').empty();
		var text = getSelectionText();

		if(text != ''){
			twttr.anywhere(function (T) {
			    T("#tbox").tweetBox({
			      height: 100,
			      width: 400,
			      defaultContent: '"' + $.trim(text) + '" - ' + document.title + ' - ' + window.location.href
			    });
			});
		
			$('#anywhere').show();
			
		}

	});

Here is where the meat of our plugin's functionality will take place. On click of the "Tweet This" button, we will begin by emptying the contents of the Tweet Box. This allows the user to highlight a different piece of text and tweet that instead.

The next line will declare a variable to hold the user's selected text from our function call. We then do a quick check to determine if the user actually selected any text, and proceed with our Tweet Box initialization.

From the official documentation:

"The @Anywhere JavaScript file establishes a single global object (twttr). To use @Anywhere, call the anywhere method, and pass in a callback. The callback will receive an instance of the Twitter API Client (named "T" by convention) as its only argument. All @Anywhere features are available as members of the Twitter API Client."

This means that you can call any of these methods on the Twitter API Client ("T"): Auto-linkification of Twitter usernames, Hovercards, Follow buttons, Tweet Box, User login & signup. Your application can make multiple calls to the 'anywhere' method, so don't be afraid about limiting the functionality of your site!

As you can see, we then target "#tbox", to be filled with Twitter's Tweet Box feature. As you might have noticed, if you work with jQuery, it uses similar CSS selectors when querying the DOM.

If we were to call .tweetBox(); without any options, then the Tweet Box would take it properties from the defaults outlined in the Documentation. We use the defaultContent property to insert the user's selected text into a Tweet, along with the current page title and location. We use jQuery's $.trim function to get rid of any unwanted whitespace from the user's selection, which would cost them characters in their Tweet.

We can then display the created Tweet Box to the user, ready for them to approve and tweet!


Step 5: Tweeting Image URLs

$('img').click(function(){
	var url = $(this).attr('src');
	
	twttr.anywhere(function (T) {
 
	    T("#tbox").tweetBox({
	      height: 100,
	      width: 400,
	      defaultContent: 'Check out this image: ' + url
	    });
	 
	});
	
	$('#anywhere').show();

});

The code above provides the user with the ability to tweet a direct image URL to their account. We set up the Tweet Box exactly as before but, we use the 'src' of the 'img' element this time as the dynamic variable instead of highlighted text.
This could easily be adapted for HTML5 videos, if you desire to target them instead of images.

A Bit Little Housekeeping

$('#hide').click(function(){
	$('#tbox').empty();
	$('#anywhere').hide();
	$('#tweetThis').hide();
});

The above code simply allows the user to get rid of the Tweet Box after they have tweeted or if they change their mind about tweeting. We empty the div element ready for the next selected text or image URL.


Step 6: Possible Use Cases

This sort of functionality would lend itself perfectly to a blog.

Having this code adapted into a WordPress plugin would allow users to tweet quotes from your articles, increasing exposure and spreading your content across the internet.

The image URL tweeting would fit nicely on a photography or web design portfolio site where the user can tweet your pieces of work. Or, this script could be turned into a properly formed jQuery plugin for use on any website; static; CMS driven or Tumblr - the possibilities are endless.


Final Thoughts

The Twitter Anywhere platform is a fantastic way to layer Twitter functionality onto your site.

The Twitter Anywhere platform is a fantastic way to layer Twitter functionality onto your site. From personal experience, I think it is just that: a layer. I wouldn't feel comfortable building an entire application with it. The documentation is rather slim, and the first thing you may notice when using it yourself is how much potential it has, how much functionality could be in there, and how it's partially lacking right now.

For example, currently, you can retrieve a user's Favorites count - just the count, no content. This extra functionality would make Twitter Anywhere stand up level with the Server Side REST API that exists already, powering very complex, vast applications.

Good luck with this platform and try to find an interesting use case for some of its easy-to-implement features! In the meantime, check out the demo Copybot. Thanks for reading!

Related Posts
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    JavaScript & AJAX
    Ember Components: A Deep DiveEmber components retina preview
    Ember.js is a JavaScript MVC framework that allows developers to create ambitious web applications. Although pure MVC allows a developer to separate concerns, it does not provide you with all the tools and your application will need other constructs. Today, I'm going to talk about one of those constructs. Ember components are essentially sandboxed re-usable chunks of UI. If you are not familiar with Ember, please check out Getting Started With Ember.js or the Let's Learn Ember Course. In this tutorial, we will cover the Web Components specification, learn how to write a component in Ember, talk about composition, explain the difference between an Ember view and an Ember component, and practice integrating plugins with Ember components.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…