Introducing jSlider: A Content Slider plugin for JQuery

jSlider is a light weight JQuery plugin for content sliding. By content we mean everything: HTML code, Images, Advertisements etc etc. jSlider allows to put our content in simple <div>‘s, and then it automatically generates a content slider for you, which one can customize using various options provided.

Screenshot
Below is a screen shot of a content slider using jSlider:

jSlider

Download and Demo
jSlider is hosted at google code. Use the following links for demo and downloads:

Using jslider.jquery.js
Below is a sample html code which will be processed by jslider:

Sample input to jslider

    <div id="jslider">
      <div>
        <input type="hidden" value="Title for Content 1"/>
        <div>
          HTML Content # 1
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 2"/>
        <div>
          HTML Content # 2
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 3"/>
        <div>
          HTML Content # 3
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 4"/>
        <div>
          HTML Content # 4
        </div>
      </div>
      <div>
        <input type="hidden" value="Title for Content 5"/>
        <div>
          HTML Content # 5
        </div>
      </div>
    </div>

One must preserve the div structure as given in the example above. The hidden input values will be taken as heading for that block of content. If you want to have no heading or a common heading, fill this hidden input field appropriately.

Sample output from jslider

  <div id="jslider">
    <div class="slider">
      <h2>Title for Content 1</h2>
      <ul>
        <li class="selected">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="content">
      <div class="block">
        <input type="hidden" value="Title for Content 1"/>
        HTML Content # 1
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 2"/>
        HTML Content # 2
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 3"/>
        HTML Content # 3
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 4"/>
        HTML Content # 4
      </div>
      <div class="block">
        <input type="hidden" value="Title for Content 5"/>
        HTML Content # 5
      </div>
    </div>
  </div>

Customizing jslider.jquery.js
jSlider provides following options for customization:

  1. width: Width of jslider div above, defaults to ‘610px’
  2. height: Height of jslider div above, defaults to ‘225px’
  3. slider_height: Height of slider div above (navigation bar), defaults to ’24px’
  4. content_height: Height of content div above, defaults to ‘180px’
  5. block_width: Width of block div inside content div’s above, defaults to ‘590px’
  6. block_padding: Padding of block div inside content div’s above, defaults to ’10px’
  7. animation_time: Time taken by 1 slide of content, defaults to 300 msec
  8. animation_type: Animation type, defaults to ‘linear’. Other option is ‘swing’

Rest of the options like various padding etc can be controlled using the css properties. View demo for more implementation details. This is my first jquery plugin and I am only 2 weeks old in jquery. If you find any bug or need any enhancement, you are most welcome.

WordPress Toolbar v 2.1 – Adding support for tinyurl, sociable and a lot more

download-wordpress-plugin

WordPress Toolbar Version 2.0 allowed bloggers to catch their viewers on the go. It modifies all the internal/external links in the blog post (except those specified for exception), to open them with an attractive toolbar. Since wordpress toolbar used javascript to enable this functionality, your SEO always remain intact.

Moving forward, I accumulated all the suggestions posted in more than a 100 comments on the introductory blog post, and tried to include as many features as possible in version 2.1. A few features worth talking about are:

New in Version 2.1:

  • Plugin Size: Inspite of adding new features in version 2.1, plugin size has decreased from 100+ Kb to 50+ Kb. This is mainly because, plugin now uses site favicons fetched using Google S2 web service. It will allows for parallelization as your blog loads.
  • Tinyurl: Version 2.1 introduces support for tinyurl. If you are wondering what does that mean, scroll down to the bottom of this blog post and you will see tinyurl corresponding to this post. Enabling this feature inside admin panel will automatically submit your post to tinyurl and display it at the end of the blog post.
  • Sociable: Version 2.1 also introduces sociable. Enabling it inside the admin panel will put the social icons at the end of every blog post. You can choose icons from the admin panel. For an example scroll down to the bottom of this post.
  • target=”_blank”, was one of the most wished feature in all the posted comments. Enabling it from admin panel, will force open the url’s in your post into a new window.
  • New Toolbar Skin: Version 2.1 adds facebook toolbar skin into its kitty. From admin panel you can choose dark shade stumble upon skin or light blue facebook skin.
  • Add More Custom Skin: Yes, you read it right. I found a lot of bloggers using this plugin, wish to have their own custom toolbar skins. However, they just don’t want to tweak the code directly. Version 2.1 allows blog publishers to add their own custom skins without having to tweak the code manually. Read through to know how to add your custom skins
  • PHP4 Support: Last but not the least, support for PHP version 4.

