how to add a Facebook save button to your website.

Many of us have some bookmark extension or google keep or pocket to bookmark important links that you can access later. Recently facebook introduces “Save” button to keep all the links bookmarked. It’s very handy when someone visited your blog/website, they can bookmark your link to facebook so they can read it later, you can be categorized it like photo, links, places, videos etc, Amazing isn’t it.

In this post I will show how easily you can integrate facebook save button to your website or blog.

First, check out my demo, you can found “Save to Facebook” button under this post title.

facebook_save_button

First, you need to install facebook javascript SDK in your website. get SDk from here

https://developers.facebook.com/docs/reference/javascript/

Then paste below code to in the head section of your site.

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=496223437090509";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Now add save button HTML code wherever you want to place on your site.

<div class="fb-save" data-uri="https://coderexample.com/restful-api-in-lumen-a-laravel-micro-framework/" data-size="large"></div>

data-uri defines your link which you want to share.

you can set data-sizelarge” or “small” according to your site user interface.

That’s all folks, let me know in the comment section that saves button is useful or not.

  • Nicola Grey

    Superb. Daily i visit so many blogs, its really handy to keep all in one place. Hope all my favorite blog will integrate it asap.

  • Viji

    Hiya, Thanks. how to add data-uri for current page to bookmark?