2012/05/27

[blogger]忍者おまとめボタン「も」利用して、記事の下にソーシャルボタンを付ける!

follow us in feedly
follow us in RSS

記事フッターにあるソーシャルボタンを見直しました。
今までは、
Zenbackであなたのブログに全てのフィードバックを。
zenbackを使って、ソーシャルボタンも表示させていたのですが、zenbackは結構長さが出るので、記事自体の下が少し長い印象になるのと、Adblockなどで、広告非表示をするとzenbackは表示されない事が多いので、記事下のソーシャルボタンがなくなってしまうのが理由です。

実際には、blogger付属の「共有ボタン」でgoogle+1あたりは付けることが出来ますが、これは使わないだろうって機能(メール添付とか)があって、なんとなくあれな気分なので、この際並べてしまうことにしました。


コード!

あくまで自分流ってことで少し変則的です。

HTML

<div class='post-footer-line post-footer-line-1'>
これが、投稿記事フッターの場所なので、HTMLの編集から探して、このコードの下に、
<div class='social-footer'>
  <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='ツイッターのIDが入る部分' expr:data-url='data:post.url' href='http://twitter.com/share'/>
  <div class='plusonefooter'><div class='g-plusone' data-size='medium' expr:href='data:post.url'/></div>
  <div class='like-footer'><div class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='130' expr:href='data:post.url'/></div>
  <div class='ninja_button'> 
  <script src='http://omt.shinobi.jp/b/忍者側の設定によって変わる部分' type='text/javascript'/>
  <span class='ninja_onebutton_hidden' style='display:none;'><data:post.url/></span><span class='ninja_onebutton_hidden' style='display:none;'><data:post.title/></span></div>
</div>
上から、

  • 「ツイートボタン」
  • 「google+1ボタン」
  • 「facebookいいねボタン」
  • 「忍者おまとめボタン」

