On 2015-05-26 at 09:00 PST, MDN search will be unavailable for 5-10 minutes for system maintenance.

Your Search Results


    This is preliminary documentation and is subject to change.  Social Bookmarks is available from Firefox 26.

    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>
        <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() {
        function socialMarkUpdate(isMarked) {
            var evt = document.createEvent("CustomEvent");
            evt.initCustomEvent("socialMarkUpdate", true, true, JSON.stringify({marked: isMarked}));
        var shareData;
        addEventListener("OpenGraphData", function(e) {
          shareData = JSON.parse(e.detail);
    <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>

    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,