ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

  • あとで読みたい人は…

@cappeeです。

毎回ソーシャルボタンを検索するのもあれなので、リンク先をまとめておきたいと思います。

あと、ソーシャルボタンを設置した後ブラウザによってカウンターの吹き出しが切れてしまうことがあるので、その直し方もメモしておきます。

Facebook

いいねボタン

HTML5のコードで貼り付けるといいねした時にシェアのポップアップも表示されます。

like ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

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

いいねボックス

likebox ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://developers.facebook.com/docs/reference/plugins/like-box/ 

コメント

fbcomment ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://developers.facebook.com/docs/reference/plugins/comments/ 

おすすめボックス

おすすめボックスだけJavascriptの設置場所には注意が必要です。
私は基本的に高速化のため</body>閉じタグの前に設置しているのですが、それだとエラーになりました。
オススメボックスを設置する場合は<body>開始タグの後に設置すると大丈夫です。

recommendationsbar ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

▼参考
オススメ記事をヒョコッと表示してくれる!Facebookの【Recommendations Bar】の導入方法

AppIDの取得

上記のコード取得時にサイトのAppIDを選択する項目が表示されるので取得しておきましょう。
設定しなくてもボタンは表示されますが、AppIDの設定が推奨されています。

Like Button 300x57 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://developers.facebook.com/apps

▼参考
Facebook アプリID取得方法

OGPの設定

FacebookなどのSNSでシェアされた時に表示されるmeta情報がOGPです。
ボタンを設置したら忘れずにOGPも設定しましょう。

<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="ページタイプ(websiteやarticle)">
<meta property="og:url" content="ページURL">
<meta property="og:image" content="ページのアイキャッチ画像">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta property="og:description" content="ページの説明">
<meta property="fb:admins" content="FBの管理者ID">

▼参考
FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?
「Open Graph Pro」を今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし
OGPのog:typeでwebsiteやblogを設定するときの注意点とPHPでの振り分け方法

デバッガー

OGPが適切に設定されているかを確認することができます。
キャッシュをクリアしてくれるので、一度間違ってOGPを設定した後キャッシュが残って新しい設定が反映されない!という場合もご安心ください。
このデバッガーに該当するURLを入力すればOKです。
ちなみにこの記事はog:imageもっと大きくしてよという警告がでています(・∀・)

04ec153c9610562d70dcf6a7233f3aab 300x285 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://developers.facebook.com/tools/debug

twitter

ツイート・フォローボタン

tweet ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://twitter.com/about/resources/buttons
※フォローボタンにカウンターを表示したい場合は、data-show-count=”true” にすればOKです。

tweet btn ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

こういった縦型のカウンター付きツイートボタンを設置する場合は、通常と同じく上記からソースコードをコピーして、data-count=”vertical” を追加すればOKです。

▼参考
Twitterのボックス型のツイートボタンを作成する方法

タイムラインなどのウィジェット

tweetbox ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://twitter.com/settings/widgets/new/user 

Google

+1ボタン

googleplus ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
https://developers.google.com/+/plugins/+1button/

はてなブックマーク

ブックマークボタン

デザインが新しくなりました。

hatena ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
http://b.hatena.ne.jp/guide/bbutton

LINE

LINEで送るボタン

公式に「LINEで送るボタン」を公開すると発表はされたものの、ソースコード自体はまだ公開に至っていない(2012.12.11現在)のでとりあえずは非公式のボタンを設置する形になります。

line ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など
公式にソースコードが公開されました。
▼URL
http://media.line.naver.jp/ja/

以下、非公式の場合
下記に生成ツールがありますのでそれを活用するか、ツールの「LINEに飛ぶよ」という説明ページを挟まずにダイレクトに飛ばしたいという方は、自分でボタンを作成して下記のようにリンクすればOKです。LINEは主にスマホで利用されているので、スマホからの閲覧以外は非表示にするなどした方が良さそうです。

【LINEに送る生成ツールを利用する】

<a href="http://line.msng.info/[送りたいページのURL]"><img src="[ボタン画像のURL]" width="60" height="60" alt="LINEで送る" /></a>

詳しくは、「数千万のLINEユーザーにウェブページの情報を伝える魔法のボタン「LINEで送る」の作り方」をご覧ください。

【自分でボタンにリンクする】

<a href="line://msg/text/ここにテキストやURLを書いてね"><img src="/images/line.gif" alt="LINEに送る" /></a>

mixi

mixiのボタンを設置するには「mixi Developer Center」への登録が必要になります。登録後、「mixi Plugin」から「新規サービスを追加」してIDを発行してください。

イイネ!ボタン

mixilike ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/get_html_code/

mixiチェック

bt check 1 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

▼URL
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/ 

Pocket

Pocketとは、旧Read It Laterだった「あとで読む」機能に特化したサービスです。
最近何かと話題なのでボタンのまとめに追加しておきます。(2013.2.26追加)
人気すぎるのか現時点で表示に時間がかかってますがすぐ改善するかなと思われます。

Pocket Button

Pocket for Publishers Pocket Button ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など
▼URL
http://getpocket.com/publisher/button

その他のボタン

