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などのソーシャルボタンを高速に読み込む方法まとめ

[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

こんにちは、@cappeeです。

WordPressで作ったブログにOGPを設定しようとしたところ、つまづいたのでメモしておきます。

「Open Graph Pro」プラグインを入れてみた

FacebookのOGPを設定するプラグインとして「Open Graph Pro」の評価が高かったので導入してみました。

デバッガーで確認したところ、ページによってIDが認識されなかったり、descriptionが表示されなかったりと結構不具合が。。

といっても便利なプラグインなことに間違いないので、もしphpファイルを直接触るのに抵抗があるという方は「Open Graph Pro」よりインストールしてください。

インストール方法はこちらが参考になります。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

Facebookからの流入を増やしたい時、OGPの設定は絶対必要!

上記の記事を書いた方も後々不具合に気づいたようです。
Facebook OGP向けプラグイン「Open Graph Pro」を外した理由

プラグインなしでFacebookのOGPを設定することに

プラグインなしでFacebookのOGPを設定するには、下記が参考にしました。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由

個人的に並び方を整理したのと、app_idも追加したのでそのコードも載せておきます。

<!-- ここからOGP -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//抜粋を表示
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="http://cappee.net/wp/wp-content/uploads/IMG_0117.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="http://cappee.net/wp/wp-content/uploads/IMG_0117.jpgg">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="管理者ID">
<meta property="fb:app_id" content="アプリID">
<!-- ここまでOGP -->

ソーシャルボタンの設置方法などはこちらをご覧ください。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正]

管理者IDとアプリIDの取得に関してはこちらをどうぞ。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

Pocket
article clipper [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

こんにちは、@cappeeです。

サイトやブログを作ったらFacebookのOGPを設定するのはマストになってきましたね。

ソーシャルボタンの設置方法などはこちらをご覧ください。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正]

OGPとは

Open Graph protocolの略で、facebook、mixiなどのソーシャルにシェアした場合にOGPを設定しておけば意図した内容を表示させる事ができる、というものです。
詳しくは下記をご覧ください。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

【保存版】やるとやらないでは大違い!Facebookいいね!ボタンを最適化する「OGP」設定方法まとめ

fb:admins と fb:app_id の設定は必要?

OGPで指定する fb:admins と fb:app_id ですが、受託なんかの場合は予め管理者にするFacebookユーザーを確認する必要があるため少々面倒だったりもします。

fb:admins と fb:app_id は記述しないと表示されないのかしら?と思って、記述なしにしてOGPを確認できるFacebookのデバッガーでみてみたところ、下記のような警告が表示されました。

admins app id FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?
Admins And App ID Missing:fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.

fb:admins と fb:app_id がないよ。設定すればニュースフィードで高いクリック率がだせるよ。」的なことが書いてあり、指定しないと表示できないわけではないようですが、可能な限り指定はしていた方が良さそうですね。

こういった警告はFacebookは管理者を把握しておきたいという理由も背景にあるようです。

fb:admins と fb:app_id、どちらかを記述するのでも大丈夫ですが、APP ID にはどちらにせよ  Admin ID が必要になりますのですぐに設定したい場合は fb:admins のみをとりあえず設定しておきましょう。

もう片方の fb:app_id がある理由としてはFacebook内にアプリ管理画面が作成されるので、管理者が複数いる場合に設定の管理が楽になります。(Admin ID も複数設定は可能なようです)

Facebookインサイトが使える

もうひとつ設定しておいた方がいい理由としては、Facebookインサイトが使えます!

Facebookインサイトとは、設定したサイトのいいねやシェアなどのアクション数をグラフで確認することができて、Facebookで集客を考えている方には必須のツールです。

OGPで fb:admins を設定済みの場合は、インサイトページを開き、右上の「ウェブサイトのインサイト」から追加できます。
Facebookインサイト

Facebookインサイトに関してや解析の重要性については下記をご覧ください。
フェイスブックのアクセス解析ツール「インサイト(Insights)」の導入と分析方法で分かったこととは?
【保存版】Facebookページ インサイト機能 徹底活用!~画面説明・用語解説編~
【保存版】Facebookページ インサイト 徹底活用!~実践編 押さえておきたい5つの検証ポイント~

Admin ID と APP ID の取得方法

fb:admins の Admin ID は下記のURLの最後に自分のアカウントを入力すれば情報が表示されるので、「id」のところにある数字が Admin ID になります。

http://graph.facebook.com/username

fb:admins と fb:app_id の違いやIDの取得方法に関してはこちらが参考になります。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは

htmlタグのxmlnsは必要?

HTML5の場合、htmlタグのxmlnsは不要のようです。

かわりにheadタグに下記を記述します。(2013.2.27追記)

ウェブサイトの場合

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

ブログトップページの場合

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">

ブログ記事ページの場合

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

詳しくはこちらをご覧ください。

 FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要

 

Pocket
article clipper FacebookのOGPに fb:admins と fb:app id の設定は必要?htmlタグのxmlnsは?

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

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