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.

 

Document Tags and Contributors

 Contributors to this page: Sheppy, Faldrian, Mixedpuppy
 Last updated by: Sheppy,