2017-08-08 3 views
7

まず、私がprerender.ioを使用していることを明確にしたいと思います。 FacebookにURLを貼り付けると、サイトが正しく共有されます。ソーシャルネットワークでの共有に問題があるAngularjs

問題は、私がサイト上に持っているソーシャルネットワークのLike/Tweetボタンにあります。

1)最初の問題は、Facebookのボタンとコメントセクションが「時には」表示されるということです。場合によっては表示されることもありますが、ページを更新するか、別のページをロードすると、ボタンは表示されません。私は根本的な原因を得るために関係を見つけることができませんでした。... 2)2番目のものは、共有するボタン(Facebook)とツイート(Twitter)が完全なURLをロードしないときです。 URLは、サーバー+ページへのルート+ビデオのID(ビデオを見るためのWebページ)で構成されています。しかし、いくつかのケースでボタンをクリックすると、ビデオIDはURLにはなく、非常に奇妙です。 https://www.granojo.com/video/10334

コードは次のとおりです:

私が話しているサイトへのリンクがある

<div class="text-center"> 
    <div class="fb-like" style="top: -5px;" data-send="true" data-href="{{ENVIRONMENT.WEB}}/video/{{values.object.id}}" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div> 
    <a data-url="{{ENVIRONMENT.WEB}}/video/{{values.object.id}}" data-text="{{values.object.name}}" href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-hashtags="{{values.object.name | nospace}}">Twittear</a> 
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
    <!-- Place this tag where you want the +1 button to render. --> 
    <div class="g-plusone" data-size="medium" data-href="{{ENVIRONMENT.WEB}}/video/{{values.object.id}}"></div> 

    <!-- Place this tag after the last +1 button tag. --> 
    <script type="text/javascript"> 
     window.___gcfg = {lang: 'es'}; 

     (function() { 
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
      po.src = 'https://apis.google.com/js/plusone.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
     })(); 
    </script> 
</div> 

そして、私のcore.runに私が持っている:

$window.fbAsyncInit = function() { 
    FB.init({ 
     appId: 'xxxxxxx', 
     xfbml: true, 
     version : 'v2.6' 
    }); 
}; 
(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/es_LA/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
} 

答えて

8

あなたの機能を呼び出されていないようです。私は手動でChromeのコンソールでwindow.fbAsyncInit();を実行し、ボタンのようなあなたのFacebookはうまくロードされました。 fbAyncinit();が適切なタイミングで呼び出されていないようです。

あなたが何かをクリックしたときに、私はloadイベントに関数を結合するので、ページは、単純なコールのロードが終了したとき:そのdoesntの仕事は、私はそれを呼び出す前に、おそらく250msの小さな遅延を追加したい場合

window.fbAsyncInit(); 

を。

+1

すごくうまくいった!ありがとう! Twitterと同じ問題について考えてみませんか?時にはそれはボタンの代わりにリンクとしてちょうどapperas(私はTweetボタンについて話しています( – Faabass

+1

@Faabass私はそれが同じ問題だと思います。右の答えとしてください:) – Deckerz

関連する問題