Installation Guide:

  1. If you are trying to upgrade from version 2.0, you can either go for manual upgrade or automatic up using wordpress admin panel.
  2. Manual Upgrade: Deactivate version 2.0, Delete wordpress-toolbar folder from plugins directory, Download version 2.1, Copy wordpress-toolbar directory to plugins folder, Activate version 2.1, Visit wordpress toolbar administration panel
  3. Automatic Upgrade: Go to wordpress admin panel, click on plugins in left navigation bar, scroll down to wordpress-toolbar and click upgrade automatically

Version Change logs:

  1. Version 2.1.x : Enhancements added to version 2.0. Specifically it includes:
    • Support for tinyurl – url shortening service
    • Support for sociable – adding social share icons at the end of every post
    • Facebook skin added
    • target=”_blank” support added
    • Plugin is now PHP4 compatible
  2. Version 2.0 : Version was upgraded since 2.0 is a complete overhaul from 1.x series. Specifically it allows you to do the following:
    • You can now use auto upgrade for future releases without caring to move the plugin files everytime
    • Admin panel allows you to fully customize your toolbar
    • You can now ever choose social icons of your choice to be displayed on the toolbar
    • Choose domains for which you don’t want to activate this plugin
    • Unlike 1.x series, 2.0 do not change the href=”” urls. Instead now it uses javascript onclick event to activate toolbar and hence taking care of your SEO needs
  3. Version 1.1 : Include emergency CSS and HTML Validation fixes for IE browsers
  4. Version 1.0 : The first release of wordpress toolbar

How to add my own custom toolbar skin:
Before you go ahead and put in your custom skin, a little about various components populating that toolbar.

  1. home.gif: The left most home icon on the toolbar
  2. background.gif: The background image of your toolbar
  3. button_left.gif: The left cap image for “comment back” button
  4. button_right.gif: The right cap image for “comment back” button
  5. close.gif: The right most close icon on the toolbar

So by now you know, to add your custom skin to the toolbar all you need is 5 images. Lets see what all I did to add facebook skin in this release.

  1. First of all you must choose a short name and full name for your skin. I chose a shortname “fb” and fullname “facebook” for the facebook custom skin
  2. Go to plugins/wordpress-toolbar/extra/skins folder and create a folder. Name it “fb” (the shortname for your skin)
  3. Inside this folder drop your 5 images. (Remember names of the images must be same as above)
  4. Along with the images you need to drop a stylesheet named style.css to customize the font family, font sizes etc appearing on the toolbar. For reference see the style.css file inside “fb” folder bundled with this plugin
  5. Finally you need to create a “readme.txt” file inside “fb” folder. Open it and type in your skin’s fullname inside this file. This file will be used more extensively in future releases.

Now go to your admin panel and if you did it right you must see an option to choose your custom skin next to “choose a skin” option. Wasn’t that easy!

Planned Future Releases:

  1. The plugin is still not compatible with the Google Analytics and Shadow Box Plugin, mainly due to similar nature in which all the plugin’s operate. Need to work on that.
  2. Waiting for more suggestions and feedbacks from the plugin users on how we can evolve this plugin to serve the open source community

Do leave a comment or any suggestion for improvement and don’t forget to give a rating at http://wordpress.org/extend/plugins/wordpress-toolbar/.

SEO Analyzer v 1.2 – Adding support for Bing along with Google and Yahoo

On May 28, 2009 Microsoft announced Bing which has now replaced Live search. And within 2 week of it’s release, Bing seems to have leapfrog Yahoo search in U.S.

With Bing coming up as a strong contender to Google and Yahoo search engines, I have added support for Bing in SEO Analyzer v 1.2. This will enable you to analyze a site’s ranking for a particular keyword on Bing search engine, along with Yahoo and Google search engines.

seoanalyzer-bing-support

SEO Analyzer Future Roadmap:

  • Saving reports on spreadsheets
  • Comparing two sites for a list of keywords
  • Keyword density extraction tool

Happy SEO Analysis!

SEO Analyzer – Version 1.1 – What’s New?

