CKFinder as a button on CKEditor toolbar

Hi,

I have integrated CKFinder into CKEditor. I can locate the Browse Server button on clicking either Image and Link buttons. However, I want a button on my toolbar which would directly open ckfinder (rather than going through image or link buttons). Behaviour is similar to ckfinder popup except that instead of having button anywhere on page, I want it to be a part of CKEditor tool bar. Is there any plugin that already handles this? Please suggest a way of how this can be done.

My attempt: I intended to add a button using plugin logic and then access CKFinder from there 

I tried adding a button following http://docs.ckeditor.com/#!/guide/plugin_sdk_intro .. Somehow the button is never displayed on toolbar. I am using version CkEditor 4.0.1. 

Code:

I tried following all the steps to add a custom button to my ckeditor,

added this in plugin.js which is at plugins/abbr/plugin.js path. 

CKEDITOR.plugins.add( 'abbr', {
    icons: 'abbr',
    init: function( editor ) {              
        editor.addCommand( 'abbrDialog', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
        editor.ui.addButton( 'Abbr', {
            label: 'Insert Abbreviation',
            command: 'abbrDialog',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
    }
});

CKEDITOR.replace('editor1', {
                extraPlugins: 'abbr',
                toolbar: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo','abbr']
            });

Where am I going wrong? or is there any bug with CKEditor 4.0.1? Please help