1. まとめトップ
  2. IT・ガジェット

ソーシャルボタンの設置方法まとめ

同じ内容のまとめはいっぱいあるけど自分に分かりやすくまとめてみる。

更新日: 2014年01月28日

104 お気に入り 45301 view
お気に入り追加

この記事は私がまとめました

/////////// INDEX ////////////
・Twitter
・Facebook
・Google+
・はてなブックマーク
・delicious
・Tumblr
・mixiチェック
・mixiイイネ!
・Evernote
・LINE
///////////////////////////////
これらの共有・ブックマークボタンの設置方法が書かれている公式サイトへのリンクをまとめました。
※「LINEで送る」ボタンについても追加しました。(2014/01/28)

Twitter

公式サイトでは以下4種類のボタンの作成ができる。

公式ではボックスタイプのボタンの選択はなくなっていますが、公式のボタン作成ページで生成したソースにちょっとだけ追記するとボックス型ボタンになる裏技があるようです。
以下その方法です。

こんな感じのボタンを生成するには以下を参照のこと。

ボックスタイプを作るには、Twitterボタンのマークアップに赤色の「data-count=vertical」を追加します。

公式で生成された<a>タグの最後に data-count=vertical を追記するとボックス型ボタンになります。

Facebook

公式では以下3種類のボタンが選べる。
また、「いいね!」の部分を「おすすめ」にすることも可能(「Verb to display」で「recommend」を選択する)。

Google+

公式では下記4つのサイズが選べて、タイプをインラインかバルーンかボタンのみかで選べる。

はてなブックマーク

以下の3種類からボタンが選べる。

delicious

1 2