【THE THOR ザ・トール】プラグイン「wp-hatena拡張版」でシェアボタン追加に挑戦してみた結果。
katsuです。先日の記事でご紹介しましたが、はてなIDを取得してはてなブックマークにデビューしました。ブログのアクセスアップに使えるのでは？と考えたためです。詳しくはこちらの記事をご覧ください。
はてなブックマークでブログアクセスアップできるのか？使い方と初期設定方法を調べてみた。 katsuです。このブログも140記事ほどの投稿を目前として、ふと アクセスアップのことを考えてみること[…]
はてなブックマークが何なのか理解できたのは大収穫なのですが、ふと僕のブログに使っているシェアボタンのことが気になりました。
ブログで使用しているWordpressのテーマ「THE THOR（ザ・トール）」にはシェアボタンを表示する機能が最初から搭載されています。記事の下に表示しているこんなボタンです。
※こちらはサンプル画像です。
自分が利用しているSNSのボタンをクリックすると、簡単に記事をシェアできるというスグレモノです。はてなブックマークボタンも僕の知らないうちに皆さん使って頂いていました。（ありがとうございます。）
ここでひとつやりたいことができました。
シェアボタンにどれだけクリックされているか数を表示させたい！
読者の方が見るとこの記事はこれだけシェアされているのか～と人気度をすぐに推し量ることができますし、執筆する側もモチベーションアップに繋がります。そこで目を付けたのが新たなプラグイン、wp-hatena拡張版です。
シェアボタンにカウントを表示するためには、各サイトからカウント情報をもらってくる必要があります。プラグインwp-hatena拡張版はこの作業を、かなり自由度高くやってくれそうなのです。
早速使い方をご紹介しましょう！そして最初に申し上げておきますが、残念ながらwp-hatena拡張版はうまく機能しませんでした。THE THORとの相性もあるのだと思います。それでもチャレンジしてみたい方は、ぜひこの続きをご覧ください。
wp-hatena拡張版とは
wp-hatena拡張版とは、hibikiさんが作られたWordPress用のプラグインです。こちらのサイトが公式ページです。
http://wppluginsj.osdn.jp/wp-hatena-extended/
hiromasaさんが作られた「wp-hatena」をhibikiさんが改造されたもののようですね。このプラグインで追加できるボタンはこんな感じです。画像が全てを物語っています。
はてなブックマークやツイッター、フェイスブックのカウンターが表示されています。まさにこれがやりたいのです！
wp-hatena拡張版の導入方法
wp-hatena拡張版は上記のhibikiさんのサイトからダウンロードすることができます。ページに上部近くに、このようにzipファイルがダウンロードできるようになっています。
このzipファイルはプラグインファイルですが、一手間加える必要があります。一旦解凍すると、「img_sample」というファイルが現れます。これを「img」に変更し、再び圧縮してzipファイルに戻しましょう。
赤線のフォルダを「img」に変更し、プラグインファイルの準備は完了です。Wordpressの管理画面からプラグインの追加を行います。「プラグイン」⇒「新規追加」から「プラグインのアップロード」を選びます。指示に従ってインストールを行いましょう。
こちらの画面で「プラグインを有効化」します。WordPressの管理画面に戻り、「設定」タブに「wp-hatena」がこのように表示されれば導入完了です。
導入自体はそれほど難しくありませんね。管理画面の「設定」からはこんな設定ができます。全て日本語なのがありがたいですね。ちなみに設定を全く変更せずとも利用できます。
wp-hatena拡張版でシェアボタンを表示する方法（THE THOR版）
さて、プラグインwp-hatena拡張版を導入した後は、記事にボタン表示を追加する処理を行う必要があります。記事のどこに表示するかを「PHPファイル」と呼ばれるシステムファイル内で指定します。
THE THORの場合は「single.php」のコード内にタグを追記する必要があります。十分注意して作業を行います。WordPressのタスクバーから「外観」→「テーマエディター」を選び「single.php」を探し出します。THE THORの場合は親テーマ内にこのような感じで表示されます。
ここからはPHPファイルを変更します。十分注意し、自己責任で変更を行ってください。190行目付近の所定の位置に、このようにタグコードを追加します。
記事の上部にボタンを表示したい場合は「post_top_widget」内の赤線部分の位置に、下部にボタンを表示したい場合は「postContents」の橙色の位置にタグコードを追記します。
こちらの画像では、記事上部にはてなブックマークボタンを配置しています。（記事下部の橙色部分は「いいやん！」ボタンを表示するためのタグが書いています。）このようにタグを追加すると・・・
はてなブックマークボタンが表示されました！
PHPファイルの変更さえ十分注意すれば、このように比較的簡単にシェアボタンを追加することができます。また、シェアボタンの種類はかなりたくさん用意されており、追加したいボタンのタグコードを列記することで、ボタンを横並びで表示することが可能です。
主なシェアボタンのタグ例はこんな感じです。（列記方法は公式サイトに例があります。）
はてブのブックマーク数をテキスト表示 $wph->addHatenaCountTxt();
はてブのブックマーク数を画像表示 $wph->addHatenaCount();
Evernoteクリップ $wph->addEvernoteClip();
Facebookいいね！ $wph->addFacebook();
Facebookシェア $wph->addFacebookShare();
twitterつぶやく $wph->addTweetBtn();
wp-hatena拡張版の問題点（THE THOR版）
さて、このように無事プラグインの導入を終え、やりたかったカウント数の表示を行うことができました。こんな感じ。
しかし！！
大きな問題がありました。インターネットエクスプローラで記事ページを開くと、この表示が出るようになってしまいました。
よく見るヤツですね。そして「コンテンツを表示」ボタンがクリックされれば正しくカウントが表示されるのですが、押されなければカウントは表示されません。しかもGoogle Chromeでページを開くとこのように表示されてしまいます。
スマホやタブレットではChromeを使っておられるパターンが多いと思うので、こんなひどい画面が毎回表示されてしまうわけです。
更に、このプラグインを導入することで記事ページの表示がかなり遅くなってしまいました。ページを表示するときに、各シェアボタンのカウントを各々のサイトまで拾いにいくわけです。その分表示に時間がかかるというわけですね。
思った以上に微妙な感じだったので、残念ながら今回はプラグインの導入を諦めました。
さいごに
さて、今回の記事はプラグインを導入しようとして失敗したお話です。
何の役にも立たないかもしれませんが・・・wp-hatena拡張版の導入を考えておられる方は参考にしてください。そしてTHE THORを利用している方、記事のトップ・ボトムにタグを入れる方法は他にも活用できるはずなので、参考にしてください。
シェアボタンにカウントを表示するのはなかなか見栄えもよさそうなので、今後も良いプラグインが無いか探してみようと思います。
活ノートでは最新記事の投稿情報をメールでお伝えしています。お気軽にご登録ください！
配信例はこちらにあります。
↑2いいやん！されています。良い記事でしたら「いいやん！」クリックお願いします。
下のSNSボタンから記事拡散にもご協力お願い致します。
読み込み中...
