ソーシャルボタンを設置する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 でSNSボタンを設置する
- Tweet, Like, Google +1 and Share のCSSカスタマイズ
- はてなブックマークのSNSボタンを追加する
「Tweet, Like, Google +1 and Share」で SNSボタンを設置する

Facebookのボタンを「Like」から「いいね」に変更するため「Select Face Book Like Language」を「Japanese」に変更します。
また今回は「はてなブックマーク」のボタンも表示するため、「Display Custom Buttons」にチェックを入れます。
Display Twitter | : | Twitterのアイコン |
---|---|---|
Display Facebook Like | : | Facebookのアイコン |
Display Google +1 | : | Google+のアイコン |
Display Facebook Share | : | Facebook Share(※廃止されたアイコン) |
Display Linkedin | : | LinkedInのアイコン |
Display Custom Buttons | : | カスタムボタンを表示 |
Display order | : | 表示する順番 |

- Largeアイコン
- Smallアイコン

Left Aligned | : | 左寄せ、回り込み無し |
---|---|---|
Right Aligned | : | 右寄せ、回り込み無し |
Float Left | : | 左寄せ、回り込み有り |
Float Right | : | 右寄せ、回り込み有り |
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で整えます。

「Tweet, Like, Google +1 and Share」では以下のHTMLソースが出力されるので、これに合わせてCSSを定義します。
<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とタイトルが動的に振られます。
<a href="http://b.hatena.ne.jp/entry/【サイトのURL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイトのタイトル】" ・・・> </a>
<a href="http://b.hatena.ne.jp/entry/%%URL%%" class="hatena-bookmark-button" data-hatena-bookmark-title="%%TITLE%%" ・・・> </a>
今回は、「Large」のアイコンを表示するため左側の「Place Large button Code in this box」にソースを貼り付けました。
「Small」のアイコンを表示するときは、左側の「Place Small button Code in this box」にソースを貼り付けます。
一番最後に「Save Changes」ボタンをクリックして、設定を保存します。

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

« HTML / CSS / javascript対応の次世代エディタ「Brackets」 日間/週間/月間で人気記事が表示できるWordPressプラグイン「WordPress Popular Posts」 »
Trackback URL
http://webnonotes.com/wordpress/socialbutton/trackback/Comments
いつも参考にさせていただいております。
自分のブログにリンクを貼らせていただきたいのですが、よろしいですか?
よろしくお願いします。
当ブログを参考にしていただき、有難うございます。
リンクについては、ぜひお願いいたします。
ありがとうございます。
WordPress、いろいろと手こずっています(汗)
今後とも参考にさせていただきます。
こちらこそ、よろしくお願いします(^^)
[…] ソーシャルボタンを設置するWordPressプラグイン「Tweet, Like, Google +1 and Share」 | Web’Notes […]
[…] きる機能がついています。 僕のこのブログにはその機能がないので、ぜひ付けたいと思い導入しました。導入に際して以下の記事を参考にさせてもらいました。 Tweet, Like, Google +1 and Share […]
[…] はてなとかも設置したい場合はチェック。 設置方法はコチラを参考に。 ③で設定方法が明確に書かれています☆ […]
[…] […]
[…] http://webnonotes.com/wordpress/socialbutton/ […]
[…] ト様もありました。 参考 http://webnonotes.com/wordpress/socialbutton/ […]
こんばんわ。
はてブボタンがどうしても入らないので質問お願いします。
手順通りにやると
※指定されたページ(URL)へのアクセスは禁止されています。
とでます。
当方ロリポップを使っています。
テーマは、 BizVektorです、どうしたら良いでしょう?
流水瀬様
当ブログを参考にして頂きありがとうございます。
「アクセスが禁止されています。」と表示される件ですが、Tweet, Like, Share and Google +1の設定を保存するときに表示されるのであれば、ロリポップの「WAF設定」が原因だと思われます。
ロリポップのユーザ画面から「WEBツール」>「WAF設定」を確認していただき、有効となっていれば、無効にした上で設定を保存してみて下さい。
保存後は再度「WAF設定」を有効に戻してください。
※エラー内容が上記でない場合は、どの段階でエラーが出たか記載をお願いします。