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

今朝突然iPhoneから避難訓練の緊急速報がピピピとなってびっくりした、@cappeeです。

以前投稿したこちらの「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」がわりと好評なので、高速化についても追記しようと思ったのですが、あまりにも長くなるので別記事で投稿したいと思います。

ソーシャルボタンの高速化に関する方法は色々なブログで見かけるのですが、記述方法などまとまったものがなかったのでメモしておきたいと思います。

ソーシャルボタンのJavaScriptを最後に記述する

ソーシャルボタンに限らず基本的なことですが、JavaScriptは表示が問題なければ</body>の直前に記述するとページの読み込みを早くすることができます。

jQueryなど<head>内で指定しないといけないJSもありますが、ソーシャルボタンのタグであれば最後に記述しても問題ありません。

ソーシャルボタンのJavaScriptに非同期化を指定する

現在のFacebookやtwitterボタンは「同期読み込み」になっており、ソーシャルボタンのJavaScriptの読み込みが完了するまで他の読み込みができない状態です。

これを「非同期読み込み」にすることで、JavaScriptの読み込みが完了していなくても他の部分を読み込むことが可能になります。

FacebookやGoogle+1でもそのような読み込み方法が推奨されているようです。

ちなみにGoogle+1ボタンは最初から非同期の設定になっていますので変更の必要はありません。

Facebookタグの記述方法

js.async = true; を以下のように追加することで非同期化します。

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async = true;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=110946748983094";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

twitterタグの記述方法

twitterの公式タグは非同期に対応しているらしいのですが、それらしい記述が見当たらないため、疑り深い方は async を記述してみてください。表示は問題ありません。
js.async = true; を以下のように追加することで非同期化します。

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

Twitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプト(+はてな)

よく追加するソーシャルボタンとAnalyticsのJavaScriptをキレイにまとめて非同期にしたスクリプトがあります。

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */ (function (doc, script) {
    var js,
    fjs = doc.getElementsByTagName(script)[0],
        add = function (url, id) {
            if (doc.getElementById(id)) {
                return;
            }
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };
    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

さらにプラス「はてな」を追加してスクリプトもありましたので引用しておきます。

詳しくはこちらをご覧ください。
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

<script>
(function (w, d) {
w._gaq = [["_setAccount", "UA-XXXXXXXX-X"],["_trackPageview"]];
w.___gcfg = {lang: "ja"};
var s, e = d.getElementsByTagName("script")[0],
a = function (u, i) {
if (!d.getElementById(i)) {
s = d.createElement("script");
s.src = u;
if (i) {s.id = i;}
e.parentNode.insertBefore(s, e);
}
};
a(("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga");
a("https://apis.google.com/js/plusone.js");
a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
a("//platform.twitter.com/widgets.js", "twitter-wjs");
a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
})(this, document);
</script>

遅延ロードまたはスクロール位置ロード

非同期読み込みでも遅い!という方はもう一手間追加すればきっと快適になるはずです。

遅延ロード … ページが表示されて数秒した後に指定したJavaScriptを読み込むという方法です。

スクロール位置ロード … ページの高さのとある場所までスクロールしたらJavaScriptを読み込むという方法です。

こちらの読み込みの記述方法に関しては下記を参考にしてください。
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!

以上になります。

ちなみにこのブログのソーシャルボタンはプラグインで表示しているため非同期化はまだ未対応です!

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

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

@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 ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

twitterの検索ウィジェットが激重すぎて公式に入れないほうがいいレベル

Worpressがやたら重い。。

プラグイン停止してみてもやっぱり重い。

スクロールしてもカッカッって後から付いてくるあのストレスいっぱいの動き、ヤですよね。

で、ソーシャル系のコードもサイトが重くなる原因としてよく聞く話なので消してみました。

twitterさん、あなたでしたか。

twitterの中でもキーワードを指定してタイムラインを表示するウィジェットが激重ですwobbly twitterの検索ウィジェットが激重すぎて公式に入れないほうがいいレベル

つぶやき全部から検索して表示しているわけなのでそりゃあ重いよなーとは思いますが、

こんなに激重なのに公式のウィジェットとして入れていいのかな?と疑問に思うレベル。

ちなみにフォローボタンのみなら問題なくさくさく動いてます。

どーしても設置したい、どのくらい重くなるのか興味がある方はどうぞ。

twitterの検索ウィジェット

Pocket
article clipper twitterの検索ウィジェットが激重すぎて公式に入れないほうがいいレベル