DESIGN

I'm not deceived Diving Designer !

> >

1244" class="post-1244 post type-post status-publish format-standard has-post-thumbnail hentry category-web category-design"
wp_tmn

2014/

9

20

Sat

プラグインを使わずTwitter、Facebookほかソーシャルボタンを設置

Wordpressにソーシャルボタンを設置してみる@CSSによる位置調整つき

このエントリーをはてなブックマークに追加

今回は、プラグインを使わないでWordpressにSNS(Twitter、Facebook、はてなブックマーク、google+、Pocket)のボタンを設置する方法をご紹介。
 
プラグインでやれば安全に増やすこともできるのですが、うちの場合はSEOやらキャッシュやら何やらでプラグインだらけ。そのぶん表示の重さに跳ね返ってくるというのはゴメンこうむりたいので、プラグインを使わないでソーシャルボタンを設置してみる@CSSによる位置調整つき、という記事なのです。

細長いカウント付きボタン

ヨコに長いやつですね。
カウンタの部分をバルーンというらしいですよ。
 

 
こんなのが設置されます。
数値「0」は俺の弱さです。
 

CSS

.SnsTwitter	{ position: absolute; top: 20px; left: 131px; z-index: 9999; float: left; margin-right: 20px; }
.SnsFacebook	{ position: absolute; top: 20px; left: 231px; z-index: 9999; float: left; }
.SnsHatebu	{ position: absolute; top: 20px; left: 349px; z-index: 9999; float: left; }
.SnsGoogle	{ position: absolute; top: 20px; left: 471px; z-index: 9999; float: left; }
.SnsPocket	{ position: absolute; top: 20px; left: 541px; z-index: 9999; float: left; }

HTML

<div class="SnsTwitter"><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="XXXXX(ツイッターIDを入れて)" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<div class="SnsFacebook"><iframe class="a_CtSnsFacebook" src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=20" height="20" width="100" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>

<div class="SnsHatebu"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php echo get_the_title(); ?>" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>

<div class="SnsGoogle"><script src="https://apis.google.com/js/platform.js" async defer>{lang: 'ja'}</script><div class="g-plusone" data-size="medium"></div></div>

<div class="SnsPocket"><a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div>

細長いカウント無しボタン

カウント付きボタンを設置したところで。
今のカウントは「0・0・0」の嵐なわけです。
 
うちは宣伝らしい宣伝をしておらず、インバウンド実験地として技術系の記事を書き進め始めたばかりなので、特にその嵐はビュンビュン吹きすさんでおるのですな。
 
ソーシャルのカウンタは「0・0・0」だろうと臆せず貼り付けておけ、という説と、閑散感(またの名を姜尚桓。朝鮮人民軍次帥)が出て仕方がないので伏せておけ、という二つの説があり、どちらが正しいという結論は出ていないのですが、あんまり閑散感が気になる際は隠してしまいましょう。
 
次に示すのは、こういう表示のソースです。
 

CSS

.SnsTwitter	{ position: absolute; top: 20px; left: 131px; z-index: 9999; float: left; margin-right: 20px; }
.SnsFacebook	{ position: absolute; top: 20px; left: 201px; z-index: 9999; float: left; }
.SnsHatebu	{ position: absolute; top: 20px; left: 279px; z-index: 9999; float: left; }
.SnsGoogle	{ position: absolute; top: 20px; left: 369px; z-index: 9999; float: left; }
.SnsPocket	{ position: absolute; top: 20px; left: 426px; z-index: 9999; float: left; }

HTML

<div class="SnsTwitter"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="XXXXX(ツイッターIDを入れて)" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<div class="SnsFacebook"><iframe class="a_CtSnsHdFacebook" style="width:70px !important;" src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=20" height="20" width="100" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>

<div class="SnsHatebu"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php echo get_the_title(); ?>" data-hatena-bookmark-layout="standard-noballoon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>

<div class="SnsGoogle"><script src="https://apis.google.com/js/platform.js" async defer>{lang: 'ja'}</script><div class="g-plus" data-action="share" data-annotation="none"></div></div>

<div class="SnsPocket"><a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div>

二段でぶっといカウント付きボタン

では最後に、巨大なやつをご紹介してシメとしましょう。
 

 
こんなボタンが表示されます。
 

CSS

.SnsTwitter		{ float: left; margin-right:   20px; }
.SnsFacebook		{ float: left; margin-right: -210px; max-height: 65px; }
.SnsHatebu		{ float: left; }
.SnsGoogle		{ float: left; margin-left:    20px; }
.SnsPocket		{ float: left; margin-left:    20px; }

HTML

<div class="SnsTwitter"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="XXXXX(ツイッターIDを入れて)" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<div class="SnsFacebook"><iframe class="a_CtSnsFacebook" src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=box_count&amp;width=90&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=65" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>

<div class="SnsHatebu"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php echo get_the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>

<div class="SnsGoogle"><script src="https://apis.google.com/js/platform.js" async defer>{lang: 'ja'}</script><div class="g-plusone" data-size="tall"></div></div>

<div class="SnsPocket"><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div>

まとめ

お仕事でもよくこのボタンたちはくっつけるのですが、ソーシャルが未だ流行っているうちは、多少スピードを殺してでもくっつけといたほうがいいでしょうね。「インバウンドのススメ」的なサイトでもきっちりくっついてますから。
 
そういえばミクシィのボタンって見なくなったなあ。

Author ウェブデザイナー久川智夫

ぜひこの記事をシェアしてください!

このエントリーをはてなブックマークに追加

ぜひコメントをお寄せください!(メールアドレスは公開されません)

この記事のトラックバック用URL