While SEO Analyzer v 1.0 focused primarily on getting page ranks and analyzing back links to your site url, SEO Analyzer v 1.1 adds another feather to the cap. It allows you to achieve following analysis:

Feature List:

  • Get google page rank for input site url
  • Get all backlinks to the input site url
  • Get the exact href tag (rel=”nofollow”, target=”_blank”, etc) used by the back linking sites
  • Get google page rank for the back linking sites
  • Get google and yahoo ranking for the input site for keyword(s)
  • And a lot more ….

Installation:

Demonstration:

Here in pictures is a small demonstration of what all can be achieved with SEO Analyzer 1.1:

1. Start SEO Analyzer v 1.1
seoanalyzerv11-1

2. Enter Site url you want to analyze and keywords (optional) for which you want to analyze
seoanalyzerv11-2

3. Hit Enter or Analyze to start analysis – All backlinks
seoanalyzerv11-3

4. Get input site’s ranking for analyzed keywords
seoanalyzerv11-4

To-Do’s:

  • Export the keyword analysis results as CSV file
  • Compare keyword analysis results for two sites
  • Find appropriate keywords for a particular web page

Enjoy SEO Analysis,
Awaiting Your Feedbacks 😀

Introducing SEO Analyzer

SEO Analyzer is a desktop based application build specifically for page rank checking and link analysis for seo purpose. It is built using Adobe AIR.

Note: SEO Analyzer v 1.1 is out. Read more about it here

Installation:

Features:
The tool currently provides the following features:

  • Retrieve Page Rank for a particular web url
  • Get all incoming links for the entered url
  • Get page rank for the sites linking back to the entered url

seoanalyzer

Suggestions for future enhancements are welcomed.

WordPress Toolbar Plugin

Checkout WordPress Toolbar Version 2.2 Release Blog.

This plugin is a result of day to day observations of my wordpress blog stat. I analyzed that 75% of my blog’s visitors were leaving my blog posts by clicking one of the out going links either to my code.google project pages or to an external source of information. However, I doubt how many of them were coming back to leave a comment or to bookmark/share my blog post on one of the social bookmarking sites. I can say this because, even I too forget to press the browser back button and visit the blog again.

However I observed that I was clicking the link back on stumble floating toolbars and facebook external links toolbar. And hence came WordPress Toolbar Plugin (upgrade to 2.0 with Admin Panel). In short:

download-wordpress-plugin

WordPress Toolbar is a unique plugin which will automatically enable a toolbar for all outgoing links from your blog post, similar to stumbleupon and facebook. Often the visitors on your blog clicks one of the outgoing link for more information. However, s/he often forgets to comment back or social bookmark your blog. WordPress toolbar will float on the top of all these outgoing links from your blog post, showing options for either visit back your blog post from where s/he came from, comment back on your blog, social bookmark you blog in one of the famous bookmarking sites and finally an option to leave this toolbar.

This is my first wordpress plugin and I have just got my subversion repository access on wordpress.org. I have checked in this version of plugin and you can download the same from the download link above. You can experience the wordpress toolbar by clicking this link: http://abhinavsingh.com . As you click this, you will see a brownish black toolbar floating at the top of the yahoo.com page using which either the users can come back to comment on this blog post or they can use one of the social bookmarking images to share this blog post.

Introductory Features of WordPress Toolbar:

  1. A link back to your blog home
  2. A link back to your blog post from where he visited the external link
  3. A comment back link to originating blog post
  4. Various social bookmarking links to share, promote and bookmark your blog post
  5. Finally a close button, with which he will exit the wordpress toolbar
  6. An admin panel to configure and customize all of the above options

How to install WordPress Toolbar:

  1. Before proceeding with this version 2.x, you should DEACTIVATE any active 1.x series plugin
  2. Remove /blog/toolbar.php which you must have copied while activating 1.x version
  3. Remove /blog/wp-content/plugins/wp-toolbar directory fully. You will no longer need this
  4. Download the plugin
  5. Extract the plugin into `/wp-content/plugins/wordpress-toolbar` directory
  6. You will see one directory named `extra` which contains required images and css (DO-NOT-TOUCH-THIS-FOLDER)
  7. You will see 2 files named: wp-toolbar.php and toolbar.php (DONT MOVE THEM ANYWHERE)
  8. Activate the plugin
  9. Go to WPAdmin => settings => `wordpress toolbar` and customize the toolbar
  10. Bingo!

