gs.content.js.sharebox

Author:Michael JasonSmith
Contact:Michael JasonSmith <mpj17@onlinegroups.net>
Date:2015-11-13
Organization:GroupServer.org
Copyright:This document is licensed under a Creative Commons Attribution-Share Alike 4.0 International License by OnlineGroups.net.

Contents:

Share dialog

The dialog is a Bootstrap Popover. It is divided in two parts.

The first part is a list of buttons for various social media services (currently Facebook, Twitter, and Google+). These buttons should only be shown available when the resource being shared is visible to the public (an anonymous viewer). Otherwise it encourages people to make a mistake by sharing something that is not visible.

The second part is an <input> element, with the URL in it. This allows people to copy and paste the URL for the object that is being shared. It is always available (but the recipient must have permission to view the URL).

gs.content.js.sharebox API

HTML

Within the document the URLs to share are <a> elements. The links to be shared need a title attribute, an href attribute, and content.

title:
The title attribute becomes the title of the popup widget.
href:
The href attributed contains the URL to share.
Link content:
The content of the link-element will become the text of the share-button that activates the popup.

Example

The following will create a button to share the link to the example group:

<a class="gs-content-js-share"
   href="http://groups.example.com/group/example_group"
   title="Example Group">Share</a>

JavaScript

The JavaScript for the Share dialog is contained in a resource:

<script
  type="text/javascript"
  src="/++resource++gs-content-js-sharebox-20151112.js"> </script>

Or a minified version:

<script
  type="text/javascript"
  src="/++resource++gs-content-js-sharebox-min-20151112.js"> </script>

The resource contains the GSShareBox() class:

class GSShareBox(button, public)
Arguments:
  • button (jQuery) – The link to be turned into a share button.
  • public (bool) – Set to true if the link can be shared publicly. (Social networks can only share links that are public. If the link is private then only the URL will be shown.)
init()

Complete the setup.

Example

The following turns all elements on the page that have the gs-content-js-share CSS-class into share buttons. It does this by applying the GSShareBox class to them after the window has loaded.

jQuery.noConflict();
jQuery(window).load(function(){
  var public = true;
  jQuery('.gs-content-js-share').each(function () {
    shareWidget = GSShareBox(this, public);
    shareWidget.init();
  });
});

Changelog

2.2.0 (2015-11-13)

  • Adding a Copy command
  • Naming the reStructuredText files as such
  • Switching to GitHub as the primary repository

2.1.2 (2014-06-03)

  • Metadata update

2.1.1 (2013-11-14)

  • Improving the wording of the Private (and Secret) version of the share-widget
  • Metadata update

2.1.0 (2013-06-06)

  • Using icons for the social-media services
  • Dropping support for Digg

2.0.1 (2013-05-30)

2.0.0 (2013-03-18)

  • Creating a new Share widget
  • Adding support for Google+
  • Using Twitter Bootstrap to provide the popover class

1.1.1 (2011-09-28)

  • Adding a TODO

1.1.0 (2011-02-18)

  • Adding some help

1.0.2 (2010-09-06)

  • Fixing some bugs

1.0.1 (2010-08-02)

  • Updating the metadata.

1.0.0 (2010-07-22)

Initial version. Prior to the creation of this product the user-interface for sharing was scattered around the gs.group.messages.* products.

This product provide the Share dialog for GroupServer. The code exposes a JavaScript API that allows a URL to be shared across many social media networks.

Indices and tables