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

web制作

※この記事は、作成日より一年以上が経過しています。最新の情報ではありませんので、ご注意ください。

読了の目安時間: 227

sns-1

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/



まとめ

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

今読んだ記事をシェアする

sns-thumb

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

  • このエントリーをはてなブックマークに追加
  • Pocket

本ブログを気に入って頂けたら、facebookの「いいね!」を是非!

arrow