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

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。