Skip to content

Instantly share code, notes, and snippets.

@gemmadlou

gemmadlou/howto.md

Last active January 2, 2018 17:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gemmadlou/9aecfadcdde6d9c2be8bce3bffe74dcc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gemmadlou/9aecfadcdde6d9c2be8bce3bffe74dcc to your computer and use it in GitHub Desktop.
Download ZIP
Click-to-Share on Facebook
Raw
howto.md

Facebook Share doc is here: https://developers.facebook.com/docs/sharing/reference/share-dialog

It doesn't require user authentication to share on facebook.

Testing tility: http://www.fbrell.com/saved/2779dc018c325d85d650a3b723239650

<div class="page-header">
  <h1>Share Dialog</h1>
</div>

<p>Click the button below to trigger a Share Dialog</p>

<div id="shareBtn" class="btn btn-success clearfix">Share</div>

<p style="margin-top: 50px">
  <hr />
  <a class="btn btn-small"  href="https://developers.facebook.com/docs/sharing/reference/share-dialog">Share Dialog Documentation</a>
</p>

<script>
document.getElementById('shareBtn').onclick = function() {
  FB.ui({
    method: 'share',
    display: 'popup',
    href: 'https://developers.facebook.com/docs/',
    quote: 'What a wonderful world'
  }, function(response){});
}
</script>

Alternatively you can use their quote to share instead:

https://developers.facebook.com/docs/plugins/quote

You may have to correctly set up the facebook og meta tags.

Raw
index.html
<html>
<head>
<title>Gemma And Her Facebook Test</title>
<!-- Comment #1: OG Tags -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Comment #2: SDK -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Comment #3: Content -->
<h1>Your Headline</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh,
vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim,
vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer
pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus.
</p>
<!-- Comment #4: Plugin Code -->
<div class="fb-quote"></div>
</body>
</html>
Raw
share-button.html
<html>
<head>
<title>Gemma And Her Facebook Test</title>
<!-- Comment #1: OG Tags -->
<meta property="og:url" content="http://dev.roxxibox.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Comment #2: SDK -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 950576378426903, // ADD YOUR appID
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Comment #3: Content -->
<h1>Your Headline</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh,
vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim,
vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer
pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus.
</p>
<button id="shareBtn">
Share as a FB ui
</button>
<p>
<a href="https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&quote=Live like a super human&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer">
Share as a link</a>
</p>
<!-- Comment #4: Plugin Code -->
<div class="fb-quote"></div>
<script>
document.getElementById('shareBtn').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: 'http://dev.roxxibox.com',
quote: 'What a wonderful world'
}, function(response){});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment