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.