Twitter @ anywhere Tweetbox

I am going to specifically talk about the Tweetbox here. The end result will help you setup a box like the one on the right sidebar of this blog, which looks like this :

My reasons for putting this up on this blog :

1. When I tweet from this Tweetbox, the tweet shows up on Twitter and other channels with content and says “via asidebrands.com” – so the tweet is branded with the asidebrands name. Which helps create more link love for the blog / website and people who have never clicked on the website link from my Twitter bio are probably likelier to click on the “via asidebrands.com” in the tweet.

2. I HAD to try out the API – Twitter is a formidable platform when it comes to using it for creating your brand’s presence and connecting with a tribe who could be instrumental in word-of-mouth about you personally, as well as your brand. Maybe someone who doesn’t know about Twitter, will discover it through my blog and their life will change. Maybe a potential client will like the content of the blog or a particular case study and share it with their Twitter network.

3. The Tweetbox would probably prompt more people who visit the blog to give me a shoutout. It would help me connect better with my blog visitors.

I first heard about @anywhere through @StupiDeity and @iamkhayyam – thank you gentlemen.

The official @anywhere page can be looked up here : http://dev.twitter.com/anywhere/begin and decided this was something I could use on my website / blog. I wasn’t sure I would like it on the main website [ because I dislike deviating from the focus – the website was always supposed to be a place to showcase my design portfolio ].

It looked a tad overwhelming at first – I was supposed to register an ‘application’! But what that really means is that you need to define a name for the application and a website URL where you would like the @anywhere functionality to show up and be used. So I named my application “asidebrands.com” [ for when a status update from your application shows up on Twitter / other channels, it shows “via asidebrands.com” like it shows for a host of other apps like “via Hootsuite” for example ] – you can change the application name later on so even if you get the name wrong the first time, like I did, it’s cool.

THIS IS HOW YOU CAN SETUP YOUR TWEETBOX :

1. Go here to register your new application : http://dev.twitter.com/anywhere/apps/new. This is what the screen looks like, with dummy values that I have entered for the purpose of this post.

2. The values to be entered in the above form are :

Application Name : You’ll have to pick a unique name, ideally your personal name or your brand name. For me, it was “asidebrands.com”.
Application Website : The website url which you would like to use the Tweetbox on. For me, it was “http://asidebrands.com”. Whatever url you use here is where the “via asidebrands.com” in a tweet from your Tweetbox will link to.
Organization : Ideally, the name of your brand / company. For me, it was “asidebrands”.
Callback URL : Without getting into technical details, this would ideally be the same url as the Application Website or where you want to use the Tweetbox. The two values, can, however be different. In my case, it was “http://aside.in/blog” because I wouldn’t be using this on the main website but on the blog.
Default Access Type : Ideally, the Read & Write option should be checked.
Application Icon : which you can upload at a later step.

3. This is the success screen you will get to see once you click on Register and Accept the terms and conditions :

This page gives you the code for successfully activating two features :

Linkify [@Anywhere provides a convenient way to link Twitter usernames found in your web site or application back to a user’s profile page on Twitter.com ] and Hovercards [ feature that can be seen on Twitter.com and are now available to developers through @Anywhere. A Hovercard is a small, context-aware tooltip that provides access to data about a particular Twitter user. Hovercards also allows a user to take action upon a Twitter user such as following and unfollowing, as well as toggling device updates. ] More details about tweaking and configuration options on these features here on the official Twitter page : http://dev.twitter.com/anywhere/begin.

4. To implement the Tweetbox and configure it, this is what I did :

a. placed the JavaScript code somewhere within in the header.php file of my blog’s theme. The code is :

b. to call this script, you need to define a <div> and place the code wherever you want the Tweetbox to appear. In my case, I used the name available in the code on the official twitter website :

<div id=”tbox”></div>

I placed this bit of code in the sidebar.php file of my blog.

c. now the Tweetbox will appear where you want it to – but it will, in all likelihood, look like the default box :

So you will need to configure this accordingly. The Twitter website lists the following Tweetbox configuration options

So, with some configuration options, my currently-in-use code for the Tweetbox looks like this :

<script src=”http://platform.twitter.com/anywhere.js?id=xxxxxxxxxxxxxxxxxxxxxxxx&amp;v=1″>
</script>
<script type=”text/javascript”>
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
twttr.anywhere(function (T) {
T(“#tbox”).tweetBox({
height: 80,
width: 180,
counter: false,
label: “<span style=”color: #cfcfcf; font-size: .6em; line-height:.3em; padding-bottom:-10px;”>say hello to us on Twitter</span>”,
defaultContent: “@asidebrands @naina”
});
});
</script>

As you can see, the “Label” can be styled to some extent, so can the size of the box itself. I still don’t know how to style the Counter which shows the character count. The rest of the Tweetbox can be styled by defining the value for the <div id=”tbox”></div> in the CSS file. In my case, I included the following code in my stylesheet.css file for this blog :

#tbox
{
width:185px;
margin-left:-25px;
padding-left:20px;
padding-bottom:20px;
padding-top:10px;
background-color:#333333;
border-left:15px solid #95cd3c;
border-top:15px solid #ffffff;
border-bottom:15px solid #ffffff;
border-right:15px solid #333333;
font-size:10px;
line-height:1px;
}

The line-height value does not work. Everything else does.

5. And you’re done.

The official Twitter page to get started on @anywhere is http://dev.twitter.com/anywhere/begin

Another good article to read is @aaronsaray’s http://aaronsaray.com/blog/2010/05/04/branding-your-tweets-using-anywhere-tweetbox/ and some questions about styling the Tweetbox are answered here : http://www.devcomments.com/Change-label-color-of-anywhere-Tweet-box-at140269.htm and here

For the entire @anywhere JS API cheatsheet go here : http://platform.twitter.com/js-api.html. After the above very basic & simple implementation, I am going to spend some more time figuring out how I can make better use of more features, if at all they are needed.

Please let me know if you have any questions or if you have more resources that can help make the above process better.