CrystalSnowman.comTweetプラグインを使わずに「はてな」やTwitterのブックマークをブログに追加しました。余分なファイルを削除でき、Javascriptの読み込み位置をカスタマイズできるのでページの読み込みが早くなりました。パフォーマンスを向上させて評価されるサイトを目指します。まとめソーシャルブックマーク追加方法プラグインを使わずにブックマークを追加する方法を紹介します。Light」プラグインを使用していました。「はてな」やTwitter、facebookのブックマークを簡単に追加できます。このようにページにブックマークが追加されます。プラグイン使用時のソースプラグインによって追加されたブックマークのhtmlを見ると以下のようになります。/></a></p>これらは本来1行で出力されます。分かりやすくするため改行とインデントを入れています。3行目は「はてな」用リンクです。4行目は「はてな」用Javascriptです。7行目はTwitter用リンクです。html5に対応してないページでも表示できるようにiframeタグを使用しています。プラグイン使用時の気になる点4行目のJavascript要素は読み込みタイミングを考えると、リンクの近くではなく</body>タグの近くに記述したいです。ページ全体のデザインを左右するものではないので、読み込みが最後でも問題ないと思います。Javascript読み込みタイミングについては以下のサイトが参考になります。memocarilogまたページのトップとボトムにブックマークを配置すると、同じJavascript要素が2回記述されます。これも1回にしたいです。Twitterについてはiframeを使用しているので他のhtmlファイルをheadからbodyまで読み込んでいることになります。これも表示するソース量が増えてしまいます。このようにプラグインを使用するとソースの量が増え、Javascript要素の読み込み方法を制御できないのでパフォーマンスが劣化する可能性があります。ソーシャルブックマークのコードソーシャルブックマークはそれぞれの公式サイトからコードが公開されています。そのコードを直接ページに張り付ければブックマークを追加できます。Web「はてな」とTwitterを追加してみます。「はてな」Twitter今回こちらのサイトを参考にさせていただきました。公式サイトでデザインを決めコードをページに貼り付けます。コードはページのurlとタイトルを指定する部分をWordPressのコマンドに置き換えます。これによりページごとにボタンの設定が自動的に設定されます。?>単一記事の投稿にのみブックマークを表示したいのでsingle.phpにコードを追加します。実際のソースは以下です。?>ブックマークを追加したい場所にaタグを追加しています。Javascript要素はaタグから切り離しました。</body>タグの近くに記述したいのでfooterの近くに記述しました。以下のサイトを参考に「はてな」とTwitterのJavascript要素を非同期読み込みに設定しました。コード内のasyncの記述です。fragmentary結果プラグインを使わずにソーシャルブックマークを追加できました。Javascriptの記述位置もボトム付近に配置でき、非同期読み込みも実現できました。パフォーマンスについては若干早くなった気がしますが、体感できるほど劇的に向上したわけではありません。削除する」という観点でサイトを改善できたと思います。今回はJavascriptの非同期読み取りなどちょっと複雑な情報が出てきました。Javascriptについてもっと知りたいという方にお勧めの本を紹介します。Javascriptについてまず短時間でざっくり理解したいという方は次の本がお勧めです。一冊使ってスライドショーを作っていく内容です。ステップバイステップで進んでいくので初心者の方でも理解しやすいと思います。Model)の解説がわかりやすかったです。私はこれでようやく理解できました。次にJavascriptを体系的に広範囲に習得したいという方は次の本がお勧めです。~モダンスタイルによる基礎からAjax・jQueryまで基本文法から関数の使い方、オブジェクト指向的書き方、DOM、Ajaxまで広範囲にカバーしています。高度な内容で400ページ以上ある本ですが、図表がとても豊富で理解を手助けしてくれます。まとめプラグインを使わずにTwitterなどのソーシャルブックマークを追加する方法を紹介しました。aタグとscrptタグで簡単にでき、いろいろカスタマイズできるのでお勧めです。あなたもチャレンジしてみてはいかがでしょうか。2015-04-042015-08-25Tweet※この記事を読まれた方は、ぜひ下記の記事も合わせて読んでみてください。CrystalSnowmanさくらVPSでサーバを構築してWordPressでブログをはじめました。技術的なことや読んだ本の感想などを記事にしたいと思います。私の得た知識や失敗談によって、あなたの貴重な時間が節約できますように。twitterでもつぶやいています。よかったら見てみてください。CrystalSnowman.com。