本日、はてなダイアリーに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 の詳細については、以下をご覧ください。
