category: facebook

JavaScript - facebook save to facebook button

on 2016-04-20

JavaScript - facebook save to facebook button

2016 F8

Facebook release new function - save to facebook

Then we can use it now

Step 1

Go to facebook developer Save Button - Social Plugins - Documentation - Facebook for Developers

Step 2

Build or use facebook application

If you had facebook application can skip this step

If you build facebook application and you can get this code

window.fbAsyncInit = function() {
    appId      : '<YOUR APP ID>',
    xfbml      : true,
    version    : 'v2.6'

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Put it in your website

Step 3(Finally

Add <div class="fb-save" data-uri=""></div>

data-uri is your current page url

You can use this js code dynamic add url

document.querySelectorAll('.fb-save')[0].setAttribute('data-uri', document.location.href);


螢幕快照 2016-04-20 上午11.15.59.png

螢幕快照 2016-04-20 上午11.16.09.png

Then it can show on facebook saved

螢幕快照 2016-04-20 上午11.16.17.png

Read more

JavaScript - custom facebook share button

on 2014-05-23

JavaScript - custom facebook share button

Facebook support share API to people and it is easy to use. But sometimes we need customize share button style in our web. We can use 2 way.

Simple way


<a href="" class="custom">Share</a>

and then you can use CSS custom a style.

But this only can catch current url to share to facebook.

2. Use facebook JavaScript SDK

This way is powerful


<div id="fb-root"></div>
<a href="" data-image="Article img url" data-title="Article Title" data-desc="Some description for this article" class="fb_share">
	<img src="" alt="" width="50" height="50">


window.fbAsyncInit = function() {
        appId: <your facebook app id>,
        status: true,
        cookie: true,
        xfbml: true

(function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];if   (d.getElementById(id)) {return;}js = d.createElement('script'); = id; js.async = true;js.src = "//" + (debug ? "/debug" : "") + ".js";ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));

function postToFeed(title, desc, url, image) {
    var obj = {method: 'feed',link: url, picture: image,name: title,description: desc};
    function callback(response) {}
    FB.ui(obj, callback);

var fbShareBtn = document.querySelector('.fb_share');
fbShareBtn.addEventListener('click', function(e) {
    var title = fbShareBtn.getAttribute('data-title'),
        desc = fbShareBtn.getAttribute('data-desc'),
        url = fbShareBtn.getAttribute('href'),
        image = fbShareBtn.getAttribute('data-image');
    postToFeed(title, desc, url, image);

    return false;

This way can customize share url facebook og information href = url you want share, must have link data-image = image you want show on facebook, if not value it can catch origin og data-title = title you want show on facebook, if not value it can catch origin og data-desc = description you want show on facebook, if not value it can catch origin og

facebook opengraph custom facebook share button

Read more