Version Change logs:

  1. Version 2.0 : Version was upgraded since 2.0 is a complete overhaul from 1.x series. Specifically it allows you to do the following:
    • You can now use auto upgrade for future releases without caring to move the plugin files everytime
    • Admin panel allows you to fully customize your toolbar
    • You can now ever choose social icons of your choice to be displayed on the toolbar
    • Choose domains for which you don’t want to activate this plugin
    • Unlike 1.x series, 2.0 do not change the href=”” urls. Instead now it uses javascript onclick event to activate toolbar and hence taking care of your SEO needs
  2. Version 1.1 : Include emergency CSS and HTML Validation fixes for IE browsers
  3. Version 1.0 : The first release of wordpress toolbar

Planned Future Releases:

  1. Include support for wordpress blogs hosted on PHP4, currently they are facing issues
  2. Include an options for inserting target=”_blank” for all outgoing links
  3. Club Socialble plugin into wordpress toolbar – Since wordpress toolbar already consists of all the social networking favicons, you may want to have a similar copy for a different plugin. Hence one of the next releases will include support for inserting social icons on your blog
  4. Club Google Analytics plugin into wordpress toolbar – Currently wordpress toolbar plugin inserts a onclick=”” event for all out going links which enables the toolbar for the link. However if you are a user of Google Analytics Plugin, then you might face a few issues. Mainly because Google Analytics Plugin too tries to insert an onclick=”” event for all outgoing links. Which finally clashes with wordpress toolbar onclick=”” event. Clubing both will allow you to enjoy plus points of both the plugins.

Do leave a comment or any suggestion for improvement.

Introducing JAXL – Open Source Jabber XMPP Library

Introduction

JAXL stands for “Jabber XMPP Library“. For fun, it stands for “Just Another XMPP Library

This library currently supports following features:

  • Connect to a Jabber Server (e.g. Gtalk)
  • TLS Encryption
  • DIGEST-MD5 and PLAIN authentication mechanisms
  • Roster Support

Library comes with the following class files:

  1. config.ini.php : Holds your jabber account and mysql connection information
  2. mysql.class.php : Basic MySQL connection class used to insert received messages and presence into MySQL database
  3. logger.class.php : A very basic logger class which allows you to log all XML stanza’s send and received from jabber server
  4. xmpp.class.php : Base XMPP class library which implements the XMPP protocol
  5. jaxl.class.php : JAXL class which extends XMPP class library. Should be the starting point for your application.
  6. index.php : After building your application in jaxl.class.php, you finally initializa and call your methods here

Source Code
JAXL is hosted at Google Code. Checkout full source code from here:
http://code.google.com/p/jaxl

Google Groups
jaxl
Visit this group

How to use JAXL:
JAXL Client Library is highly structured. There is a base XMPP class library (xmpp.class.php) and a JAXL class library (jaxl.class.php) which is derived from the base XMPP class library.

Base XMPP class library implements the XMPP protocol and it also provides you with two extendable methods named eventMessage() and eventPresence(). These methods are internally called when a message or presence XML Stanza is received from the Jabber server.

Jaxl.class.php must be the starting point for all your applications. Simply customize the eventMessage() and eventPresence() Method for your application. Other methods which might interest you while customizing them are:

  1. sendMessage($jid,$message) : For sending message to a particular Jid
  2. sendStatus() : To set your status message
  3. roster(‘get’) : To get list of roster
  4. roster(‘add’,$jid) : Add a new contact in roster list
  5. roster(‘remove’,$jid) : Remove a contact from roster list
  6. roster(‘update’,$jid,$name,$groups) : Update a particular contact in roster
  7. subscribe($jid) : Subscribe for presence of a particular $jid

This library includes the following files:

Config File (config.ini.php)
You specify all your jabber account username and password in this file. For development environment keep $env = “devel” and for production simply change it to $env = “prod”

  // Set an enviornment
  $env = "prod";

  // Log Level for logger class
  $logEnable = TRUE;

  // Log in MySQL database
  $logDB = FALSE;

  $key = array("prod"=>array("user"=>"myproductionuser",
                             "pass"=>"password",
                             "host"=>"talk.google.com",
                             "port"=>5222,
                             "domain"=>"gmail.com"
                            ),
              "devel"=>array("user"=>"mydevelopmentuser",
                             "pass"=>"password",
                             "host"=>"localhost",
                             "port"=>5222,
                             "domain"=>"localhost"
                            )
              );

  $db = array("prod"=>array("dbuser"=>"root",
                            "dbpass"=>"password",
                            "dbhost"=>"localhost",
                            "dbname"=>"jaxl"
                           ),
             "devel"=>array("dbuser"=>"root",
                            "dbpass"=>"password",
                            "dbhost"=>"localhost",
                            "dbname"=>"jaxl"
                           )
             );


