WordPress ソーシャルボタンを追加
FacebookやTwitterなどのSNSとの連携は今のブログでは必須ですね。
私のブログにもソーシャルボタンを追加してみました。
やり方には色々あるみたいですが、
私はプラグイン「tweet, Like, Google+1 and share」を使いました。
目次
プラグイン「tweet, Like, Google+1 and share」を
インストールしたら、WordPress管理画面の
「設定」⇒「Tweet Like Plusone」に入り、ソーシャルボタンの設定を行います。
「Tweet Like Plusone」画面は英語で表示されています。
以下で設定内容を見ていきます。
表示させたいソーシャルボタンの設定
Select Icons to display設定で
表示させたいソーシャルボタンをチェックします。
サイズ・配置の設定
Size of Icons設定でアイコンのサイズ大(Large)・小(Small)を選択します。
大小で表示されるアイコンのデザインが異なります。(以下図)
Alignment設定で左寄せ、右寄せ、回り込み有無を設定します。
Where to Display設定で、どのページに配置するか、コンテンツの上、下
に配置するかを決めます。
ソーシャルボタンのサイドバーの設定
さて、Tweet Like Plusone設定画面には、Vertical Scrolling sidebar
という設定があります。
Display Vertical sidebarにチェックを入れると、
以下図のようなブログの脇にソーシャルボタンのサイドバーを表示することができます。
ソーシャルボタンの微調整
設定後、実際にページを見てみます。
コンテンツに配置したソーシャルボタン
ツイートボタンの位置を他のボタンと揃えたかったので、
CSSでレイアウト調整します。
ソーシャルボタンのCSS調整は、Tweet Like Plusone設定画面の
Insert Custom CSSで行います。
ツイートボタンの上マージンに41pxの余白を入れて調整しました。
以下のように、ツイートボタンを他のボタンの位置と揃えることができました。
ソーシャルボタンのサイドバー
ソーシャルボタンのサイドバーを見てみると、
表示の右端が切れてしまっています。
これもCSSを追加して表示の微調整を行いました。
ソーシャルボックスの枠と
いいねのフレームの横幅を広げました。(以下追加したCSS)
ちゃんと枠内に収まってくれました。
まとめ
以上、プラグイン「tweet, Like, Google+1 and share」を使った
ソーシャルボタンの設定方法でした。
参考になれば幸いです。
スポンサーリンク