ウェブ技術が好きjavascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログこの広告は、90日以上更新していないブログに表示しています。Twitter写真はうちのみーこが子猫だった頃。「ツイート」ボタンを表示しているサイトが抱える共通の課題に「ツイートボタンの表示が遅い&重い」があります。ツイートボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。この遅くなる&重く感じる理由は、ページ表示タイミングで各スクリプトの読み込みと初期化が一斉に行われている中でTwitterスクリプトも同じく読み込みと初期化が行われているためです。ページを読み進めてツイートボタンが表示された時に初めて初期化するなど、ページ読み込み時ではなく任意のタイミングでTwitterスクリプトの読み込み・初期化・表示を行うとこの課題を解決できます。以下、任意のタイミングでTwitterスクリプトを初期化してツイートボタン表示まで行うサンプルコードです。任意のタイミングを1.5秒後として初期化を行う。1500);個別に説明して行きます。Websitesの内容ままです。利用できるようになります。"twitter-wjs"));次にloadの完了とツイートボタンをclickした時のイベントを追加します。初期化時に引数で指定しています。Eventsで説明されている内容です。イベントの主な用途にはGoogleAnalyticsでツイートボタンをクリックされた回数をトラッキングする等があります。});任意のタイミングでTwitterAPIを初期化して同時に実行したいハンドラーを引数に指定します。1つ目のハンドラー内でシェアボタンを動的に作ります。Functionで説明されています。2つ目のハンドラー内でツイートボタンを押してくれた人に向けて感謝のメッセージを動的に表示します。);以上でツイートボタンを快適に表示できるようになりました。CodePenにデモを設置しました。Penを押して挙動を確認して下さい。codepen.ioこの記事はレコーディングダイエットができるウェブアプリを開発した中で「Twitterで共有する」機能を実装している中で色々調べた内容をまとめたものです。tkosuga.jpインストール必要なしブラウザで動作するのでよかったら試して見て下さいね。