記事ページにSNSボタンをまとめて設置する

TwitterやFacebookなど各SNS(ソーシャルネットワーク)で公式の共有ボタンが配布されていますが、ひとつずつ設置していくのは結構面倒だったりします。
今回は、「WP Social Bookmarking Light」というプラグインを使って、記事ページにまとめて設置する方法です。

WP Social Bookmarking Lightプラグインをインストールする

ワードプレスで作ったサイトにログインします。

ダッシュボード

ダッシュボード(管理画面)左サイドバーの「プラグイン」から「新規追加」をクリックします。

プラグイン検索

「プラグインを追加」画面が表示されます。
右上側にある検索窓に「WP Social Bookmarking Light」と入力し、エンターキー(改行キー)を押します。

検索結果

検索結果が表示されます。
「WP Social Bookmarking Light」の枠の中に表示されている「いますぐインストール」をクリックします。

確認メッセージ

インストールの確認ウィンドウが表示されるので、「OK」をクリックします。

インストール画面

インストールが開始されます。
インストールが完了したら、「プラグインを有効化」をクリックします。
これでインストールは完了です。

プラグイン一覧

WP Social Bookmarking Lightの設定

記事に表示する各SNSボタンの設定を行います。

プラグイン一覧画面

左サイドバーの「設定」から「WP Social Bookmarking Light」をクリックします。

WP Social Bookmarking Light設定画面

WP Social Bookmarking Lightの設定画面が表示されます。
「一般設定」で表示位置や表示ボタンなどの設定を行います。

「位置」ドロップダウンメニューで、「Top(記事上)」「Bottom(記事下)」「Both(記事上下)」「None(表示なし)」が選べます。

「個別記事のみ」は、「Yes」なら個別記事(単一記事ページ)にのみ表示されます。「No」にするとトップページやアーカイブページ、カテゴリーページにも表示されます。(使用するテンプレートにより表示されない場合もあります)

「ページ」は、固定ページにも表示するか選べます。「Yes」なら表示、「No」の場合は表示されません。

「サービス」で表示したいボタンを選びます。
右のウィンドウ(上記画像の①)に使えるボタンが表示されているので、ドラッグ&ドロップで左のウィンドウ(上記画像の②)に持っていきます。
自動で上記画像の3つのボタンが表示されていますが、必要のない場合は、各ボタン右に表示されている「×」をクリックすると削除できます。
また、左のウィンドウの順番を入れ替える場合もドラッグ&ドロップで行なうことができます。
左のウィンドウにボタンを追加すると、各ボタンの設定タブが自動で追加されます。

設定が完了したら「変更を保存」をクリックします。

設置可能SNS

上記のSNSボタンが設置可能です。

今回設定内容

今回は上記のように設定してみました。

表示テスト

実際の表示はこのようになります。

Style設定

「Styles」タブをクリックすると、CSS(スタイルシート)の編集が行なえます。
表示位置の修正などは、この画面で行います。
例えば、初期設定ではボタンの表示位置は「左寄せ」になっていますが、「右寄せ」にする場合は、「float: left !important;」を「float: right !important;」に変更します。
ただし、この場合、ボタンの表示順が逆になってしまうので、「一般設定」でボタンの表示順を変更する必要があります。

設定が完了したら、「変更を保存」をクリックします。
「Restore defaults」をクリックすると、今までの設定(別のタブで行なった設定)がすべて初期化されてしまうので注意しましょう。

Twitterの設定

Twitter

「Via」にTwitterのユーザー名を入力すると、記事がツイートされたときに、アカウント情報が自動でツイート文に含まれます。

「Language」で「Japanese」を選ぶと、ボタンに表示される文字が「Tweet」から「ツイート」に変わります。

「Count」は、ツイートされた回数を表示するかどうか選ぶことができます。「None」で表示なし、「Horizontal」で右側にバルーンが表示されます。

はてなブックマークの設定

はてなブックマーク

「standard-balloon」B!Bookmarkと表示されたボタンの右側にバルーンでブックマーク数が表示されます。

「standerd-noballoon」B!Bookmarkと表示さ、ブックマーク数は表示されません。

「standard」B!ボタン内にブックマーク数が表示されます。

「simple」B!ボタンの表示のみでブックマーク数は表示されません。

「simple-balloon」B!ボタンの右側にバルーンでブックマーク数が表示されます。

Facebookの設定

Facebook

「Locale」ja_JPと入力するとボタンの表示が、「Like」から「いいね!」に変わります。

「Version」html5、xfbml、iframeから選ぶことができます。
iframeを選ぶと、いいねされた場合に、「○○さんが、リンクについて「いいね!」と言っています。」と表示され、コメントをつけることができません。
html5、xfbmlの場合は、「○○さんがリンクをシェアしました。」と表示され、コメントをつけることができます。(コメントをつけなかった場合は、iframeと同じ表示になります)

「Add fb-root」他にFacebookの機能(いいねボックスなど)を使っている場合は、「No」にしましょう。

FB Likeの設定

FB Like

「Layout」buttonを選ぶと、いいねの数が表示されません。button_countを選ぶと、右側にいいねの数がバルーンで表示されます。

「Action」likeを選ぶと「いいね!」、recommendを選ぶと「おすすめ」になります。

「Share」Yesにすると、「いいね!」ボタンと一緒に「シェア」ボタンも表示されます。

「Width」横幅の設定ができます。

Google+1の設定

Google+1

「Button size」smallかmediumを選べます。

「Language」Japaneseを選ぶと、マウスオンしたときのメッセージが日本語で表示されます。

「Annotation」noneを選ぶと、カウントが表示されません。bubbleを選ぶと、右側にバルーンでカウント数が表示されます。inlineを選ぶと、右側に「Googleでおすすめする」と表示されます。

「Inline size」inlineで表示したときの横幅を設定できます。

Pocketの設定

ポケット

「BUtton type」noneを選ぶと、カウント数が表示されません。horizontalを選ぶと、右側にバルーンでカウント数が表示されます。verticalを選ぶと、上側にバルーンでカウント数が表示されます。

他にも様々なボタンが設置できますが、今回はこのあたりまで。

使用するテンプレート(テーマ)によっては、最初からSNSボタンが設置されているものもあります。
が、もし設置されていないのなら、設置してみるとよいかも…
もしかすると、アクセスアップが見込めるかもしれません。

Frontpage Thumbnail: Designed by Freepik

コメントを残す

サブコンテンツ

PAGE TOP