2016-10-10 24 views
0

私は異なった記事でdivコンテンツをリフレッシュするウェブサイトに取り組んでいます。私は記事ごとにFacebookの共有ボタンを置く必要があります。 jQueryでAjaxでリフレッシュされますFacebookの共有ボタンとAjax

私が行うこと:article.phpページが呼び出され、ID値が送信されます。 URLは以下のようになります。

index.phpページで

http://www.website.org/index.php?page=article.php&id=892

は、私が用意しました:article.phpページで

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
<script> 
    // Facebook 
    (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/fr_FR/sdk.js#xfbml=1&version=v2.7"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 

</script> 

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

    FB.XFBML.parse(document.getElementById('fb_container')); 
}); 
</script> 

メタタグが更新されました。これは問題ありません。 共有ボタンが機能しません: - 最初の読み込みでは表示されますが、共有ページには画像とメタ情報が表示されません - 別の記事を読むと共有ボタンは表示されません

提案がありますか?

+0

JSでOGメタタグを設定することはできませんが、FBスクレイパーはJavaScriptを気にしません。 – CBroe

+0

最初のOGメタタグの定義は、別の記事を読み込むときにのみ動的に設定されます。最初の値を使用する必要がありますが、ここでは機能しません。 動的な変更の後に内容を解析するのは、FB.XFBML.parse関数の仕事ではありませんか? –

+0

AJAX経由でコードを読み込むと '$(document).ready'が実行されますか?そして、あなたはどのようにコンテンツを置き換えていますか?新しいものを動的にロードした後でも、探しているIDがDOM内で一意であることを確認しましたか? – CBroe

答えて

1

私はFacebookのリンクとFB.ui機能を含むページと呼ばれる別のAJAXを使用して解決策を見つけました:

index.phpの中で:

window.fbAsyncInit = function() { 
    FB.init({ 
     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); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 

function openFbPopUp(fburl,fbimgurl,fbtitle,fbsummary) { 
FB.ui(
      { 
      method: 'feed', 
      name: fbtitle, 
      link: fburl, 
      picture: fbimgurl, 
      caption: fbtitle, 
      description: fbsummary 
      } 
     ); 
}  

リフレッシュfacebook.phpにページをFacebookの共有リンクを含めて:

// 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"> 
</a> 
関連する問題