MySQL Class (mysql.class.php)
This is a basic MySQL connection class used to insert received messages and presence into MySQL database

Base XMPP Class (xmpp.class.php)
You should not worry about this class. Until and unless you are aware of what are you trying to achieve you should not touch this class file.

Logger Class (logger.class.php)
This is a basic logger class. It help you log XML send to and received from jabber server. Might prove helpful in debugging and if you are interested in learning the core of XMPP Protocol.

Extended JAXL Class (jaxl.class.php)
You will be customizing eventMessage() and eventPresence() methods here.

    function eventMessage($fromJid, $content, $offline = FALSE) {
      if($offline) {
        $this->sendMessage($fromJid,"Hi, Thanks for your offline message");
      }
      else {
        $this->sendMessage($fromJid,"Hi, Thanks for your message");
      }

      if($this->logDB) {
        // Save the message in the database
        $timestamp = date('Y-m-d H:i:s');
        $query = "INSERT INTO message (FromJid,Message,Timestamp) value ('$fromJid','$content','$timestamp')";
        $this->mysql->setData($query);
      }
    }

    function eventPresence($fromJid, $status, $photo) {
      // Change your status message to your friend's status
      $this->sendStatus($status);

      if($this->logDB) {
        // Save the presence in the database
        $timestamp = date('Y-m-d H:i:s');
        $query = "INSERT INTO presence (FromJid,Status,Timestamp) value ('$fromJid','$status','$timestamp')";
        $this->mysql->setData($query);
      }
    }

In above example I have done 4 things:

  • Sends back a message saying “Hi, Thanks for your offline message”, when I receive a offliner.
  • Sends back a message saying “Hi, Thanks for your message”, when I receive an IM from my friend.
  • Change my status message, as and when I receive a status update from my friends.
  • Save messages and presence into database if $logDB = TRUE in config.ini.php

Final Call (index.php)

  /* Include Key file */
  include_once("config.ini.php");

  /* Include JAXL Class */
  include_once("jaxl.class.php");

  /* Create an instance of XMPP Class */
  $jaxl = new JAXL($key[$env]['host'],    // Jabber Server Hostname
                   $key[$env]['port'],    // Jabber Server Port
                   $key[$env]['user'],    // Jabber User
                   $key[$env]['pass'],    // Jabber Password
                   $key[$env]['domain'],  // Jabber Domain
                   $db[$env]['dbhost'],   // MySQL DB Host
                   $db[$env]['dbname'],   // MySQL DB Name
                   $db[$env]['dbuser'],   // MySQL DB User
                   $db[$env]['dbpass'],   // MySQL DB Pass
                   $logEnable,            // Enable Logging
                   $logDB                 // Enable MySQL Inserts
                  );

  try {
    /* Initiate the connection */
    $jaxl->connect();

    /* Communicate with Jabber Server */
    while($jaxl->isConnected) {
      $jaxl->getXML();
    }
  }
  catch(Exception $e) {
    die($e->getMessage());
  }

Instant Messenger Powered by JAXL
I am pleased to announce 3 months after release of JAXL, 1st Instant Messenger powered by JAXL. Currently the instant messenger is in testing phase and will be released after some 3-4 weeks of thorough testing. Meanwhile here is the first clip shot:

Disclaimer
Currently this library is being developed and used at Gtalkbots.com . Though it is thoroughly tested and being used, I still recommend not to use it on production servers. Mainly, since it is heavily customized for Gtalkbot’s usage. I am releasing it, as I see it of use for the community worldwide. If you want to use it, use at your own risk. Let me know of any changes you make to this library. In future I look to make this library more generic.

Enjoy and let me know of any bugs, feedbacks, enhancements or any abuse you may want to pass through if it doesn’t work for you 😛

You should be running index.php using command line and not browser (recommended). This class is currently highly customized for Gtalkbots usage and works perfectly with Gtalk Servers.