With Twitter’s new @anywhere features, it’s now possible to brand your tweets from your own web page. While I still like using Tweetdeck or Seesmic for my actual interaction on twitter, I have started tweeting a bit from my own web page as well.
@anywhere features an interactive tweetbox that you can embed on your website. The javascript call allows you to add your own content to the box – just waiting for the user to hit TWEET. (Of course, they have to connect to your website.) In order to leverage this for my own website, and brand my tweets from AaronSaray.com, I decided that I could use this box in my browser sidebar. Here are the steps – in case you want to do it yourself!
Get Your “App” an API Key
This is pretty simple. First, log into the web interface for twitter. Then, visit the apps page at http://twitter.com/apps. Click on register a new application if you need to.
On this page, you can enter all the details of your application. For the application name, I entered AaronSaray.com to provide proper branding. Last, make sure that you check Read/Write access. Your application needs to be able to post!
After this is complete, you may want to view your page’s settings. (You can do this by clicking on the name of the application on the apps page.) The important thing to do here is to access the ‘Consumer Key’ and copy this down.
Create your webpage
Next, I created a web page on my domain. It has the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Twitter</title> <style type="text/css"> body { background-color: #f3f3f3; } </style> <script src="http://platform.twitter.com/anywhere.js?id=CONSUMER_KEY&v=1" type="text/javascript"></script> </head> <body> <div id="custom-tweetbox"></div> <script type="text/javascript"> twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) { twitter("#custom-tweetbox").tweetBox({ label: "<span style='color: #aaa'>Tweet this:</span>", height: 90, width: 200 }); }; </script> </body> </html> |
First off, make sure to change CONSUMER_KEY to the actual key from your applications settings page. Next, you can change the CSS in this page to match your theme if you want. Since I’m loading this in the side bar, this is the simple layout I chose.
Finally, include the javascript and configure the tweetbox. I chose not to prepopulate my tweetbox with content. However, you could if you wish…
Add Book Mark
Add the bookmark to your browser. I added mine to my firefox bookmark toolbar. Then, I right clicked and chose properties. I checked the ‘load this in the sidebar’ option.
Use It!
The first time you use the tweet box, it will prompt you to connect to your website. After this is done, you can use this easily. My branded tweets show that its from AaronSaray.com nicely. See?
Pingback: Twitter @anywhere proof of concepts | Aaron Saray
Aaron,
I need your help. I am trying to create one of these Twitter box thing to my blog.
Is it possible to seek your assistance for a fee. I can share details once you respond. Thanks.
@soji: If you have any specific questions, please let me know. I’d love to help you out with any code you come up with.
Pingback: aside brands » Twitter @anywhere Tweetbox
Hey, thanks a lot for this code snippet! Right now I’m using it unaltered, but I’m going to fiddle with it a bit more later on today. I didn’t actually know about @anywhere until I happened to find your blog while I was doing some research about the bit.ly API. Excellent!
Awesome, I’ve been using marketmetweet for this functionality but want a wp plugin, been trying STC but can’t get it to authenticate to autopost. This info is one step along the way to understanding how to create autotweet functionality myself.
Cheers
Hi Aaron,
I need your help to. I did everything you said, but I’m getting an error with my first tweet.
” The provided callback url http://localhost/DNY Website/index.html is not authorized for the client registered to ‘http://www.dannyscheurink.nl’.
Can you tell me what I am doing wrong?
Thank you in advance!
Grtz, Danny
@Danny you need to register your application with your local development URL. I prefer to do sites like dannyscheurink.local on my local machine
That way, it will have an authorized URL
Hello Aaron,
Sounds awesome to be able to do this. I just invested in MarketMe Suite but may cancel it. I should’ve looked into making this myself before buying.
One problem I’m having .. I get this authorization message to allow the connection and when I hit OK, it tells me “something went wrong”
Any idea on that? I registered my application properly b/c it works in MarketMeSuite.
I usually get that message if I
a) don’t have the right key in there
b) am cutting corners and forgetting to put in the exact code
or
c) have changed the order in which the nodes exist. Weird, I know. Try copying and pasting exactly what I have first, and then slowly changing it to fit your needs. Good luck!
Hello,
Thanks so much for responding! I copied your code exactly as it is and only changed the key as you noted. Still getting that error.
Can you please maybe take a look and suggest a solution? Don’t know if I’m doing something wrong…
http://bridgecomp.com/tweet.php
Thanks!
Quick thought: did you give your app read/write permission? or just read? You have to explicitly check read/write I think… that COULD be it.
It’s got read/write .. I know the app is ok b/c I set it up to use with MarketMeTweet and that is working
… was hoping to get your code to work …
I figured it out … maybe something that you should note on your page …
The new app settings allow you to select “Client” or “Browser” and when you choose “Browser” it will ask for a callback URL … I had it set to Client, since I created that app for MarketMeTweet … I created a new one and set the Callback URL and it worked!
Thanks so much for posting this! This is great!
Hey, thank you for this code!
I was just wondering how to add the pre-populated content? Do I simply need to add it in the code somwhere?
Thanks in advance.
Add a property of ‘defaultContent’ to the tweetBox call object parameter.
Perfect, thanks again!
Hi everybody, my English is not really good, so first all, sorry for my bad English.
I just want to say thanx a lot, this was really helpful for me. I was looking for a way to manipulate the tweetBox and set a maxlength and finally I got it.
Leave you my solution for someone who need it:
…
…
complete : function (tweetBox) {
me.tweetBox = tweetBox;
try{
//Asignamos maxlength a textarea
me.tweetBox.$editor.attr(‘maxlength’,140);
}catch(e){
//
}
}
…
…
Also, yo can use de Firebug to see all the atributes/parameters/functions that you can manipulate!!!
Thank you for this code XD.