Break the barriers and tweet longer

Fanie Reynders

Nov 4, 2014 • 4 min read

It's been a while since I found a decent time to post something useful. As the saying goes: There isn't any better time than the present. So while on my way on a super long flight, to rainy Seattle for the MVP Summit, I've got plenty of time to kill. Just wished I had WiFi earlier...

Social media is the next big thing at the moment and with cloud computing driving this, the possibilities are 'virtually' endless (no pun intended). While every social platform has its place, I strongly believe that there are still lots of room for improvement.

Take Facebook for example, back in the day it was [do I dare say] the replacement for MySpace. Let's be honest, it was cool at the time, but nowadays, with the increasing number of junk posts, like Farmville, I personally prefer Twitter as my sharing tool of choice. This is for the simple reason of the clean-cut and down-to-the-point useful information on my terms.

As with anything, there are of course the down sides: Twitter is fundamentally designed to limit the amount of information per post. This is to force the users to really think about they're trying to say. Don't get me wrong, this is a good thing, but sometimes I want the best of both worlds to get my point across properly without using G33k speak that, in some cases make no sense.

November 1, 2014

Fixing what's broken

There are times when you just want to write a short-ish tweet about something, but are forced to either split up the post in smaller bits or by shrtng ur wrds. #Dont #get #me #started #on #hashtags!

I was thinking about fixing this 'problem' in a creative way, by enabling longer tweets, but still allowing for atomic bits of information.

Say hello to Looong Tweet

The [somewhat] creative way I chose to solve this problem was by building a Google Chrome extension that works with Twitter's web app. In the event of you running out of your hundred and forty characters, the usual 'Tweet' button is replaced by a 'Shorten' one. When this magic button is clicked, with the power of Azure as it's back-end, it will shorten your version, also including a link to the original one so it fits perfectly within the limited characters.

The components

We need:

A mechanism to replace the default 'Tweet' button with the 'Shorten' when the amount of characters exceed the limit. For this, I used pure JavaScript that gets injected into the page by means of a Chrome Extension.

var tweetBox = document.getElementById("tweet-box-mini-home-profile");  
var tweetButton = document.getElementsByClassName("js-tweet-btn")[0];  
var tweetCounter = document.getElementsByClassName("tweet-counter")[0];  
var avatarImg = document.getElementsByClassName("DashboardProfileCard-avatarImage")[0].src;  
var handle = document.getElementsByClassName("DashboardProfileCard-screennameLink")[0].innerHTML;  
var loadingIcon = "fa fa-spinner fa-spin";  
var normalIcon = "fa fa-cut";  
var htmlRegex = /(<([^>]+)>)/ig;  
var head = document.getElementsByTagName('head')[0];  
var link = document.createElement("link");  
var btn = document.createElement("DIV")

//The shorten button html
var shortenButton = '<button id="shorten-btn" class="btn primary-btn tweet-btn " type="button">' +  
                    '<span class="button-text tweeting-text">' +
                    '<span id="shortenBtnIcon" style="font-size:19px;position: relative;vertical-align: middle;" class="fa fa-cut"></span> ' + 
                    'Shorten' +
                    '</span>' +
                    '</button>';

//Stylesheet for Font Awesome icon
link.setAttribute("href","//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");  
link.setAttribute("rel","stylesheet");  
head.appendChild(link);

//Actual creation of shorten button
btn.innerHTML = shortenButton;  
btn.addEventListener("click", setText);

//Listen for keystrokes to toggle 'Tweet' and 'Shorten' buttons
tweetBox.onkeyup = validate;

area.appendChild(btn);

Every Chrome extension also needs a manifest to describe its behavior. Here's the manifest for Looong Tweet:

{
"name":"Looong Tweet",
"description":"Looong Tweet allows you to tweet longer tweets from Twitter",
"version":"1",
"manifest_version":2,
"icons": { 
  "16": "icon16.png",
  "48": "icon48.png",
  "128": "icon128.png" },
  "permissions": [
    "https://short-tweet.azure-mobile.net/"
  ],
"content_scripts": [{
    "matches": ["https://twitter.com/*"],
    "js": ["script.js","MobileServices.Web-1.2.5.min.js"]
  }]
}

As you can see from the snippet above, it declares two external resources (script.js and MobileServices.Web-1.2.5.min.js) that it will inject into the DOM when the address in the browser matches https://twitter.com/*. We also need to explicity give permission to the extension for making cross-domain AJAX calls to the mobile service in Azure.

The extension is running locally on the browser and not in a server such as localhost

Some logic to send the original tweet to Azure, including metadata like the username and avatar.

function setText(){  
    toggleLoading(true);
    var client = new WindowsAzure.MobileServiceClient(
        "https://short-tweet.azure-mobile.net/",
        "<YOUR KEY HERE>"
    );
    var tweet = tweetBox.innerHTML.replace(htmlRegex,'');
    var twHandle = handle.replace(htmlRegex,'');
    var item = { key:uid(), text: tweet, avatar: avatarImg, handle: twHandle };

    client.getTable("Item").insert(item).done(function(data){
        tweetBox.innerHTML = "<div>" + data.text + "</div>";
        tweetBox.focus();
        validate();
        toggleLoading(false);
    });
}

Here we make use of the Azure Mobile Services JavaScript Client (which I just included as a local resource) to talk to our API in the sky.

An API that trims the tweet to the leaner version with a link.

function insert(item, user, request) {  
    request.execute({
        success: function () {

            var tweet = item.text.substring(0,114) + "... ";
            var link = "http://ltwt.co/" + item.key;
            var response = {
               text: tweet + link
            };

            request.respond(statusCodes.OK, response );
        }
    });
}

A clean website for showing the original tweet with Disqus comments

For this I decided to keep things simple by just using a basic MVC 5 application that uses the WAMS C# client to retrieve the tweet from the API and beautifully displays it without any clutter.

[Route("{id}")]
public async Task<ActionResult> Tweet(string id)  
{
  var item = (await MobileService.GetTable<Item>().Where(i => i.Key == id).ToListAsync()).FirstOrDefault();
  item.Text = ParseTweet(item.Text);
  return View(item);
}

Start using Looong Tweet

This extension is available on the Chrome Web Store right now. So go on, go get it and start tweeting longer tweets that actually makes sense.

That's a wrap

In an upcoming post, I'll show how to package and deploy a Chrome Extension to the store. I hope to make someone wiser who wants to build extensions for Chrome. Please feel free to comment on the content. Your feedback is greatly appreciated.