Create a custom Facebook Share link

Question

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!

Answer 1

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>