Facebook「いいね!」ボタンが設置できるようになりました

本日、はてなダイアリーにFacebook「いいね!」ボタンが設置できるようになりました。

はてなダイアリーに「いいね！」ボタンを設置するには、設定画面の記事の設定から、「Facebook『いいね!』ボタンを表示」にチェックを入れて設定を保存します。設定を保存すると、各記事の本文の下に「いいね!」ボタンが表示されるようになります。

どうぞご利用ください。

記事共有ボタンまわりのデザイン変更について

今回の機能追加により、はてなダイアリーの記事本文の下に表示する記事共有ボタンは、はてなブックマークボタン、ツイートボタン、「いいね!」ボタンの3種類になりました。あわせて少しデザインを変更しています。ツイートボタンは公式のツイートボタンに変更しました。はてなブックマークボタン、ツイートボタンは表示位置を変更させていただきました。記事表示ボタンのデザインは各テーマのデザインに応じて最適化してあります。

記事共有ボタンのHTML構造・CSSについて

記事共有ボタンに関わるHTML構造・CSSの詳細を以下に記載します。ブログテーマのカスタマイズや作成にご利用ください。

HTML構造（記事本文の最下部、ブログモードの場合はsectionfooterの直前に記述されます）

<p class="share-button sectionfooter">
  <iframe class="hatena-bookmark-button-frame" scrolling="no" width="50" height="20" frameborder="0" title="このエントリーをはてなブックマークに追加" style="width: 50px; height: 20px;"></iframe>
  <script async="async" charset="utf-8" src="http://b.st-hatena.com/js/bookmark_button.js" type="text/javascript"></script>
  <iframe class="twitter-share-button twitter-count-none" scrolling="no" frameborder="0" tabindex="0" allowtransparency="true" src="[Twitter ツイートボタンのURL]" style="width: 80px; height: 20px;" title="[タイトル]"></iframe>
  <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  <iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 100px; height: 21px;" src="[Facebook いいねボタンのURL]"></iframe>
</p>



<p class="share-button sectionfooter">
  <a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" data-hatena-bookmark-layout="simple" data-hatena-bookmark-title="[タイトル]" href="[はてなブックマークのURL]" data-hatena-bookmark-initialized="1">
    <img width="20" height="20" style="border: medium none;" alt="このエントリーをはてなブックマークに追加" src="http://b.st-hatena.com/images/entry-button/button-only.gif">
  </a>
  <script async="async" charset="utf-8" src="http://b.st-hatena.com/js/bookmark_button.js" type="text/javascript"></script>
  <iframe class="twitter-share-button twitter-count-none" scrolling="no" frameborder="0" tabindex="0" allowtransparency="true" src="[Twitter ツイートボタンのURL]" style="width: 80px; height: 20px;" title="[タイトル]"></iframe>
  <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  <iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 100px; height: 21px;" src="[Facebook いいねボタンのURL]"></iframe>
</p>
base.cssの指定
.body .section p.share-button {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  border: medium none;
  padding-top: 0;
  padding-bottom: 0;
} 

p.share-button iframe,
p.share-button a.hatena-bookmark-button img {
  vertical-align: middle;
}

p.share-button iframe {
  margin: 1px 0 0 3px;
}

p.share-button iframe.hatena-bookmark-button-frame,
p.share-button iframe.twitter-share-button,
p.share-button a.hatena-bookmark-button img {
  margin: 0 3px;
}


デザイン編集「かんたん」に含まれる、はてな提供のデザインテーマ及びテーマ作者様からいただいたデザインテーマについてはCSSを更新しました。また、テーマ作者さまでご自身でテーマの更新を希望される方は、お手数ですがはてなダイアリー問い合わせ窓口までご連絡ください。

Open Graph Protocol 対応について

あわせて、はてなダイアリーが Open Graph Protocol にも対応しました。はてなダイアリーで設定することなく、Open Graph Protocol に準拠したメタタグを出力します。

Open Graph Protocol の詳細については、以下をご覧ください。