ソーシャル連携プラグイン「Tweet, Like, Share and Google +1」の設定と、LINEボタンの追加設置！

構築中のサイトでソーシャル連携を行う際、以前紹介したsocial-bookmarking-lightではちょっと見た目が地味なので、今まで使ったことのなかった（しかし良く見かける）「Tweet, Like, Share and Google +1」を採用してみました。

プラグイン設定ではまった点と、LINEボタンも追加したのでその設定方法もまとめました！
※毎度、英語訳はかなり大雑把な解釈で乗り切ってます！！

Tweet,Like,Google,+Oneのダウンロード

テーマ配布元：

Tweet, Like, Google +1 and Share

サイトリンク：

[browser-shot width=”600″ url=”https://wordpress.org/plugins/only-tweet-like-share-and-google-1/”]

プラグイン＞新規追加＞「Tweet, Like」等の検索で出てきますのでインストールして有効化しましょう。

設定メニューに「Tweet Like Plusone」が出てきます。

Tweet,Like,Google,+Oneの一般的な設定

カスタムCSSや、LINEボタン以外で、一般的な設定部分を紹介します。

Increase Page Load Speedの設定

最適化や、ボタンが上手く出ない時の設定みたいです。色々試しましたが体感的にはそんなに変わりませんね。
最初はデフォルトで良いと思います。

keep this checked ～の下りはショートコードやテンプレートPHPに記述を追加する際の設定のようです。
特に利用する予定はないのでOFFにしました。

ボタンの表示場所

Select Icons to display では使用したいソーシャルボタンと、言語の設定、並び替え等が可能です。

サイズと配置の設定

Size of Icons と Alignment

サイズはsmallだとsocial-bookmarking-lightと同じですね。

他、見たままですが右寄せ左寄せ・回り込みの有無が指定できます。

表示させるページの設定

Where to Display

Posts・・・投稿ページ
pages・・・固定ページ
Home Page ・・・ホーム
Archive・・・アーカイブページ

等々、色々表示できるようです。Adoveがコンテンツ上部、Bellowで下部に表示できます。
今回は post page home を選択しました。
検証したテーマではArchiveページにボタンが出ませんでした・・・

スマホの設定

Mobile browsers

※チェックするとモバイルで表示されなくなるので注意！

見た所、WPtought等、モバイル表示プラグインで元々ソーシャル機能が備わっているものがある場合、モバイルでの表示をOFFにする・・・という使い方でしょうか。

特定のカテゴリ・投稿・ページでボタンをOFFに

Don’t display on Posts/Pages(category)

ID指定で、ボタンを表示させない投稿・ページ・カテゴリを選べるようです。
固定ページで試した所、確かにID指定したページにはボタンが出ませんでした。

その他の設定

追従型の最下部には開発者様の？サイトリンクがデフォルトで表示されるので、
Remove Share link にチェックを入れると消すことができます。

その他、google analyticsのトラッキングコードの設定や、他のプラグインやテーマファイルでFacebookのJSを読み込んでいるなら、このプラグインではJS追加しませんよ的な設定もあるようです。

追従型のボタンとカスタムCSS

スクロール追従型のボタンを設置できます。
が、上の画像のように、切れてしまうのでカスタムCSSの設定と併せて説明します。

表示設定

Vertical Scrolling sidebar

Display Vertical sidebar にチェックを入れると、サイトの左側にfixの固定エリアを表示できます。
left top はサイトによって微調整が必要でしょう。
オススメは
・スクロールすると出てくる　Visible on scroll
・ページの最後まで表示する Display until end of the page
ですかね。

ソーシャルボタンが切れちゃう問題

冒頭の画像です。「ツイート」もギリギリですし、「いいね」に関しては完全に見切れてます。
おそらく、海外産のプラグインなので、
「tweet」
「Like」
に対応した幅が指定されているんでしょうね。
日本語を選択して
「ツイート」
「いいね」
になると切れてしまう・・・ということでしょう。
プラグイン編集で、当該部分を探して数値を直しても修正可能だと思いますが、
アップグレードすると消えちゃうのでCSSで対応しましょう。

カスタムCSSを追加可能

Insert Custom CSS

Javascriptを追加できるものもあるようですが、今回は使いませんでした。

/* ボックス自体をちょっと大きく */
div.social4iv {
  width: 71px;
}
/* いいね ボタンの幅を大きく */
.s4fblikev iframe {
  width: 69px !important;
}

で対応可能でした。
これらはこの先Facebookやtwitterの仕様が変わったらサイズが変わることもあるかもしれません。
ご参考までに。

2014.12.20追記
ちなみに、はてなをスクロール追従に入れるとこれまたはみ出ます。

/* ボックス自体をちょっと大きく */
div.social4iv {
  width: 80px;
}

幅80pxで一応は切れずに表示できました！！

もしかしてだけど（もしかしてだけど）、ページで表示が変わってるんじゃないの～？

はい。
もしかしてだけど（もしかしてだけど）、使ってるテーマファイルによっては上手く表示されないこともあるかもしれません。
僕はモロそうでした。

使ってるテーマで、iframeにmarginが効いてたりすると、コンテンツと重なります。
投稿フォーマットに「ビデオ」があったりするテーマはその可能性が高いんじゃないでしょうか。

/* あくまで一例。テーマによりけり！ */
.post_content .social4i iframe {
  margin:0 !important;
}

みたいな感じで、コンテンツの中にある、ソーシャルボタンの中にある、iframeにはmargin出さないでね！
という指定が必要になるケースもあると思います！

そもそも、ボタン全体を囲んでるdivにheight:69px;があるからですね。
height:auto;とかにすればいけるのかな？？すみません、未検証です！

さて、ようやくLINEボタンの設定です。

Add your own Custom Buttons で各種ソーシャルのボタンを追加できます。
はてぶボタンを追加してるサイト様もありました。
参考
http://webnonotes.com/wordpress/socialbutton/

LINEボタンのコード取得

【LINE公式】 設置方法
http://media.line.me/howto/ja/
こちらでコードを取得できます。

２種類試しました。

LINE スマートフォンサイトへの設置方法

こっちの方が簡単かもしれません。

ボタンのタイプを選び、「ページタイトルとURLを使う」にしてコードをAdd your own Custom Buttons のLarge又はSmall button Code in the boxにコピペすればOKです。
※コードの改行が<br>で出力されたので、改行は無くした方がいいです。ボタンのレイアウトが崩れる原因になります。

この場合は、PC表示にはLINEボタンが出てきません。

３．記述例 を使用する場合

こっちの場合はボタンをダウンロードして、メディアにアップするか、サーバーに直接UPしてURLを取得する必要があります。

「WordPressのテンプレートに記述する場合」という、実に親切なソースもあるんですが、このまま貼ってもダメでした。

Add your own Custom Buttons に貼る場合は、記載されているタグを利用しなくてはいけません。

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

のフックの部分を

<a href="http://line.me/R/msg/text/?%%TITLE%% %0D%0A%%URL%%"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

のように、%%URL%% %%TITLE%% に置き換えればOKでした。

完成！！

Plus One だけじゃ物足りない！という方

2014.12.20追記

PlusOneというだけあって、基本的に１つしか追加できないようになっているようですね。
いや、できるんです。コードを入れちゃえば。
ただ、ソーシャルボタンがカラム落ちする残念な結果になってしまう。。。orz

『はてな』と『LINE』と『Pocket』を入れて欲しいという要望があったのですが、つまずきまくって大変でした。

Add your own Custom Buttonsに複数のボタンを入れるときの注意点

<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;">ボタン</div>

というコードが自動生成されます。そのため、

1つめのボタンのコード
</div>
<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;">
2つめのボタンのコード
</div>
<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;">
3つめのボタンのコード

とする必要があったんですね！（改行は入れないでね！）

考えた人凄い！自分だったらCSSでなんとかしようともがいていたに違いない！
偉大なる先人の知恵に感謝です！ありがとうございました！！

Pocket Feedly等についても書かれているので、是非こちらを参考にして下さい！

http://aolani.net/様
http://aolani.net/2014/02/16/how-to-add-various-social-service-button-icon-to-tweet-like-google-1-and-share-of-wordpress-plugin/

まとめ

social bookmarking light よりも細かな設定が可能ですね。
追従型のサイドバーも出せるとは知りませんでした。

ただ、ちょっと重い気がするのは気のせい？？

CSSでカスタムが必要な部分もありましたが、充分使い易いですね！
たまには違うプラグインを使うのもいいもんです！！