1

私は現在、ソーシャル ネットワーク (Facebook、Twitter、LinkedIn、Google+) でサイトの記事へのリンクを共有できるようにすることを決定した研究データベースでいくつかの作業を行っています。

できれば、これはそれぞれのネットワークが提供する共有ボタンを介して行う必要があります。各ネットワークからの実装指示に従うことで、すぐにボタンが機能し、サイトに正しく表示されるようになりました。

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

悲しいことに、これはソーシャル ネットワークによって提供される JavaScript を停止することを提案し、それを停止することを選択したかどうかにかかわらず、ブラウザーを圧倒しているようです。ページはソーシャル ネットワークからの応答を待ってデッドロック状態になり、ページの読み込みプロセスを決して終了しません。 .

問題は、大量の非同期リクエストが原因で、ブラウザが応答の一部を見逃してしまい、応答が永遠に来ないことを意味している可能性があるという考えがあります。

前述のように、投稿が非常に多い場合にのみ問題になります。たとえば、ページに 100 件の投稿 (事実上 400 個の共有ボタン) が表示されている場合、完全に機能します。

1 ページに 1000 件の投稿はやり過ぎだと主張することもできますが、残念ながら、表示される投稿の最大数を制限することはできません。

したがって、私の質問は、この種の問題を解決する方法を知っている人がいるかどうか、または私の唯一の現実的な選択肢は、ソーシャルネットワークによって提供される JavaScript を介して作成する必要のないカスタム共有ボタンを作成することであるかどうかです。

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

4

1 に答える 1

3

これらすべてのボタンには、重い作業を行うメインの js ファイルがあります。したがって、LinkedInの場合は、script タグを追加します。

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

ページに一度。以下のスクリプトを、必要に応じてリンクイン ボタンのプレースホルダーとして使用してください。data-url(以下のスクリプトで属性を置き換えることを忘れないでください)

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

Twitterの場合も同様に、メインの js ファイルを取得してページに追加するのが仕事であるため、以下のスクリプト タグをページに 1 回追加する必要があります。

<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. ページの読み込み時にのみこれらのスクリプトを実行します (つまり、読み込み時にメイン スクリプトを追加します)。
  2. setTimeoutまたはを使用してsetInterval、一度に 100 個のプレースホルダーごとに作業します (メイン スクリプトの変更が必要です)
  3. 同様のボタンの初期化を遅延ロードします。ユーザーがページをスクロールすると、いいね ボタンがページに表示され、ボタンを初期化します (メイン スクリプトの変更が必要です)。
  4. 推奨されるアプローチ: いいねボタンを 1 セットだけ保持します。ユーザーが検索結果にカーソルを合わせたら、この一連のボタンをその div に追加し、ボタンの URL に関連する属性を変更します。この方法では、1 セットのボタンのみが表示され、それらを初期化するのにまったく時間がかかりません。
于 2012-04-14T11:20:13.127 に答える