Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Bookmarks

Obsolete since Gecko 51 (Firefox 51 / Thunderbird 51 / SeaMonkey 2.48)
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

The Social Bookmarks API has been deprecated and will be removed from Firefox. Please don't use it anymore.

Adding Social Bookmarking

Your provider can implement bookmarking, or save-for-later, through a toolbar button using SocialAPI. 

The process is really simple:

  • add markURL to your manifest created in the First Steps
  • create a page called marks.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",

  "sidebarURL": baseurl+"/sidebar.html",

  "markURL": baseurl+"/mark.html?url=%{url}",
  "markedIcon": baseurl+"/unchecked.jpg",
  "unmarkedIcon": baseurl+"/checked.jpg",

  // 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 mark.html to your website:

<!DOCTYPE html>
<html>
<head>
    <link id="siteicon" rel="icon" href="./icon.png"/>
    <title>Demo Bookmark 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);
      socialMarkUpdate(true);
    }
    function socialMarkUpdate(isMarked) {
        var evt = document.createEvent("CustomEvent");
        evt.initCustomEvent("socialMarkUpdate", true, true, JSON.stringify({marked: isMarked}));
        document.documentElement.dispatchEvent(evt);
    }

    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()" contentid="content">
  <div id="content">
    <h3>This window shares the url</h3>
    <div>Page Marked: <div id="shared" class="textbox"></div></div>
    <div>Data: <div id="data" class="textbox"></div></div>
    <button onclick="socialMarkUpdate(false); window.close()">Unmark</button>
    <button onclick="window.close();">Close</button>
  </div>
</body>
</html>

This bookmark page will not do much, but it illustrates how you receive bookmark data from Firefox, and how you can "unmark" a page.

Document Tags and Contributors

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