Adding sharing support to a social provider

Your provider can implement a share endpoint to allow users to share pages, images, links and text from the pages they browse.  Share differs from bookmarking in that it is a broadcast mechanism used to share information with other people.  For example, a share provider could implement an email interface in their panel.  Refer to the share api page for more detailed information.

The process is really simple:

  • add shareURL to your manifest created in the First Steps
  • create a page called share.html
  • re-install your social provider

Your manifest in index.html will change to look like:

var data = {
  // currently required
  "name": "Demo Social Service",
  "iconURL": baseurl+"/firefox16.png",
  "icon32URL": baseurl+"/firefox32.png",
  "icon64URL": baseurl+"/firefox64.png",

  "shareURL": baseurl+"/share.html?url=%{url}",

  // should be available for display purposes
  "description": "A short paragraph about this provider",
  "author": "Shane Caraveo, Mozilla",
  "homepageURL": "https://github.com/mixedpuppy/socialapi-demo/",

  // optional
  "version": "1.0"
}

Then add share.html to your website:

<!DOCTYPE html>
<html>
<head>
    <title>Demo Share Window</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    function onLoad() {
      $("#shared").text(location.search);
    }

    function share() {
      // The user has clicked share, you should now share it with their friends!
      window.close();
    }

    var shareData;
    addEventListener("OpenGraphData", function(e) {
      shareData = JSON.parse(e.detail);
      $("#shared").text(shareData.url);
      $("#data").text(e.detail);
      socialMarkUpdate(true);
    });
    </script>
</head>

<body onload="onLoad()">
  <div id="content">
    <h3>This window shares the url</h3>
    <div>Sharing: <div id="shared" class="textbox"></div></div>
    <div>Data: <div id="data" class="textbox"></div></div>
    <button onclick="share();">Share!</button>
  </div>
</body>
</html>

This share page will not do much, but it illustrates how you receive share data from Firefox so you can populate your share UI.