Pepi San Pepi San - 1 year ago 81
Ajax Question

Facebook share button and Ajax

I'm working on a website refreshing a div content with differents articles. I have to put a Facebook share button for each article.
The refreshing is done in Ajax with jQuery

What I do :
with the article.php page called, I send an ID value. The URL looks like that :

In the index.php page, I've included :

<script src=""></script>
// Facebook
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


In the article.php page,

<div id="fb_container" class="fb-share-button" data-href="<?PHP
$url = "".$id;
echo $url;
?>" data-type="button_count">
$(document).ready(function() {
$('meta[property=og:title]').remove(); $('head').append('<?PHP echo $titre['contenu']; ?>');
// Same for the others meta tags


The meta tags are updated, that's ok.
But the share button doesn't work :
- in the first load, it is visible but the shared page doesn't display the image and meta informations
- when we read another article, the share button isn't displayed

Any suggestion ?

Answer Source

I've find a solution using an another ajax called page including the Facebook link and the FB.ui function :

in the index.php :

  window.fbAsyncInit = function() {
      appId      : 'Your id app',
      xfbml      : true,
      version    : 'v2.8'

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); = id;
     js.src = "//";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

function openFbPopUp(fburl,fbimgurl,fbtitle,fbsummary) {
            method: 'feed',
            name: fbtitle,
            link: fburl,
            picture: fbimgurl,
            caption: fbtitle,
            description: fbsummary

in the refreshed facebook.php page including the facebook share link :

// here the connection to the MySQL database
// read the values of the id element

<a onclick="openFbPopUp('<?PHP echo ($url_fb); ?>','<?PHP echo ("http://".$_SERVER['SERVER_NAME']."/".$photo['url_photo']); ?>','<?PHP echo ($titre['content']); ?>','<?PHP echo (substr(addslashes($description['content']),0,200)."..."); ?>')" value="SHARE">
<img src="images/fb-share.png">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download