CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress プラグインを使わずにソーシャルブックマークを追加する方法

hatena bookmark  image1

プラグインを使わずに「はてな」やTwitterのブックマークをブログに追加しました。余分なファイルを削除でき、Javascriptの読み込み位置をカスタマイズできるのでページの読み込みが早くなりました。パフォーマンスを向上させて評価されるサイトを目指します。

ソーシャルブックマーク追加方法

プラグインを使わずにブックマークを追加する方法を紹介します。

ソーシャルブックマークプラグインについて

今までソーシャルブックマークをページに追加するために「WP Social Bookmarking Light」プラグインを使用していました。「はてな」やTwitter、facebookのブックマークを簡単に追加できます。

WP Social Bookmarking Light image

このようにページにブックマークが追加されます。

social bookmark image

プラグイン使用時のソース

プラグインによって追加されたブックマークのhtmlを見ると以下のようになります。

これらは本来1行で出力されます。分かりやすくするため改行とインデントを入れています。

3行目は「はてな」用リンクです。4行目は「はてな」用Javascriptです。
7行目はTwitter用リンクです。html5に対応してないページでも表示できるようにiframeタグを使用しています。

プラグイン使用時の気になる点

4行目のJavascript要素は読み込みタイミングを考えると、リンクの近くではなく</body>タグの近くに記述したいです。ページ全体のデザインを左右するものではないので、読み込みが最後でも問題ないと思います。

Javascript読み込みタイミングについては以下のサイトが参考になります。
[JS] JavaScriptの読み込み位置をページ最後にしたほうがよい理由 | memocarilog

またページのトップとボトムにブックマークを配置すると、同じJavascript要素が2回記述されます。これも1回にしたいです。

Twitterについてはiframeを使用しているので他のhtmlファイルをheadからbodyまで読み込んでいることになります。これも表示するソース量が増えてしまいます。

このようにプラグインを使用するとソースの量が増え、Javascript要素の読み込み方法を制御できないのでパフォーマンスが劣化する可能性があります。

ソーシャルブックマークのコード

ソーシャルブックマークはそれぞれの公式サイトからコードが公開されています。そのコードを直接ページに張り付ければブックマークを追加できます。

「はてな」とTwitterを追加してみます。

「はてな」
hatena bookmark  image

Twitter
facebook bookmark image

今回こちらのサイトを参考にさせていただきました。
プラグインなしで WordPress サイトにソーシャルボタンを設置する方法 | かっぱのWordPress入門ブログ

ブックマークボタンの追加

公式サイトでデザインを決めコードをページに貼り付けます。

コードはページのurlとタイトルを指定する部分をWordPressのコマンドに置き換えます。これによりページごとにボタンの設定が自動的に設定されます。

urlの表示
<?php the_permalink(); ?>

タイトルの表示
<?php the_title(); ?>

単一記事の投稿にのみブックマークを表示したいのでsingle.phpにコードを追加します。
実際のソースは以下です。(「はてな」のタイトルはページタイトルとサイト名を連結しています)

ブックマークを追加したい場所にaタグを追加しています。
Javascript要素はaタグから切り離しました。</body>タグの近くに記述したいのでfooterの近くに記述しました。

また以下のサイトを参考に「はてな」とTwitterのJavascript要素を非同期読み込みに設定しました。コード内のasyncの記述です。

<script async>でJavaScriptの非同期読み込みを – fragmentary

結果

プラグインを使わずにソーシャルブックマークを追加できました。Javascriptの記述位置もボトム付近に配置でき、非同期読み込みも実現できました。

パフォーマンスについては若干早くなった気がしますが、体感できるほど劇的に向上したわけではありません。

ただGoogle PageSpeed Insightsの評価項目である「レンダリングを妨げる JavaScript を削除する」という観点でサイトを改善できたと思います。

Javascriptのお勧め本

今回はJavascriptの非同期読み取りなどちょっと複雑な情報が出てきました。Javascriptについてもっと知りたいという方にお勧めの本を紹介します。

Javascriptについてまず短時間でざっくり理解したいという方は次の本がお勧めです。

ノンプログラマのためのJavaScriptはじめの一歩
ノンプログラマのためのJavaScriptはじめの一歩

一冊使ってスライドショーを作っていく内容です。ステップバイステップで進んでいくので初心者の方でも理解しやすいと思います。
特にDOM (Document Object Model)の解説がわかりやすかったです。私はこれでようやく理解できました。

次にJavascriptを体系的に広範囲に習得したいという方は次の本がお勧めです。

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで

基本文法から関数の使い方、オブジェクト指向的書き方、DOM、Ajaxまで広範囲にカバーしています。
高度な内容で400ページ以上ある本ですが、図表がとても豊富で理解を手助けしてくれます。

まとめ

プラグインを使わずにTwitterなどのソーシャルブックマークを追加する方法を紹介しました。aタグとscrptタグで簡単にでき、いろいろカスタマイズできるのでお勧めです。あなたもチャレンジしてみてはいかがでしょうか。


Top