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=<?php the_permalink() ?>&send=false&layout=box_count&width=75&show_faces=true&font&colorscheme=light&action=like&height=65&appId=367799963326236" frameborder="0" scrolling="no"></iframe></div> <div class="hatena"><a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" data-hatena-bookmark-title="<?php the_title_attribute(); ?>" 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ボタンの表示が可能だと思います。