FirstSteps

Social Providers are little more than a set of web pages designed to be included as a part of Firefox UI.  There is a manifest to define what functionality you support and the urls that Firefox will load.

  • Decide what functionality your provider will support (we'll step you through all of them).
  • You can easily use node.js during development.

You'll need a way for users to install your social provider.  This is outlined in detail on the manifest documentation.  For starters, you can easily copy the following html to your index.html page, replacing the field values with something more apropriate for your service.

This document discusses features which are no longer supported; the Social API is now primarily used for sharing rather than features like chat, and no longer supports sidebars and other Social UI components.

<html>
<head>
  <title>Demo Social Service</title>
</head>
<script>
var loc = location.href;
var baseurl = loc.substring(0,loc.lastIndexOf('/'));
var data = {
  // currently required
  "name": "Demo Social Service",
  "iconURL": baseurl+"/firefox16.png",
  "icon32URL": baseurl+"/firefox32.png",
  "icon64URL": baseurl+"/firefox64.png",
  "sidebarURL": baseurl+"/sidebar.html",
  // 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"
}
function activate(node) {
  var event = new CustomEvent("ActivateSocialFeature");
  node.setAttribute("data-service", JSON.stringify(data));
  node.dispatchEvent(event);
}
</script>
<body>
  <button onclick="activate(this)" title="activate the demo provider">Activate The Demo Provider</button>
</body>
</html>

Next, create a simple sidebar.html file:

<html>
<head>
    <title>Demo</title>
</head>
<body>
<p>This is my sidebar</p>
</body>
</html>

 

Given the above two files, you should now be able to install your provider into Firefox.  Simply visit the index.html page and click on the activation button.  Your provider will also show up in the Add-ons Manager under the Services tab.

 

 

 

Document Tags and Contributors

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