>-->

Blogger の投稿フッターにはてなブックマーク件数を表示する方法 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | > Blogger の投稿フッターにはてなブックマーク件数を表示する方法

Blogger の投稿フッターにはてなブックマーク件数を表示する方法

Posted at: 2011-05-03 Label: , 15

みなさんお気づきのとおり、遅ればせながら、ようやくレイアウトテンプレートの仲間入りをしました。そこで、自分のブログをカスタマイズしていくついでに、その記録をこちらに掲載していこうと思います。

最初は、投稿のフッターにはてなブックマーク件数を表示する方法。 （はてなのヘルプ「自分のブログに「○○users」を表示する」に Blogger についての説明もあるんですが、情報が古く、現在 Blogger で一般に使われているレイアウトテンプレートでの導入方法は書かれていません。）




導入方法

１．Blogger 管理画面「デザイン ＞ HTML の編集」ページで、「ウィジェットのテンプレートを展開」にチェックを入れます。

ï¼’．投稿フッター部分 <div class='post-footer'> を見つけ出し（ブラウザの検索機能を使うと便利です）、コメント件数表示部分

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
       <b:if cond='data:post.allowComments'>
         <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
      </b:if>
    </b:if>
  </b:if>
</span>

のすぐ後に

※
<span class='hatena-bookmark'>
  <a expr:href='&quot;http://b.hatena.ne.jp/entry/add/&quot; + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
  <a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' target='_blank'><img expr:alt='&quot;はてなブックマーク - &quot; + data:post.title' expr:src='&quot;http://b.hatena.ne.jp/entry/image/&quot; + data:post.url' style='border: none;' expr:title='&quot;はてなブックマーク - &quot; + data:post.title'/></a>
</span>

という文字列を挿入して「テンプレートを保存」します。これだけ。ぜひお試しくださーい。


追記（2011-05-05）：

その２

記事を公開した後で、こんなページを発見。



新しい画像が用意されていたんですね。これを Blogger に表示させるコードを考えてみました。こっちの方がいいかも…という人は、手順２の※マークのコードを

<span class='hatena-bookmark'>
  <a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</span>

に換えて、貼り付けてください。


その３

さらにこんなページも発見。



今度は画像ではなく、はてなのブックマーク件数取得 API ã‚’ JSONP でたたいて、JavasScript で書き出す方式です。通常の文字列で表示されるので、コメント件数とかの表記と統一させやすいかと。こう表示させたい場合、手順２の※マークのコードを

<span class='hatena-bookmark'>
  <a expr:href='&quot;http://b.hatena.ne.jp/entry/add/&quot; + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
  <a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot;+data:post.url' target='_blank'><script expr:src='&quot;http://api.b.st-hatena.com/entry.count?url=&quot; + data:post.url + &quot;&amp;callback=document.write&quot;' type='text/javascript'/> users</a>
</span>

に換えて、貼り付けてください。


関連（クラシックテンプレートの場合）：

スポンサードリンク：
お願い：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　
このエントリーをはてなブックマークに追加

