ソーシャルボタンを設置するWordPressプラグイン「Tweet, Like, Google +1 and Share」

Twitter By: eldh

Webサイトへのアクセス手段としては、検索エンジンに次いでSNSが上げられるようになって来ました。

Webサイトへのアクセスを増やすためには、SNSから簡単にリンクが貼れるソーシャルボタンが、今や必須といえます。

Tweet, Like, Google +1 and Share は、主要なSNSのボタンが簡単に設置できるだけで無く、日本独自の はてなブックマーク や mixi などのSNSボタンも追加することが出来ます。

Tweet, Like, Google +1 and Share の設定方法
  1. Tweet, Like, Google +1 and Share でSNSボタンを設置する
  2. Tweet, Like, Google +1 and Share のCSSカスタマイズ
  3. はてなブックマークのSNSボタンを追加する

「Tweet, Like, Google +1 and Share」で SNSボタンを設置する

1.「プラグイン」>「新規追加」から「Tweet, Like, Google +1 and Share」を検索してインストールし、有効化します。
Tweet, Like, Google +1 and Share
2.「設定」>「Tweet Link Plusone」をクリックして「Tweet, Like, Google +1 and Share」の設定画面に行きます。
Tweet, Like, Google +1 and Share
3.最初はどのアイコンを表示するかを決めます。
Tweet, Like, Google +1 and Share

Facebookのボタンを「Like」から「いいね」に変更するため「Select Face Book Like Language」を「Japanese」に変更します。

また今回は「はてなブックマーク」のボタンも表示するため、「Display Custom Buttons」にチェックを入れます。

各チェックボックスの内容
Display TwitterTwitterのアイコン
Display Facebook LikeFacebookのアイコン
Display Google +1Google+のアイコン
Display Facebook ShareFacebook Share(※廃止されたアイコン)
Display LinkedinLinkedInのアイコン
Display Custom Buttonsカスタムボタンを表示
Display order表示する順番
4.次に表示するアイコンを決めます。アイコンには「Large」「Small」の2つのタイプがあります。
Tweet, Like, Google +1 and Share5
  • Largeアイコン

Tweet, Like, Google +1 and Share6

  • Smallアイコン

Tweet, Like, Google +1 and Share7

5.表示する位置を決めます。
Tweet, Like, Google +1 and Share
「Alignment」のラジオボタンの内容
Left Aligned左寄せ、回り込み無し
Right Aligned右寄せ、回り込み無し
Float Left左寄せ、回り込み有り
Float Right右寄せ、回り込み有り
「Where to Display」のチェックボックスの内容
Display on Posts投稿記事に対して表示
Display on Pages固定ページに表示
Display on Home Pageトップページに表示
Display on Archive Pages
(Categories, Tages, Author etc.)
月別、カテゴリー別などのページに表示
Display Above Content画面上に表示
Display Below Content画面下に表示

設定周りはこれで完了です。

Tweet, Like, Google +1 and Share のCSSカスタマイズ

次は配置した、SNSボタンをCSSで整えます。

Insert Custom CSS のテキストエリアにSNSボタンのCSSを定義します。今回は、少しアイコンの間が狭いので広げてみました。
Tweet, Like, Google +1 and Share

「Tweet, Like, Google +1 and Share」では以下のHTMLソースが出力されるので、これに合わせてCSSを定義します。

HTML
<div class="social4in" ">
	<div class="socialicons s4twitter">
	【Twitter】
	</div>
	<div class="socialicons s4fblike" >
	【Facebook】
	</div>
	<div class="socialicons s4plusone" >
	【Google+】
	</div>
	<div class="socialicons s4linkedin" >
	【LinkedIn】
	</div>
	<div class="socialicons s4custombtn-1" >
	【カスタム】
	</div>
</div>

はてなブックマークのSNSボタンを追加する

はてなブックマークのSNSボタンを追加するためには、まずSNSボタンのソースを取得します。

以下のサイトで はてなブックマークのSNSボタンのソースが取得できます。

取得したソース内の【サイトのURL】の箇所を「%%URL%%」に変更し、【サイトのタイトル】を「%%TITLE%%」に変更すると、各記事に即したURLとタイトルが動的に振られます。

HTML(変更前)
<a href="http://b.hatena.ne.jp/entry/【サイトのURL】"
 class="hatena-bookmark-button" 
 data-hatena-bookmark-title="【サイトのタイトル】" 
・・・>
</a>
HTML(変更後)
<a href="http://b.hatena.ne.jp/entry/%%URL%%"
 class="hatena-bookmark-button" 
 data-hatena-bookmark-title="%%TITLE%%" 
・・・>
</a>
最後に、「Add your own Custom Buttons」にソースを貼り付ければ「はてなブックマーク」のボタンが追加できます。
Tweet, Like, Google +1 and Share

今回は、「Large」のアイコンを表示するため左側の「Place Large button Code in this box」にソースを貼り付けました。

「Small」のアイコンを表示するときは、左側の「Place Small button Code in this box」にソースを貼り付けます。

一番最後に「Save Changes」ボタンをクリックして、設定を保存します。

これで、Webサイトを表示するとこのように表示がされます。
Tweet, Like, Google +1 and Share

これで、「Tweet, Like, Google +1 and Share」の紹介を終わりますが、今回紹介した以外にも「mixi」「Evernote」などのボタンを付けることができますので、ぜひ好みに合わせてカスタマイズしてみて下さい。

divider

Trackback URL

http://webnonotes.com/wordpress/socialbutton/trackback/

Comments

  • hiprop より:

    いつも参考にさせていただいております。
    自分のブログにリンクを貼らせていただきたいのですが、よろしいですか?

    よろしくお願いします。

    • admin より:

      当ブログを参考にしていただき、有難うございます。
      リンクについては、ぜひお願いいたします。

  • […] きる機能がついています。 僕のこのブログにはその機能がないので、ぜひ付けたいと思い導入しました。導入に際して以下の記事を参考にさせてもらいました。 Tweet, Like, Google +1 and Share […]

  • […] はてなとかも設置したい場合はチェック。 設置方法はコチラを参考に。 ③で設定方法が明確に書かれています☆ […]

  • 流水瀬 より:

    こんばんわ。
    はてブボタンがどうしても入らないので質問お願いします。
    手順通りにやると

    ※指定されたページ(URL)へのアクセスは禁止されています。

    とでます。
    当方ロリポップを使っています。
    テーマは、 BizVektorです、どうしたら良いでしょう?

  • admin2 より:

    流水瀬様

    当ブログを参考にして頂きありがとうございます。
    「アクセスが禁止されています。」と表示される件ですが、Tweet, Like, Share and Google +1の設定を保存するときに表示されるのであれば、ロリポップの「WAF設定」が原因だと思われます。

    ロリポップのユーザ画面から「WEBツール」>「WAF設定」を確認していただき、有効となっていれば、無効にした上で設定を保存してみて下さい。

    保存後は再度「WAF設定」を有効に戻してください。

    ※エラー内容が上記でない場合は、どの段階でエラーが出たか記載をお願いします。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>