Sponsored Link

こんにちは、静かな法律家のブログへようこそ。

今回は、記事を共有してもらうための
SNSボタン(ソーシャルボタン)を、上に吹き出し付きにする
ためのhtmlコードの書き方を備忘を兼ねて公開します。
(プラグインを使いません。)

ただし、

PC初心者である私が、他のブログを参考にして
実験と修正を繰り返してつくったものなので、
自分としては納得して作ったものではなく、

不十分です。

一応これで表示はされると思いますが、
足りない部分があるはずなので、
逆に修正のご指摘をいただける方は
ぜひお願いします。

初心者の方は、こちらの記事で紹介している
プラグインを使うのが無難かとは思います。

私は、ビジュアルにこだわりたくて、無理をしました(^^;)

ちなみに、テンプレートは賢威6.1を使用しています。

SNSボタン表示用htmlタグ

まずは、SNSボタンを表示させたい箇所に、
以下の記述をします。
(私の場合、投稿記事に表示させたいので、single.phpに記述します。)

※twitterの「 data-via=”あなたのアカウント名” 」のところは、
実際のあなたのアカウントを記述してくださいね。

<div class="social_button">
<div class="facebook"><iframe width="320" height="240" style="border: none; overflow: hidden; width: 75px; height: 65px;" src="//www.facebook.com/plugins/like.php?href=&lt;?php the_permalink() ?&gt;&amp;send=false&amp;layout=box_count&amp;width=75&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=65&amp;appId=367799963326236" frameborder="0" scrolling="no"></iframe></div>
<div class="hatena"><a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/&lt;?php the_permalink() ?&gt;" data-hatena-bookmark-title="&lt;?php the_title_attribute(); ?&gt;" data-hatena-bookmark-layout="vertical-balloon"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script charset="utf-8" type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" async="async"></script></div>
<div class="twitter"><a class="twitter-share-button" href="https://twitter.com/share" data-lang="ja" data-via="あなたのアカウント名" data-count="vertical">ツイート</a><script type="text/javascript">// <![CDATA[
!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>
<div class="googleplus">
<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">// <![CDATA[
window.___gcfg = {lang: 'ja'}; (function() {  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;  po.src = 'https://apis.google.com/js/plusone.js';  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);  })();
// ]]></script>

</div>
<div style="float: left; margin: 0 16px 0 0;"><a class="pocket-btn" data-pocket-label="pocket" data-pocket-count="vertical" data-lang="en">Pocket</a><script type="text/javascript">// <![CDATA[
!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>
</div>

 

SNSボタンを後で読み込ませるためのhtmlタグ

SNSボタン表示用のタグを記述したテーマファイルの一番下に、</body>タグがあります。
その</body>タグの直前に、以下のコードを
記述します。

これは、ページ表示速度を落とさないために、
SNSボタンを後読みさせるためのタグです。
ゆめぴょんさんのサイトを参考にさせていただきました。

<script type="text/javascript">// <![CDATA[
(function(w,d){         w.___gcfg={lang:"ja"};         var s,e = d.getElementsByTagName("script")[0],         a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");         s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};         a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");         a("//platform.twitter.com/widgets.js","twitter-wjs");         a("//b.st-hatena.com/js/bookmark_button.js");         a("https://apis.google.com/js/plusone.js");         a("https://widgets.getpocket.com/v1/j/btn.js?v=1"); })(this, document);
// ]]></script>

デザインの調整用のhtmlタグ

最後に、SNSボタンの大きさなどを調整するhtmlタグです。

私は、適当にcommon.cssのテーマの一番最後に記述しましたが、
cssファイルであればどこでもいいのかも?

.social_button {
margin: 0px 0px 10px 20px;
padding: 5px;
width:100%;
height:65px;
}
.social_button .twitter {
float: left;
margin: 0px 10px 5px 5px;
padding: 0px;
display: inline;
width: 100px;
}
.social_button .facebook {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
display: inline;
width: 73px;
}
.social_button .googleplus {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
display: inline;
width: 73px;
}
.social_button .hatena {
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
display: inline;
width: 73px;
}

以上で、以下のようなSNSボタンの表示が可能だと思います。

snsボタン