になっています。
これは表示用コードだけで、スクリプトがありませんので、これだけだと表示されません。忍者おまとめボタンだけは表示されますけどね。
また、コードの初めに「<div class='social-footer'>」終わりに[</div>」を入れて、1つの箱にまとめています。


私は、
[blogger]ソーシャルボタンのスクリプト非同期コードを使って、整理する。 - sunabox
サイトでは、海外で作られた「twitter」「facebook」「google+1」「Analitycs」の非同期スクリプトに、「はてな」を加えた ...

にて、4つのスクリプト呼び出しの非同期コードをすでに「</head>」直上に挿入しています。
おまとめは便利だと思うんですが、これを使わない場合は、
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

<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/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
このスクリプト用のを「</head>直上か</body>直上」に入れて下さい。

  • 「google+1」は日本語。
  • 「いいねボタン」も日本語、そして、HTML5版を使う場合です。


忍者おまとめボタン

フッターに忍者おまとめボタンを使う理由は、

  • フッターには、livedoorクリップやYahooブックマークなども欲しかったんですが、一つ一つ置くと煩雑になる。おまとめボタンはすでにトップページで使っていてアカウントもあるので、楽。そして、あとから変更も楽。

全てをおまとめボタンにしなかった理由は

  • 並びが綺麗にならない!

これに尽きますw
どうしても、横に余白が出来る部分ができたんですよね・・。


整える
こうして並べたボタンをCSSで調整します。

カスタムCSS

.twitter-share-button {float:left;width: 83px !important;}
.plusonefooter{width:65px; float:left;}
.like-footer{float:left;}
.ninja_button{float:right;}
.social-footer{width:auto;height:20px;margin:20px 12px 12px 12px;padding:8px;background-color:#fff1cf;border:dashed 1px #aaa;}

上から、

  • 「ツイートボタン」の右側にボタンが並ぶように。横幅を固定して右のボタンとの余白を埋める。
  • 「Google+1ボタン」も同様に。
  • 「いいねボタン」も同様に左詰め。幅調整なし。
  • 「おまとめボタン」は、思い切って右詰めで配置。
  • 最後に、全体の背景に色を入れて少し区切りになるようにして。margin、paddingで中央寄りに配置。

ある程度綺麗に並んで、機能も「忍者おまとめボタン」で補えてると思いませんか?



総括

そうとう自分好みの設定なので、万人向けとはかけ離れてしまっている感がありますが、

  • フッター部分にはブックマーク系も付けたい。
  • いいねボタンは、HTML5版あたりで、クリックしたときにコメント出来るようにしたい。
  • なるべく大きさを揃えて綺麗に。

という部分はできたかな?と思っています。
以上、こんな感じになりました。



利用サイト


[blogger]ソーシャルボタンのスクリプト非同期コードを使って、整理する。 - sunabox
サイトでは、海外で作られた「twitter」「facebook」「google+1」「Analitycs」の非同期スクリプトに、「はてな」を加えた ...

Like Button - Facebook開発者

+1 Your Website - Google

Twitter / Twitterボタン

Twitter、Facebookボタンなどをまとめて簡単設置|忍者おまとめボタン

ありがとうございました!

6 件のコメント:

  1. はじめまして。最近Bloggerを始めた者です。すなふさんのカスタマイズTipsがとても分かりやすくて、毎日相当助けられております。有難うございます。


    忍者おまとめボタンの記事下設置について質問なのですが、

    記事下にgoogleAdsense+忍者おまとめボタンを表示させるために
    PCとmobileそれぞれ、


    直下に、



    (google AdSenseコード)




    というコードを入れています。

    mobileでは正常に表示されるのですが、PC版ではgoogle Adsenseしか表示されません。何か特別な指定などが必要なのでしょうか?

    大変厚かましいのですが、もし解決策などありましたらご享受頂けると助かります。

    返信削除
  2. 初めまして!コメント有難うございます。

    もしかしたら、記事で紹介している並びと、今現在使っている並びが少し違うので、混乱させてしまっているのかもしれません。すみません。

    まささんのアカウントの紹介から、Twitterの紹介を見てブログを確認させてもらったのですが、気になったところでは、Googleのアドセンスコードのスクリプトコードの部分、

    「script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"」

    このすぐ後の<script>が</script>となっていないため、おまとめボタンの<div class="ninja_onebutton">とおまとめ用のスクリプトコード部分がアドセンスのスクリプト部分に内包されてしまっています。

    <div ...> Googleアドセンスコード </div>
    <div ...> 忍者おまとめボタンコード </div>

    と意識して箱を作っていく感じで見直してみてはいかがでしょうか?

    <b:if cond=...>の部分は、HTMLをこちらから見た時には表示されてこない部分なので、bloggerの編集モード内で

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    となっていれば問題ないはずです。

    私のHTML編集画面のコード画像を付けておきますので、参照して頂けると嬉しいです。

    返信削除
  3. すなふさん、こんにちは。

    早速ご解説してくださってありがとうございます。

    すなふさんが例に挙げて頂いているコードを参考に、AdSense、忍者ボタンそれぞれをで囲み並べてみたところ、すんなりと問題なく表示されました!

    > このすぐ後の<script>が</script>となっていないため、

    …この部分に関しては確認したところちゃんと</script>になっていました(?)。

    が、手探りでやっていて、コードが煩雑になっていたのでどこかで不具合が起きていたようです。すなふさんのコードを参考に、もう一度冷静になって組み立ててみたところ解決されたのでとても助かりました。

    (コードで余計なところまで「<」や「>」を「<」「>」に変換していたようなので、その辺りも含めてすなふさんのコードを参考にスッキリまとめ直しました(^^;。)



    わざわざこちらのサイトのコードを直接見て、とても分かりやすく解説して頂いてありがとうございます!(T T)
    画像、とても分かりやすかったです。
    勉強になりました。

    返信削除
  4. うまくいったようで良かったです。Twitterでもコメント頂きましたけど、スッと好転すると嬉しいものです。
    Scriptについては、Chromeの要素の検証で見た結果なので、Chromeなりに何か解釈があったのかもですね。


    画像は強し(・・

    返信削除
  5. 度々すみません…!(汗)
    先日からかなりお世話になっております。

    その後、記事下のAdSense+忍者おまとめボタンの表示も解決されていたのですが、また新たな疑問点が出てしまったので、こちらで質問させて頂いてもよろしいでしょうか?

    個別記事の投稿で「検索向け説明」( meta description)を入力すると、


    google AdSense
    忍者おまとめボタン

    と記述している部分がページ上で表示されなくなってしまいました。
    「検索向け説明」を入力していない個別記事は、問題なくこれらが表示されます。「検索向け説明」を入力するとこれらが表示されなくなる(個別記事として認識されなくなる?)ようになっているのでしょうか…?

    こちらのSunaboxさんも個別記事ごとに「検索向け説明」( meta description)を入力されているようでしたので質問させて頂きました。

    何度もすなふさんに聞いてしまって申し訳ないです(汗)
    もし宜しければご意見いただけると嬉しいです。

    返信削除

Related Posts Plugin for WordPress, Blogger...