Archive for the ‘API’ category

Tweet Something from Your Website Using bitly REST Api

June 23rd, 2009

Oho, did I actually write the right title of this post? Bit.ly is not for tweeting, it’s for shortening the long URLs right, but hey, why bit.ly is so popular now? Most common answer could be twitter. I don’t know if people would used this service that much if there wasn’t twitter. Anyways, this is very important to shortening something in your tweet as twitter has character limits. So let’s see how we can actually tweet something from a website using this REST based Api method calls.

Note one thing that if your site is using wordpress or any kind of CMS that allows to use plug-ins then you don’t have to worry about it. This is something you can use only for updating some content to twitter from your site. Hope I made it clear at first….

After digging bitly apis, I think its pretty easy to do it as bitly provides Javascript client library so there shouldn’t be any varier about back-end language. So let’s see how easily we can tweet some content from our site.

First of all, if you redirect anything with the following URL, twitter will get your message in the text box and all you have to do is, just press the update button.

http://twitter.com/home?status=your_message_comes_here

So our message has to be customized and you cannot allow anybody to send message more than 140 chars right. This is why we will use bitly api to customized it.

First of all, we have to add the API library with the following format.

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=junal&apiKey=R_888fefa724b856672a3276a3905d8e30"></script>

you need to login to get user name and password from bitly, though you can use demo user name and apikey from here but later you have to use your own authentication information.

Anyways, we are done connecting with bitly by including their JS client library. Now let’s create some functions of our own to call them. Open a JS file and paste the following there, you can find this example codes in the bitly documentation.

var TweetAndTrack = {};
TweetAndTrack.open = function(targ, url) {
var callback_name = url.replace(/\W/g, '');
BitlyClient.call('shorten', {
'longUrl': url,
'history': '1'
}, 'BitlyCB.' + callback_name);
return false;
};
 
TweetAndTrack.popResult = function(data) {
// Results are keyed by longUrl, so we need to grab the first one.
for (var r in data.results) {
return data.results[r];
 }
};

now it’s time to create our own function to call. Here is the example one…

function tweetMe(msg, url) {
var textMessage = msg.replace(new RegExp("^(.{0," + 80 + "}\\b).*"), "$1");
var callback_name = url.replace(/\W/g, '');
BitlyCB[callback_name] = function(data) {
var result = TweetAndTrack.popResult(data);
var tweet_url = "http://twitter.com/home?status=" + encodeURIComponent(textMessage+ "... " + result.shortUrl );
window.open(tweet_url);
};
 
BitlyClient.call('shorten', {
'longUrl': url,
'history': '1'
}, 'BitlyCB.' + callback_name);
 
return false;
}

I have used regular expression here to truncate the message. I kept the length of the message 80! why? Because, your URL will take some chars as well and you should also keep some space for people who will retweet your tweet :)

Now, we have to call this javascript function called “tweetMe()” and it has 2 params right. We have to pass the message and the url along with the message and bit.ly api will make sure that whatever we are sending, it will be customized before sending. So how can we call this function?

<a href=”#” onclick=”return tweetMe(‘Content or message of your tweet‘, ‘URL of your along with your message‘);”>tweet this </a>

Ok, now just click on “tweet this” and then you it will take you to the twitter heaven. Be happy there, and ask me any questions if you can’t reach there ;)

Twitter Desktop Client War Between TweetDeck and Seesmic!

May 4th, 2009

I have just played with Seesmic new twitter desktop client. Though i have been using TweetDeck for last couple of months. Just wanted to try out the new twitter desktop client as there is a huge buzz about it on twitter and friendfeed. So, what’s so difference between TweetDeck and Seesmic? Well, everything is almost same just facebook integration on new Seesmic desktop client simply rocks. But wait, you gotta call Seesmic a clever jack! Why? Because they just used the new “Open Stream API” and “Facebook for Adobe AIR” very smartly. Facebook Open Stream API was just released a few days ago.I just think if TweetDeck’s last release was little bit delayed it would be great for them. Because then, they would include all these stuffs that Seesmic added. I’m pretty sure now TweetDeck will move it’s ass really fast to get all these new facebook api features enabled in their stomach. And well, facebook made a great move allowing developers to access users’ home stream. Seesmic is the latest result of that move and we gotta wait to see more applications based on this new API. By the way, I’m enjoying Seesmic client for now, let’s have a look at some screenshots.


and well, I guess war is just begun. I asked TweetDeck on twitter to know if they are gonna add new Seesmic’s features in their next version. and they said there will be “big differences in the next version, we have different path“. Smart answer Tweetdeck!

I’m sure next version of TweetDeck is gonna be exciting. What do you think?

Facebook Chat Invite API to Increase The Application Users.

March 13th, 2009

Over the last few days, we have seen some major changes on Facebook developer platform which will increase the application developers to engage more users with their applications. I will try to write on them one by one in near future whenever I get time. Today, i’m going to discuss “Chat Invite API” with an example and I will also focus on area(s) how we can use this API to get more users attention.

Chat invite API Enables your users to initiate Facebook Chat with their friends from within your applications. Great! Let’s give this responsibility to users to bring their friends in our application.

Three main attributes of this API are..

  • msg (required)
  • condensed
  • exclude_ids

an example could be like the following..

<fb:chat-invite msg="let's play a game!" condensed="false" exclude_ids="1,2,3"/>

2 things are very important here, “msg” that comes in the chat input box when you select an online friend from the list, so be sure that you put something related to your application. Setting up the application URL will be right idea along with some text.

I.e :

 msg ="Come join me! <?=$base_url;?>"

another attribute is “exclude_id”, let’s exclude those who haven’t added this application and idle. So that we will show those users who have not added our application and who are idle. Let’s look at the complete example that does this job for us.

<?php 
include_once("config.php");
$users = $facebook->api_client->fql_query("SELECT uid FROM user WHERE is_app_user = 1 and uid IN (SELECT uid2 FROM friend WHERE uid1 = {$fbuser})");
/*
 * Now, let's make these ids comma seperated (1,2,3)
 */
$arFriends = "";
    // Build an delimited list of users...
    if ($users){
        $arFriends .= $users[0]["uid"];
        for ( $i = 1; $i &lt; count($users); $i++ )    {
            if ( $arFriends != "" )        $arFriends .= ",";
            $arFriends .= $users[$i]["uid"];
        }
    }
?>
//now place this code where you want to show your chat invite box.
<fb:js-string var="chatInvite">  <fb:chat-invite msg="Come join me! <?=$base_url;?>" condensed="true" exclude_ids="<?=$arFriends;?>"/> </fb:js-string>
    <div id="chat_invite_container"></div>
<script> document.getElementById('chat_invite_container').setInnerFBML(chatInvite); </script>

Chat with friends from Canvase Page

Chat with friends from Canvase Page

Thats it! Now, we can allow users to talk to their friends directly from your application.

Reference : http://wiki.developers.facebook.com/index.php/Fb:chat-invite

Get Adobe Flash playerPlugin by wpburn.com wordpress themes