2012年08月13日 category : WordPress tags :

主要3種+はてブの共有(シェア)ボタンを追加するプラグイン

このエントリーをはてなブックマークに追加

plusone-top

ブログと密接な関係にある共有ボタン主要3つにはてブを追加できるWordPressプラグインです。

Twitter、Facebook、はてブにはそれぞれシェア(共有)ボタンがあります。それぞれJavaScriptで呼び出すことも可能ですが、プラグインで追加することも可能です。いろいろなプラグインが出てますが日本固有のブログ共有の雄「はてブ」が対応していないのも多いです。

今回紹介するWordPressプラグイン「Tweet, Like, Google +1 and Share」はTwitter、Facebook、Google+に更にひとつ独自に追加することができます。これに「はてブ」を追加するとはてブ付きの共有ボタンプラグインの完成です。

01 . Tweet, Like, Google +1 and Shareのインストール

WordPress管理画面→左のメニュー「プラグイン」→「新規追加」で「Tweet, Like, Google +1 and Share」を検索します。検索結果に表示されると思いますので「いますぐインストール」をクリックします。

インストールが完了したら「プラグインを有効化」をクリックして有効にします。有効化するとWordPress管理画面の左メニュー「設定」に「Tweet Like Plusone」が追加されますのでクリックします。設定画面が開きますので設定を進めていきます。

02 . Tweet, Like, Google +1 and Shareの設定

JavaScript読み込み最適化のチェックです。読み込みが遅くなる可能性がありますので最適化のチェックはいれたままでよいと思います。

次のラジオボタンはヘッダーにスクリプトを配置するか、フッターに配置するかになりますが、当ブログの共有ボタンはページ下方にありますのでJavaScriptの読み込みもフッターにしました。

plusone-01

表示するアイコンを選択します。Twitter、FacebookのLike、Google+と主要なところはデフォルトでチェックされていますのでこのままでもOKです。これに日本固有の「はてブ」を追加しますので6「Display Custom Buttons 」にもチェックいれておきます。

plusone-02

ボタンの大きさと配置場所を設定します。Aboveはコンテンツの前方、Belowはコンテンツの後方に表示します。両方に配置することも可能です。

plusone-03

03 . はてブボタンを追加する

はてブにてはてなブックマークボタンの作成を行います。URLとタイトルはあとで編集しますので仮タイトルをいれておきます。次にボタンのタイプを選択しプレビューに表示されているコードをコピーします。

<a href="http://b.hatena.ne.jp/entry/仮URL" class="hatena-bookmark-button" data-hatena-bookmark-title="仮タイトル" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

コピーしたURLを「Add your own Custom Buttons」に貼り付けます。このままではURLとタイトルが未設定のままですので、entry/の後ろに「%%URL%%」を追加、data-hatena-bookmark-title=””に「%%TITLE%%」を追加します。

<a href="http://b.hatena.ne.jp/entry/%%URL%%" class="hatena-bookmark-button" data-hatena-bookmark-title="%%TITLE%%" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

plusone-05

設定が完了したら「Save Changes」をクリックします。

plusone-04

04 . こんな感じ

plusone-06

簡単に設置できましたがjapanese選択するも日本語が反映されてません。いいね!がLikeになってます。WordPress3.4.1では未テストですので仕方ないのかな。そこだけ気にしなければ簡単に設置できますので便利なプラグインだと思います。

HOME >>  WordPress > 主要3種+はてブの共有(シェア)ボタンを追加するプラグイン