Facebookもとうとう上場して、日本でもようやく普及しはじめたようなので、ブログにいいね！ボタンを付けてみました。
また、Tweetボタンの仕様が勝手に変わって、幅が広すぎるので、その修正方法もいっしょに紹介したいと思います。いいね！ボタンもデフォルトで幅が広すぎて、CSSで変更する必要があります。
いいね！ボタンはFacebookのサイトで作ることができますが、以下のコードをコピーした方がはやいかもしれません。
太字の<$ArticlePermalink$>がそのエントリーが参照しているURLを表すもので、これはブログのベンダーによって違います。ライブドアブログの場合はこのままでいいのですが、他のブログを使っている場合、自分で対応するタグを調べて下さい。
それと、Facebookのいいね！ボタンも、Tweetボタンも、なぜかデフォルトだと幅が広すぎて見てくれが悪いです。CSSに以下のコードを付け足して調整しましょう。
ライブドアブログの場合は「ブログ設定」の「デザイン設定」で「CSS」を選んで、付け足して下さい。
Tweetボタンとはてブボタンは、以前のエントリーに作る方を書いておきました。
結局、Tweetボタン、いいね！ボタン、はてブボタンのコードは次のようになります。
太字の部分が自分で変えないといけないところです。
ライブドアブログの場合で説明すると、「ブログ設定」の「デザイン設定」で「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の次の位置に、上のコードを貼り付けて下さい。
さて、上手くできましたでしょうか？
ちなみに、ライブドアブログの場合は「ブログ設定」の中の「外部サービス」で、チェックボックスをクリックするだけで、これらのボタンを付けることができるようになりました。しかし、いろいろやってみたら、あまり見てくれがよくなかったので、自分で付けることにしました。
また、Tweetボタンの仕様が勝手に変わって、幅が広すぎるので、その修正方法もいっしょに紹介したいと思います。いいね！ボタンもデフォルトで幅が広すぎて、CSSで変更する必要があります。
いいね！ボタンはFacebookのサイトで作ることができますが、以下のコードをコピーした方がはやいかもしれません。
<iframe src="//www.facebook.com/plugins/like.php?href=<$ArticlePermalink$>&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
太字の<$ArticlePermalink$>がそのエントリーが参照しているURLを表すもので、これはブログのベンダーによって違います。ライブドアブログの場合はこのままでいいのですが、他のブログを使っている場合、自分で対応するタグを調べて下さい。
それと、Facebookのいいね！ボタンも、Tweetボタンも、なぜかデフォルトだと幅が広すぎて見てくれが悪いです。CSSに以下のコードを付け足して調整しましょう。
iframe.twitter-share-button {
width: 115px!important;
}
iframe[src*="www.facebook.com/plugins/like.php"]{
width:115px !important;
}
ライブドアブログの場合は「ブログ設定」の「デザイン設定」で「CSS」を選んで、付け足して下さい。
Tweetボタンとはてブボタンは、以前のエントリーに作る方を書いておきました。
結局、Tweetボタン、いいね！ボタン、はてブボタンのコードは次のようになります。
<Div Align="right">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<$ArticlePermalink$>" data-text="金融日記テクニカル <$ArticleTitle ESCAPE$>" data-count="horizontal" data-via="kazu_fujisawa" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<iframe src="//www.facebook.com/plugins/like.php?href=<$ArticlePermalink$>&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> - <$BlogTitle ESCAPE$>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</Div>
太字の部分が自分で変えないといけないところです。
ライブドアブログの場合で説明すると、「ブログ設定」の「デザイン設定」で「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の次の位置に、上のコードを貼り付けて下さい。
・・・icleCategory1$></a> </IfArticleCategory1><IfArticleCategory2>| <a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>
この間
<IfFirstArticle><$Advertise$></IfFirstArticle>
</div>
<div class="blogbodybottom・・・
さて、上手くできましたでしょうか？
ちなみに、ライブドアブログの場合は「ブログ設定」の中の「外部サービス」で、チェックボックスをクリックするだけで、これらのボタンを付けることができるようになりました。しかし、いろいろやってみたら、あまり見てくれがよくなかったので、自分で付けることにしました。
