問題タブ [twitter-button]

シンプルで高速な Web サイトを作成しており、サイトをできる限り最適化しようとしています。ソーシャル メディアのボタンが Web サイトの速度を大幅に低下させていることに気付きました。Facebook Like ボタン、Twitter ボタン、Google+ ボタンを含めます。そこで、いくつかのテストを実行しました。

ソーシャル メディア ボタンのないWeb サイト、読み込み時間 0.24 秒:

ソーシャル メディア ボタンのあるWeb サイト、読み込み時間 1.38 秒:

これが私のコードです：

そのため、ウェブサイトの読み込み時間を遅くすることなく、これらのソーシャル ボタンを読み込む方法をいくつか試しました。

JavaScript による 1 秒の遅延後のボタンのロード:

これは役に立ちませんでした。ボタンが正しくロードされず、バグが発生していました。

ドキュメントの準備ができた後の読み込みボタン:

これも役に立ちませんでした。ボタンは正常に読み込まれましたが、ウェブサイトの読み込み時間は依然として 1.00 秒を超えていました。

私はアイデアが不足しています。ウェブサイトの速度を落とさずにロードする方法はありますか?

PS。これらのテストでは、クロム用のページ読み込み時間プラグインを使用しました

解決：

CodeMonkey の回答に感謝し、ページ全体が読み込まれた後にソーシャル ボタンを読み込むことで、最終的にこの問題を解決しました。HTML/マークアップを少しきれいにするために、必要な JavaScript コード (ソーシャル メディア ボタン用) を別のファイルに移動しました。

JS (別のファイル social.js 内):

HTML:

したがって、この読み込みタイミングが再び正常になった後、0.24 秒:

複数のスライダーからのすべての値を平均する関数があります。その平均から取得したデータを取得して、ツイートに挿入しようとしています。例: 「この素晴らしいゲームをプレイして 100 ポイントを獲得しました!」ポイント値は明らかに平均値に基づいて動的に変更されます。私は Javascript/Jquery に非常に慣れていないため、回答の際には極端な量の詳細を含めてください。ありがとう！これが私のJqueryです：

HTML

Twitterボタンの単純なjavascriptバージョンの組み込みの利点をすべて取得できる比較的きれいな方法はありますが、ユーザーが実際にボタンをクリックするまで、かなり重いjavascriptの実行を延期しますか?

次のようなアンカー タグを作成できると考えています。

次に、次のような関数を定義します (注: 元の投稿を編集し、href を設定するようになりました):

Twitter 固有の JavaScript が通常挿入する画像とまったく同じに見えるようにするtwitter_button.gifと、Twitter 固有の JavaScript の実行は、基本的にユーザーにとって何もしないように見えます。これは非常に簡単です (Twitter のイメージがすべてのプラットフォームで同じであると仮定すると)。

うまくいけば、助けが必要な唯一のことはanchor_instance、Twitter の JavaScript が実行された後のクリックをシミュレートする方法を見つけることです。

私の目的は、javascript Twitter ボタンが提供する素敵なポップアップ (およびデフォルト) を維持することです。

ありがとうございました。

私は SocialEngine4 を使用しており、それに Twitter フォロー ボタンを統合しようとしています。ただし、ボタンが表示されていないため、ユーザーはボタンをクリックするとログイン画面が表示されます。

そのスクリプト コードを確認したところ、mootool が使用されていることがわかりました。SocialEngine4 も mootool を使用しています。そのため、いくつかの競合が原因で、Twitter ボタンが適切に生成されません。

Plan php でこのボタンのコードを試してみましたが、問題なく動作しています。

誰かがそれについて考えていますか？次のコードを使用してTwitterボタンを生成しています

ソーシャル メディア ボタン (youtube、twitter、facebook) があるサイトに Content-Security-Policy (CSP) ヘッダーを使用しようとしています。ただし、これらのウィジェットは、不十分に指定されたサード パーティ サイトのリストでスクリプトを実行します。ソーシャル メディア サイトでは、スクリプトがアクセスするすべてのサイトが指定されているわけではないため、ページを実行して、ブロックされたドメインを 1 つずつ見て確認し、それらを CSP ヘッダーに追加する必要があります。

これは非常に壊れやすいようです。ソーシャル メディア サイトがスクリプトを変更して新しいドメインを追加すると、ブラウザーが新しいドメインへのアクセスをブロックするため、ページが壊れます。

CSP は XSS を止めるのに非常に効果的ですが、ソーシャル メディア サイトでは、それと連携するように設計されたボタン/ウィジェットが提供されていないようです。少なくとも、1 つのドメインのみを必要とし、そのドメインが何であるかを特定する必要があります。

次のようなCSPヘッダーになります。

Content-Security-Policy: default-src 'self' https://www.google.com http://csi.gstatic.com http://www.google-analytics.com https://apis.google.com https://accounts.google.com https://platform.twitter.com https://www.youtube . com http://platform.twitter.com ; img-src '自己' データ: https://www.google.com http://www.google-analytics.com http://ssl.gstatic.com https://ssl.gstatic.comデータ:; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.comデータ:

これを行うより良い方法はありますか？

非常に単純なランダム引用符ジェネレーターを作成しました。一連の見積もりが配列に格納され、現在の見積もりを保持する変数に基づいて、任意の時点で表示されます。ユーザーが新しい見積もりの​​ボタンをクリックすると、その変数が変更され、新しい見積もりが表示されます。

ツイートに現在の引用を入力する Twitter ボタンをページに追加しようとしています。Twitter for Websites の Twitter ボタンの手順を使用し、関連資料を調べましたが、何が起こっているのかまだわかりません。現在、最初の引用は正常に機能しますが、「新しい引用」をクリックしても Twitter URL で引用が変更されません。

主なロジックは次のとおりです。

その他はすべてここにあります: https://jsfiddle.net/37szaqpr/