Comments:15

  1. Mr.Morihayashiki10 May, 2011 06:35

    記事欄に文字も画像も入力できず、記事欄にくるくる回るマークがとまらず、なのですが、どうすればいいかお教え下さい。宜しくお願いいたします。
    なお、URLは下記です。
    http://dejikame-nikki.blogspot.com/

    ReplyDelete
  2. Mr.Morihayashiki10 May, 2011 15:45

    一昨日から記事欄に不具合がありましたが今なおっています。
    お騒がせでした。すみません‥‥

    ReplyDelete
  3. Kuribo14 May, 2011 11:00

    返信遅くなってすみません。回復したようでよかったです。ここのところ、Blogger 調子悪いですね。

    ReplyDelete
  4. 金光教武蔵小杉教会25 February, 2012 21:19

    はじめまして。
    先月よりBlooger使っています。
    はてなマーク、指示通り入力しましたが、マークが出てきません。

    テンプレート保存は無事に出来たのですが...
    URLは
    http://konkokyo-mk.blogspot.com/
    です。

    御指導よろしくお願いします。

    ReplyDelete
  5. 金光教武蔵小杉教会25 February, 2012 21:24

    加えて、質問ですが...
    ブログ内のプロフィール（google＋内の写真）の写真の大きさは変えられるのでしょうか。
    サイドバーに合わせた大きさにしたいのですが。

    このホームページを見て、スライドショーの幅は変えられました。ありがとうございます。

    御指導よろしくお願いします。

    ReplyDelete
  6. 金光教武蔵小杉教会25 February, 2012 21:49

    もう一つ、すいません。
    「まるカジリます。」で紹介されていた、各ブログパーツの右下に必ず出てくる「編集ボタン」。ある程度は消えたのですが、「読者」の部分と「フッター」の部分のものが、どうやっても消えません。
    を消してテンプレート保存を押しても、またが復活して表記されてしまいます。
    御指導よろしくお願いいたします。

    ReplyDelete
  7. Kuribo25 February, 2012 22:22

    ブログテンプレートの「HTML の編集」で

    ]]></b:skin>

    の直前に

    #Profile1 img {
    width: 170px;
    height: 170px;
    }
    .quickedit {
    display: none;
    }

    というコードを挿入すれば、プロフィール画像がサイドバーと同じぐらいの幅になって、編集ボタンも表示されなくなると思います。
    １番目の質問の解決方法はこちらでは分かりません。コードがちゃんと貼り付けられていないのでは？と思います。

    ReplyDelete
  8. 金光教武蔵小杉教会26 February, 2012 22:28

    ありがとうございました。
    プロフィール写真、編集ボタン、共に出来ました。

    ハテナボタンは、再度試みましたが、ダメでした。

    ReplyDelete
  9. 金光教武蔵小杉教会28 February, 2012 08:58

    すいません。
    この機能は「はてなブックマーク」に登録しないとダメなのでしょうか（ページ上にハテナボタンをつけること）。
    そうとして、利用規約を読みましたが、有料サービスなのですか?
    御指導よろしくお願いします。

    ReplyDelete
  10. 金光教武蔵小杉教会02 March, 2012 07:22

    度々すいません。
    「はてなブックマーク作成・設置について」を見ながら再度試みました。テンプレート保存は出来ますが、どうしてもマークが表示されません。改行も注意してやってみましたが･･･

    もう一点、投稿欄の「続きを読む」ã‚’「（投稿タイトル）を読む」に変更する方法分かれば教えていただけないでしょうか。

    御指導よろしくお願いいたします。

    ReplyDelete
  11. 金光教武蔵小杉教会03 March, 2012 11:23

    こんにちは。
    出来ました、はてなボタン。打ち込む場所が違っていたようです。御迷惑おかけしました。
    ありがとうございました。

    この操作中、レイアウト中のブログ投稿の編集ボタンからの各アイテムの並べ替えが出来なくなってしまったのですが原因分かりますでしょうか。

    それからもう一点の件、投稿欄の「続きを読む」ã‚’「（投稿タイトルの）続きを読む」に変更する方法分かれば教えていただけないでしょうか。

    どうぞ御指導よろしくお願いいたします。

    ReplyDelete
  12. Kuribo04 March, 2012 16:28

    プロフィール写真、編集ボタン、はてブボタンともうまくいったようでよかったです。

    アイテムの並べ替え不能については分かりません。お力になれずすみません。

    投稿欄の「続きを読む」ã‚’「（投稿タイトルの）続きを読む」に変更する方法については、今週このブログで記事にするつもりです。しばらくお待ちください。

    ReplyDelete
  13. 金光教武蔵小杉教会04 March, 2012 20:30

    了解です。
    投稿楽しみにしています。

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

    ReplyDelete
  14. Kuribo10 March, 2012 21:54

    記事投稿しました。ご確認ください。

    クリボウの Blogger Tips: Blogger 「続きを読む」リンクに投稿タイトルを表示する方法

    ReplyDelete
  15. Nita Agustina12 March, 2019 14:24

    Jadwal Ayam SV388 12 Maret 2019 - Selasa, 12 Maret 2019 – Pada Hari Tersebut Akan Di Laksanakan Berbagai Pertandingan Sabung Ayam Secara Live di Arena Sabung Ayam Thailand.

    Situs Judi Sabung Ayam Online SV388 Merupakan Situs Judi Asal Thailand Yang Sangat Terkenal Dengan Permainan Sabung Ayam Yang Fair dan Menghibur Para Penonton Judi Sabung Ayam.

    Untuk Info Lebih Lanjut Bisa Hub kami Di :
    wechat : bolavita
    line : cs_bolavita
    whatsapp : +628122222995
    BBM: BOLAVITA

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.