Share

TopExtending Share

Share supports adding additional plugins beyond those that are built-in. Below is some brief documentation on creating your own plugin.

We will be using the MyPC built-in plugin for our example. The code below is slightly modified from the source to make it standalone (built-in require different method calls).

We declare our function using the standar namespacing syntax.

var iBeginSharePlugin_myPC = function()
{

Inside we can add any private methods used directly by the function.

// This is a private function used by myPC to follow DRY standards.
  function createDocumentRow(type, label, params)
  {
    var link = encodeURIComponent(params.link);
    var title = encodeURIComponent(params.title);
    var content = encodeURIComponent(params.content);

    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.width = '10%';
    td.paddingLeft = '50px';
    var a = document.createElement('a');
    a.href = iBeginShare.base_url + 'share.php?mod=send&act=mypc&f=pdf&url='+link+'&content='+content+'&title='+title;
    a.title = label;
    var img = document.createElement('img');
    img.src = iBeginShare.base_url + 'share/images/icons/pc_'+type+'.gif';
    img.style.border = 0;
    img.style.width = '40px';
    img.style.height = '40px';
    a.appendChild(img);
    td.appendChild(a);
    tr.appendChild(td);
    var td = document.createElement('td');
    var a = document.createElement('a');
    a.href = iBeginShare.base_url + 'share.php?mod=send&act=mypc&f='+type+'&url='+link+'&content='+content+'&title='+title;
    a.innerHTML = label;
    td.appendChild(a);
    tr.appendChild(td);

    return tr;
  }

Now we need to add the controls to interact with the framework. label and render are the only required publicly accessible methods.

  return {
    // The label for your plugin. Used both in the tab name and the heading.
    label: 'My PC',
    // Any parameters it requires. Link and title are always available, content may not be.
    requires: ['link', 'title', 'content'],
    // The render method passes in a callback function, which is the
    // iBegin Share control, and a list of parameters.
    render: function(callback, params)
    {
      // Create our HTML
      var container = document.createElement('div');
      var table = document.createElement('table');
      table.cellPadding = 0;
      table.cellSpacing = 0;
      table.style.border = 0;

      table.appendChild(createDocumentRow('pdf', 'PDF - Portable Document Format', params));
      table.appendChild(createDocumentRow('word', 'Microsoft Word, Wordpad, Works', params));
      container.appendChild(table);

      var iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.name = 'shre_sbmt';
      container.appendChild(iframe);

      // Pass the HTML as well as the params (they can be changed)
      // to the iBegin Share framework via a callback function.
      callback(container, params);
    }
  }
}();

And finally we need to register our plugin with the framework.

iBeginShare.plugins.register(iBeginSharePlugin_myPC);

Available public methods to plugins:

• label
label = 'My Plugin'
  Used for both the tab and heading label.
• requires
requires = ['link']
  Required parameters passed via the share button initialization.
• render
render = function(callback, params){}
  Called when the plugin is displayed. Should call callback(html, params) from within render.
• unload
unload = function(){}
  Called when the tab is unloaded (used for data storage in Email).

Enabling Statistics in Your Custom Plugin

Work in progress. Ask on the forums.

TopSkinning

New in Share 2.4

You can create skins, for both the link, and the actual share box by simply modifying some CSS. We also include several defaults.

Link Styles

To use a link style, you must specify it during the attachLink call as the 3rd argument. Below are the built-in styles. You may add your own by defining a share-link-[style] class in your CSS, which is applied to the share-link container.

• button
• text

TopBookmarks Services

The bookmarks system is flexible enough to allow you to add additional bookmarks to the list.

Add Bookmark Services

Due to the way Share plugins work adding a bookmark service is extremely easy. You will need to do three things to add a plugin:

1. Add an icon for this service, which will be a cleaned version of the service name in share/images/icons/. It should be formated as bm_<servicename>.gif and 40x40px dimentions.
   
   Example: MSN Live would be bm_msnlive.gif.
2. Call the addService method anywhere after share/script/share.js has been loaded.
   Example: iBeginShare.plugins.builtin.bookmarks.addService('Digg', 'http://digg.com/submit/?url=__URL__');
   Two variables are present in the second argument, the url, __TITLE__ and __URL__.

Configure Visible Bookmarks

You are also able to choose which bookmark services appear via editing share/script/share.js. Open up the file, and scroll to the bottom. Near the bottom you will see the list of services already added. Simply comment out any of these to disable them.

Note: To comment out a service place // at the beginning of the line.

Share Box Skins

To use a share box skin, you must specify it in the params passed to attachLink or show as the skin parameter. Below are the built-in skins. You may add your own by defining a share-skin-[skin] class in your CSS, which is applied to #share-box container.

You may also set the default skin values. The corresponding options are default_skin, default_link, and default_link_skin. These can be set by using iBeginShare.option = 'value'. For example, if you wanted to change the default link type to be text links, you could put iBeginShare.default_link = 'text'; in your JavaScript.

• default
• red
• orange
• green

To create your skin, we suggest downloading the uncompressed version of Share, and taking a look towards the end of the share.css file. You will find the included example skins there.

TopLicense