Install the JavaScript API Plugin

we are very proud to announce our first public release of the Status.net Javascript API. This will be introduced as a plugin for StatusNet and you can install this on your instance.

If you running a your own StatusNet instance now you can install StatusBox and try it for your self.

As we've said we are giving you a simple interface to interact with the StatusNet instance and you can anywhere which runs JavaScript. (Unfortunately not in IE and Fixed Scheduled)

Before Going into connection details much let's look at some demos which shows you the power of StatusBox.

• on Blogger
• Stata - another home for identi.ca

What we are offering you

StatusBox offer it's features for both end users and the developers. Our focus on this article purely on end users who are just keen to feel the power of StatusBox. We provides you widgets that'll enhance your Status.Net usage experience.

Currently we are offering 3 widgets

• Hovercards
• Subscribe Button
• Connect Button

Download

Plugin for StatusNet 0.9.x

Install the Plugin

• unzip it and copy the folder named $DOWNLOADED_SNAPI/Plugins/JsAPI into $SN_ROOT/local/plugins (if the directory ins not there, try to create it)
• add following line to config.php file on the $SN_ROOT

addPlugin('JsApi');

Let's put Some of these widgets on your site

Before that you'll need to get familier with some terminology. it's simple let's go for it.

• StatusNet Instance (like http://mystatus.net) - A installation of Status.Net software
• Callback URL - it's web page or blog which you going to apply hovercards
• Consumer Key and Secret - these are just two string no need to worry about them anymore

That's it.

Let's make the Connection First

• First you need to acquire a Consumer Key and a Secret for your callback url (which is your webpage)
• you can get them from here - http://mystatus.net/settings/oauthapps (http://mystatus.net - change this with your StatusNet URL)
• Then paste following code in the head section of your web page of blog

    <script type='text/javascript' src='http://mystatus.net/js/api.js' ></script>  
    <script type="text/javascript">
        SN.init('your consumer key', 'your consumer secret);
    </script>

Replace all the http://mystatus.net occurrences in the above code with your one

Let's add hovercards

• hovercards summerize particular user's profile in a nice little box.
• So before enabeling hovercards you need to have some text content like this in your web page

    
<div id='content'>Status.Net JavaScript API is done by @arunoda with the help of @zach</div>

here how we make hovercards for above content

 
    <script type="texts/javascript">
        SN.ready(function(){
                 SN.hovercards('#content');
        });
    </script>

The parameter is the places where we need to add hovercards. And you've to give them as a CSS Selector, as you do with JQuery for the blogger or any other common blog site's content will be on div grouped as classes. So in there you need to figure out what is the clases for that div and set the stylesheet accordingly.

Then try SubscribeButton

• Subscribe button allows others to subscribe you without going into StatusNet or any StatusNet support client.
• With just pasting a code you can achieve this.
• You need a div to be load(render) the button

 <div id='subscribe'></div>

Then put following code to render the JavaScript

     <script type="texts/javascript">
        SN.ready(function(){
            SN.subscribeButton("subscribe", "arunoda");
        });
     </script>

• Parameters
  • id: id of the div to be render the button inside it
  • username: username of the statusnet user to be base on drawing UI

Try Connect Button

• Connect Button makes the connection between StatusNet instance and the Web Browser And allows logout feature too..
• The way of adding this into a page is same as setting up the SubscribeButton

You need a div to be load(render) the button

 <div id='connect'></div>

Then put following code to render the JavaScript

     <script type="texts/javascript">
        SN.ready(function(){
           SN.connectButton("connect");
        });
     </script>

• Connect button usually needs for hovercards only. Subscribe Button contains it's own version of Connect Button.
• Parameters
  • id: id of the div to be render the button inside it

TIPS

• Try to load the API in the head section of the html
• we are loading JQuery dynamically. And we are using version 1.4.2 (if you've already loaded the API we are not loading it again)
• and you can have as many as SN.ready(callback) calls.
• and It's equivalent to JQuery's ready() method with additional lookup for check with the SN system as well. The callback only will be executed
• only after both SN system and the JQuery are successfully loaded.