その他のボタンは下記のサイトに怒涛のようにまとまっています。
【今日のボタン】公式の『mixiボタン』『Twitterボタン』『Facebookボタン』『はてなボタン』などを設置する方法。

ちなみに「Evernote」のボタンもここで紹介しようと思っていたのですが、公式サイトでコード取得ができなくなってしまったようです。
【ブラウザにEvernote Web Clipperを入れてクリップしてね】ということみたいですよ。

ソーシャルボタンの読み込みを高速化

こちらのページに書いてしまうとかなり長くなってしまうので別で投稿しました。こちらをご覧ください。

Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

ボタンの幅や吹き出しの直し方、コーディング方法など

ソーシャルボタンの余白

カウンターの吹き出しがついているツイートボタン部分の横幅は、数が増えても対応できるように大きめに指定してあるため、ボタンを横並びにしようとすると、隣のボタンとこんなにも余白ができてしまいます。
tweet width ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

ソーシャルボタンをCSSのinline-blockやfloatなどで横並びにしたい場合は、横幅を指定してしまいます。はてブGoogle+ボタンでも同じようにブロック要素のタグで囲んであげれば横幅を調整できますよ。
tweet width2 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

ただ、吹き出しの数字の桁数が増えると途中で切れてしまう可能性があるため、横幅はある程度余裕を持って指定してください。

<div style="width:112px;">ソーシャルボタン用のコード</div>

横並びのボタンがずれる

CSSの指定方法やバッティングによって意図しないCSSが効いてしまったりなどでソーシャルボタンがずれてしまう時があります。

まず、ソーシャルボタンを横並びに配置したい場合は、CSSの display:inline; ではなく、 inline-blockやfloatで指定するとキレイに並びます。

display:inline; の場合
display:inline; にするといいねボタンが下にずれたり、インライン要素のため上記の横幅指定も効かないのでてんやわんやです。
social button ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

display:inline-blockやfloat の場合
inline-blockかfloat にして横幅を調整するとキレイに並びます。
social button2 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

横並びのボタンを右寄せする場合

横並びになったソーシャルボタンたちを「右寄せ」で表示したい場合に、float:right; で指定すると見た目のボタンの並び順とソースコードの並び順が逆になってしまいますのでご注意ください。
 inline-block で右寄せするといいと思います。

HTML

<ul class="clearfix btnSocialBox">
<li class="btnSocial"><div class="fb-like" data-href="(URL)" data-send="false" data-layout="button_count" data-width="97" data-show-faces="false"></div></li>
<li class="btnSocial" style="width:112px;"><a href="https://twitter.com/share" class="twitter-share-button" data-href="(URL)" data-lang="ja" data-via="(アカウント)" data-related="(アカウント)">ツイート</a></li>
<li class="btnSocial" style="width:65px;"><div class="g-plusone" data-size="medium"></div></li>
</ul>

CSS

.btnSocialBox{
text-align:right;
}
.btnSocial {
display:inline-block;
margin-left: 10px;
}

縦型のツイートボタンの幅を調整する

縦型のカウンター付きツイートボタンを設置すると「ツイート」部分の右側に余白ができていました。(以前は問題なかったような)日本語(data-lang=”ja”)の場合にこの余白ができてしまうようです。

twitter ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

また、このボックスタイプのツイートボタンは80pxで、いいねボタンの70pxよりも横幅が広いため、複数のソーシャルボタンを並べた時に余白が余計際立ってバランスがよくありません。

ツイートボタンはCSSを使って65pxに調整したいと思います。

HTML

<div class="twBtn"><a href="https://twitter.com/share" data-via="xxx" data-lang="ja" data-count="vertical">ツイート</a></div>

CSS

.twBtn iframe{
width:65px !important;
}

twitter1 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

上のようにCSSでiframeの幅を調整し、無事余白がなくなりました。

いいね後に表示されるコメント欄がきれる

ボタンをキレイに配置してホッとした後、「いいね」ボタンを押すと以外と正常に表示されてない場合があるので必ず検証しましょう。

fbcomment1 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

コメント欄がきれてしまった場合は、ボタンのタグを囲んでいる要素のCSSに「overflow: hidden;」が入っていないか確認してみてください。

削除すれば問題なく表示されると思います。

以上になります。

ソーシャルはユーザー獲得にも効果的なツールですのでうまく活用していきたいですね。

[2013.2.22追加]
PVが増えてきたのでわかりやすいようにボタンのキャプチャを追加しました。
いいねボタンがずれる、ソーシャルボタンを右寄せにするなどのコーディング方法を追加しました。

[2013.4.3追加]
ツイッターの縦型カウンターのフォローボタンについて、設置方法を追加しました。

[2013.4.26追加]
Pocketボタンを追加しました。

[2013.5.13追加]
縦型のツイートボタンの幅を調整する方法を追加しました。

[2013.5.28追加]
現状のタグだと問題なかったため「いいねボタンがきれる」という内容を編集し、「いいね後に表示されるコメント欄がきれる」という内容に変更しました。

[2013.12.7追加]
FacebookにAppIDやデバッガーを追加し、コーディング方法などもより良い方法に修正しました。

Pocket
article clipper ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

One thought on “ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

  1. Pingback: 楽しみをビジネスに変える最初の取り組み、桜新町ポータル。|IAO-@In_advance_only-

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)