Facebook share button displaying wrong information in "box_count"

Question

In a wordpress-based project that I’m working on, I have a modal that dynamically receives various information coming from a post-loop.

This modal serves as a kind of "Preview" the full post.

Within this modal there should be sharing options (Facebook, + g, twitter, etc).

The Urls that will be used by the share buttons are the complete post urls. To pass the values dynamically I use Javascript.

Until then, everything works fine. The problem is that when you share the post, the counter on the facebook button does not increase. To display the current share number is required to close the modal and open it again.

I think it is necessary to reopen the modal due to the use of FB.XFBML.parse(); to update the url.

I wonder if there is a way to reload the button to display the correct information without closing the modal? As a callback function to reload the facebook button when the user shares the content?

Part of the modal html code:

    <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/all.js#xfbml=1&version=v2.0";
           fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
     </script>
     <fb:share-button id="fb_share_quick" href="#" layout="box_count" width="58"></fb:share-button>

Part of the javascript code that changes the url:

jQuery('.showPreview').on('click', function() {
    jQuery('fb\\:share-button').attr('href', 'http://google.com');
    FB.XFBML.parse();
});

Can someone give me some hint on how I can fix this?

Answer 1

I don’t know if I got it right but from what I’ve noticed you want to show share buttons on Frontpage for the proper posts/posts is this?!

use this instead of loading more JS on your wordpress site:

HTML

<a class="random-class-button" href="http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>" target="_blank"><img title="Facebook" alt="Facebook" width="38" height="38" src="http://2.bp.blogspot.com/-Lqo1eJjzHyE/UypQ90roR-I/AAAAAAAACyI/EOQYZGrz1qI/s1600/facebook-logo.png"></a>

CSS

.random-class-button{
/* background:green; personaliza a class à tua maneira */
}