facebookhtmlfb.ui

Create a custom Facebook Share link


So this question has been asked before, but no one wants to do it in the manner that I want to, so bear with me while I try and explain. The FB.ui API has some functions that I find useful, mainly that I can dynamically change the description. So, I want to put the FB.ui into a link that a user can click and then a pop up will appear where they can share my webpage. So far what I have is:

<div id="fb-root"></div>
    <script>
 function shareFB(){

      window.fbAsyncInit = function() {
        FB.init({
          appId      : '42352352356463',
          status     : true,
          xfbml      : true
        });
        FB.ui(
  {
   method: 'feed',
   name: 'name',
   caption: 'caption',
   description: (

    a
   ),
   link: 'http://www.image.com/',
   picture: 'http://www.image.com/static/3.png'
  },
  function(response) {
    if (response && response.post_id) {
      alert('Post was published.');
    } else {
      alert('Post was not published.');
    }
  }
);
      };

      (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/all.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));

}
</script>

and then I have a link to this here:

<a class="links" onclick='shareFB()' href="#"> Share! </a>  

But this doesn't work. Why not!


Solution

  • You are loading the facebook SDK when you click the button and that's the wrong way to load it, change your script to this:

    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
        FB.init({
          appId      : '42352352356463', // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });
    };
    
    
    // Load the SDK Asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/pt_PT/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));
    
    
    function shareFB(){
        var obj = {
            method: 'feed',
            name: 'name',
            caption: 'caption',
            description: 'description',
            link: 'http://www.image.com/',
            picture: 'http://www.image.com/static/3.png'
        };
    
        function share(response){
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
        }
        FB.ui(obj, share);
    };
    </script>