Facebook : How to place save to Facebook button on your website

Just a quick tutorial on how to place the save to Facebook button on a web page. Instead of bookmarking to a browser, it has become handy for many people to bookmark an URL or save to Facebook for later viewing again.

---

---

The steps are pretty simple:

1. Get a Facebook app for your website if you haven't done so. You will need the app ID later on. Visit https://developers.facebook.com/apps/ and click on the Add a New App green button.

2. Install the Facebook JavaScript SDK on your website. Get it from https://developers.facebook.com/docs/javascript/quickstart

   Fill in your App ID and place the code below on your web page's header section.

     <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId : 'your-app-id',  <---------- your APP id
    autoLogAppEvents : true,
    xfbml : true,
    version : 'v2.9'
    });
    FB.AppEvents.logPageView();
    };
   
    (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";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
   

3. Finally, on your web page where you want the save to Facebook button to appear. Add this <div>.

     <div class="fb-save" data-uri="https://socketloop.com/tutorials" data-size="large"></div>
   

Explaination for the parameters:

data-uri = URL that you want your user/visitor to save

data-size = how big the button you want it to be. "large" or "small"

Of course, it makes more sense by programmitically changing the value of the data-uri to the current URL the user is viewing. For example, with PHP CodeIgniter's current_url() function

 <div class="fb-save" data-uri="<?php echo current_url(); ?>" data-size="large"></div>

or Golang's get current url function at https://www.socketloop.com/tutorials/golang-get-current-url-example

Once saved to Facebook, this is how it looks like:

---

---

and Mark Zuckerberg will be happy because you just let Facebook leverage on your website traffic...

anyway happy coding!