1つのページにソーシャルネットワーク用の多くの共有ボタン

Question

私は現在、ソーシャルネットワーク（Facebook、Twitter、LinkedIn、およびFacebook）のサイトからの記事へのリンクを共有できるようにする調査データベースでいくつかの作業を行っています。 Google+）。

これは、それぞれのネットワークが提供する共有ボタンを使用して行うことをお勧めします。私はすぐに各ネットワークからの実装の指示に従って、サイト上でボタンを正しく動作させて表示させました。

私の問題は、サイトが単一の検索結果ページで1000（1K）記事を表示する可能性について提供していることの結果です。つまり、このようなページが作成されると、ソーシャルネットワークごとに1000の共有ボタンを作成する必要があります（事実上4000）。

悲しいことに、これは、ソーシャルネットワークによって提供されるjavascriptを停止するようにブラウザを圧倒しているように見えます。また、停止するかどうかにかかわらず、ページはソーシャルネットワークからの応答を待って、ページ読み込みプロセス。

多くの非同期リクエストは、ブラウザが何らかのレスポンスを見逃してしまって、決して来ないレスポンスを永遠に待ってしまうという問題があるという考えがあります。

としては、例えば、ページ100のポスト（効果400株のボタン）が表示された場合、それは完璧に動作し、ポストのような多数の唯一の問題で述べました。

1つのページに1000ポストが残虐であると主張できますが、表示されるポストの最大数を制限することは悲しいことではありません。

この種の問題を解決する方法を知っている人がいるか、ソーシャルネットワークによって提供されるjavascriptで作成する必要のないカスタム共有ボタンを作成することだけが私の唯一の選択肢である？

次の参照は、各共有ボタンのドキュメントにつながります。すべてのこれらのボタンについては

• Twitter
• Facebook
• LinkedIn
• Google+

Answer 1

、重い作業を行うメインのjsファイルがあります。ページに一度

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script> 

： だから、LinkedInのため、スクリプトタグを追加します。また、必要に応じてリンクされたボタンのプレースホルダとして以下のスクリプトを使用します。同様にTwitterのについては

<script type="IN/Share" data-url="http://developer.linkedin.com/plugins/share-plugin-generator" data-counter="top"></script> 

は、以下のスクリプトタグは、仕事がメインのjsファイルを取得することですと、ページに一度追加する必要があります（下記のスクリプトでdata-url属性を置き換えることを忘れないでください）それをページに追加します。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

以下のスクリプトは、必要なときに何度も追加する必要があります。data-url属性をクリックしたときにツイートする必要のあるURLに置き換えます。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://dev.twitter.com" data-via="your_screen_name" data-lang="en">Tweet</a> 

あなたは一度、その後、あなたが必要と追加するコードを追加する必要があるスクリプトを取得します、のようにあなたがFBまたはGoogle Plusのコードを取得します。

編集：以下のコメントをもとに ：彼らはボタン「のような」格好良いにそれぞれ、すべてのプレースホルダを変換する必要があるため、スクリプトが確実に問題が発生します。以下は、パフォーマンスを向上させるためにいくつかの方法があります。

1. は（一度にすべての100のプレースホルダに取り組むだけsetTimeoutかsetIntervalを使用して、ページのロード（すなわち、負荷時の主なスクリプトを追加）
2. にこれらのスクリプトを実行しますメインスクリプトの変更が必要）
3. ボタンのようなボタンの初期設定を遅らせる。ユーザーがページをスクロールしてページ内に同様のボタンが表示されたら、ボタンを初期化する（メインスクリプトの変更が必要）
4. 推奨アプローチ：好きなボタンを1つだけ残しておきます。ユーザーが検索結果にカーソルを合わせると、そのボタンのセットがそのdivに追加され、ボタンのURLに関連する属性が変更されます。この方法では、1セットのボタンだけが表示され、それらを初期化するのに時間がかかりません。