だれかのなにかに役立てるウェブ制作者YoTaの趣味ブログ

twitter、facebookなどSNSボタンをwordpressにバルーン型で統一して設置する方法まとめ

wordpressのブログにSNSボタンを設置したので、備忘録的にまとめ記事を作成しておきます!

今回は、SNSで代表的な下記5個のボタン作成をしました。

  • twitter
  • facebook
  • はてなブックマーク
  • google+
  • Pocket

ちなみにバルーン型は、ボタンの上に吹き出しのついているタイプのものです。

twitter:バルーン型の公式ツイートボタンを設置する

ボタン作成の公式サイト

https://about.twitter.com/ja/resources/buttons#tweet

バルーン型にするには手動でコードを打ち込み修正

「data-count="vertical"」と追記すればバルーン型になります。公式サイトのオプションでは設定できないようです。
http://www.ikedahayato.com/index.php/archives/20548

facebook:バルーン型の公式Likeボタンを設置する

ボタン作成の公式サイト

https://developers.facebook.com/docs/reference/plugins/like/

wordpressで記事ページ毎にfacebookのいいねボタンを設定

http://kawatama.net/web/wordpress/1519

FacebookのLikeButton(いいねボタン)だけ下にずれてしまうのでvertical-alignをbaselineに修正する

http://h2ham.net/facebook-like-button-vertical-problem

その他、参考サイト

http://www.promeshi.com/archives/433
http://fingaholic.github.io/posts/2012-04-26-facebook.html

はてなブックマーク:バルーン型の公式ボタンを設置する

ボタン作成の公式サイト

http://b.hatena.ne.jp/guide/bbutton?al=0

wordpressで記事ページ毎にはてなブックマークボタンを設定する

http://viral-community.com/wordpress/hatena-bookmark-659/

バルーン型にするには手動でコードを修正

http://sofane.net/archives/3197



google+:バルーン型の公式ボタンを設置する

ボタン作成の公式サイト

https://developers.google.com/+/web/+1button/?hl=ja
Google+ではソースコードを貼ればOkです。

pocket:バルーン型の公式ボタンを設置する

pocketではソースをコピペするだけでOK

http://number333.org/2013/04/25/pocket-button/



まとめ

先人様の偉大さにただただ敬礼でした!

ページ上部に戻る