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
shareURLto 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="https://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.