@madkings/pictahub

Pictawall - Social Hub Widget

Usage

The built version of the SocialHub is available on the NPM registry, you can install it using

npm install --save pictawall.socialhub

The include it using a script tag.

<script src="node_modules/pictawall.socialhub/dist/prod/pictahub.min.js">

That script will expose a function called pictawall.SocialHub on the global object. Invoking it wil instanciate a new Social Hub.

Usage examples are available under node_modules/pictawall.socialhub/examples

Note: It is fundamental that you do not modify the internal structure of the dist/prod folder and do not rename the main script as it is used to determine where the additionnal dependencies we need are located.

Supported Browsers

• Safari 6.2
• Chrome 26
• Firefox 25
• Opera 25
• IE 11

Configuration

Setting up a SocialHub is straightforward, you simply need to pass your hub configuration to the function.

pictawall.SocialHub({
    container: '#pictawall',
    eventIdentifier: 'social-media-night-stuttgart-1',
});

Configuration options are currently undocumented.

Script Hash Configuration

The Social Hub also supports putting the configuration directly in the script url, as the hash, or in a data-pictahub attribute on the containing div. It must be in a json format and encoded in base64.

<!-- Decodes to {"container":"#pictawall","eventIdentifier":"magritte"} -->
<script src="node_modules/pictawall.socialhub/dist/prod/pictahub.min.js#eyJjb250YWluZXIiOiIjcGljdGF3YWxsIiwiZXZlbnRJZGVudGlmaWVyIjoibWFncml0dGUifQ=="></script>

<!-- 
  Decodes to {"channelId":"24dee060-bd86-488e-acaa-659ac2e842e3"}. The div will be used as the container.
  The JavaScript file needs to be loaded after the div has been created for this version to work. 
  Either use the defer attribute or put the script at the bottom of the page.
-->
<div data-pictahub="eyJjaGFubmVsSWQiOiIyNGRlZTA2MC1iZDg2LTQ4OGUtYWNhYS02NTlhYzJlODQyZTMifQ=="></div>