Facebook share button

Introduction

The share button provides an easy to use access into the Facebook share dialog, as well as some other functionality such as the button counter.

Need to create an application AppID
Include the Facebook JS SDK
Note the language needs to be configured for the SDK
Include the code in the Angular run to load and init the SDK

Setup

There are essentially three ways to call the share dialog. through the provided Facebook button, Javascript of a link.

Can also invoke the share dialog directly through JavaScript, this has the added advantage of being able to be used on a custom button.

Trigger a Share Dialog using the FB.ui function with the share method parameter to share a link.
Need to implement

Default

= codeBlender "share-button", "social/facebook/share-button", { href: "http://drykiss.com/" }

<div class='fb-share-button' data-href='http://drykiss.com/' data-layout='icon_link' data-mobile-iframe='true' data-size='small'></div>

Button count

= codeBlender "share-button", "social/facebook/share-button", { href: "http://drykiss.com/", layout: "button_count" }

<div class='fb-share-button' data-href='http://drykiss.com/' data-layout='button_count' data-mobile-iframe='true' data-size='small'></div>

Javascript Share dialog

= codeBlender "share-button", "social/facebook/share-button", { href: "http://drykiss.com/", type: "javascript" }

<a href="javascript:;" class="facebookShareButton" data-url="http://drykiss.com/"><span class='fa fa-facebook-official fa-fw fa-3x'></span>


</a>

Link Share dialog

= @code

<a href="https://www.facebook.com/dialog/share?mobile_iframe=true&amp;app_id=253027968192447&amp;display=popup&amp;href=https://codeblender.net&amp;redirect_uri=https://codeblender.net"><span class='fa fa-facebook-official fa-fw fa-3x'></span>


</a>

Resources Useful websites and tutorials

Title	URL
Share button	https://developers.facebook.com/docs/plugins/share-button/
Share dialog	https://developers.facebook.com/docs/sharing/reference/share-dialog
Sharing for webmasters	https://developers.facebook.com/docs/sharing/webmasters
Sharing best practices	https://developers.facebook.com/docs/sharing/best-practices

Tasks

Task	Date
Create the ability to invoke the share dialog without the button : https://developers.facebook.com/docs/sharing/reference/share-dialog
Error if a URL is not present - do not default

Code Blender

An atomic Middleman partials library