3

新しいページに fb ライク、google+1、つぶやきボタンなどを追加したいと考えています (特定の投稿を表示する場合)。たとえば、 addthis はデフォルトでこれを提供することを知っています。しかし、欠点は、時折いくつかのエラーをスローする、やや大きな JavaScript ファイルを取得することです。だから私の質問は次のとおりです。同様のシナリオで、どのオプションと、なぜあなたたちは通常行くのですか. ありがとう

4

1 に答える 1

4

addthis によるインクルードは、ソーシャル ボタンをインクルードするための私の好みの方法ではありません。実際、お気づきのように、いくつかのエラーがスローされ、addthis ライブラリが失敗した場合 (javascript エラー、サーバー タイムアウトなど) 、すべてのボタンが失敗する可能性があります。さらに、単純なパフォーマンスの問題として、addthis は他のスクリプト (33kb の gzip 圧縮済み) をロードするスクリプトであるため、回避でき、ソーシャル ボタンの組み込みを完全に制御できます。

私は、必要なすべてのライブラリを非同期でロードし、本当に必要な場合にのみ必要なマークアップを挿入することを好みます。このように

$(document).ready(function() {

    if (('.socialshare').length) {

       /* twitter button */      
       $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>').appendTo($('.socialshare'));
       loadscript('//platform.twitter.com/widgets.js', 'twitter')

       /* Google +1 button */      
       $('<div class="g-plusone" data-size="medium" data-annotation="bubble"   data-expandTo="top"></div>').appendTo($('.socialshare'));
       loadscript('https://apis.google.com/js/plusone.js', 'google-plusone');
    }

})

(パフォーマンスのために、 への参照をキャッシュします.socialshare) loadscriptは、このような単純なスクリプト ローダー関数です。

function loadscript(url, id) {
    var js, fjs = document.getElementsByTagName('script')[0];
    if (document.getElementById(id)) { return; }
    js = document.createElement('script'); 
    js.id = id;
    js.charset = "utf-8";
    js.src = url;
    fjs.parentNode.insertBefore(js, fjs);
};

基本的に、テンプレートにソーシャル ボタン (.socialshare要素) を持つ要素が含まれている場合は、スクリプト要素に ID を挿入します (他のスクリプトがそれらを 2 回挿入できないようにするため)。

于 2011-12-18T16:33:48.363 に答える