ソーシャルボタンを並べる | らくぺ／らくらくしっかり快適ホームページ

プラグインによっては、並べる順番とか、ボタンの種類を自分の好きなようにカスタマイズできないことがありますが、プラグインを使わなければ自由に配置できます。

弊社サイトのソーシャルボタンは次の方法で並べましたのでご紹介します。

１．各ボタンのコードを作成する。

各オフィシャルツールでボタンを作成し、コードをメモ帳などにコピペしておきましょう。
別々のファイルではなく、一つのメモ帳に、並べたい順番で上から貼り付けていけばOKです。

Facebook
https://developers.facebook.com/docs/plugins/like-button
Point!「box_count」を選ぶ。

Twitter
https://about.twitter.com/ja/resources/buttons
Point!「数を表示」にチェックする。

Google
https://developers.google.com/+/web/+1button/?hl=ja
Point!「バルーン」を選ぶ。

２．Twitterボタンのデザインを細工

Twiterのボタンは、このままでは上にツイート数が表示されません。
そこで、Aタグに次のパラメータを追加します。
data-count=”vertical”

コードが見にくいので、改行も追加します。
こんな感じになります。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="（ご自身のID）" data-lang="ja" data-count="vertical">
ツイート
</a>
<script>
	!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.src=p+'://platform.twitter.com/widgets.js';
			fjs.parentNode.insertBefore(js,fjs);
		}
	}(document, 'script', 'twitter-wjs');
</script>

</a>

!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.src=p+'://platform.twitter.com/widgets.js';

fjs.parentNode.insertBefore(js,fjs);

}

}(document, 'script', 'twitter-wjs');

</script>

３．全ボタンを整列

ボタンを表示している部分を、左寄せと間隔を開けるためのタグで囲みます。

<div style="float:left; margin-right:6px;">
（ボタンを表示している部分）
</div>

（ボタンを表示している部分）

</div>

ちなみに、<script>～</script>はプログラムの部分であって、ボタンを表示させている部分ではありません。
Google＋ボタンを例に取ると、こんな感じです。

<div style="float:left; margin-right:6px;">
<div class="g-plusone" data-size="tall"></div>
</div>
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</div>

window.___gcfg = {lang: 'ja'};

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/platform.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

４．左寄せ解除のおまじないを追加

これだけですと、後続する文字や画像が作ったボタンの右側にくっついてしまうかもしれません。
念のため、一番下に解除するタグを追加しておきます。

解除するタグはこんな感じ。

<div style="clear:both;">
</div>

1 2	<div style="clear:both;"> </div>

５．できあがったコードを設置

たとえばWordpressのウィジェットに「テキスト」を追加し、できあがったコードをコピペしたり、テキストでの投稿フォームに保存したりします。

こんな感じに並びましたでしょうか。

できあがった（はずの）コード全体は次のような感じです。

<!-- Facebook いいね！ -->

<div style="float:left; margin-right:6px;">
<div class="fb-like" data-href="（サイトのURL）" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>

<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=（ご自身のAppID）&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>


<!-- Twitter ツイート -->

<div style="float:left; margin-right:6px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="（ご自身のID）" data-lang="ja" data-count="vertical">
ツイート
</a>
</div>

<script>
	!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.src=p+'://platform.twitter.com/widgets.js';
			fjs.parentNode.insertBefore(js,fjs);
		}
	}(document, 'script', 'twitter-wjs');
</script>


<!-- google ＋ -->

<div style="float:left; margin-right:6px;">
<div class="g-plusone" data-size="tall"></div>
</div>

<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<div style="clear:both;">
</div>

</div>

(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=（ご自身のAppID）&version=v2.0";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

</a>

</div>

!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.src=p+'://platform.twitter.com/widgets.js';

fjs.parentNode.insertBefore(js,fjs);

}

}(document, 'script', 'twitter-wjs');

</script>

</div>

window.___gcfg = {lang: 'ja'};

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/platform.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

</div>

以上です。

（2014/7/14追記）
Facebookのいいね！をして表示されるポップアップが欠けて表示される場合は、CSSに次の記述を加えて下さい。

.fb-like iframe {
	max-width: none!important;
	z-index: 9999!important;
	overflow: visible!important;
}

.fb-like iframe {

max-width: none!important;

z-index: 9999!important;

overflow: visible!important;

}

らくぺモジュールをホームページの部品にしよう！