HTMLに仕込める「いいね!」ボタン

2011.11.01 14:22
 仕事上でいいねボタンを作るハメになったんですが、配布されているiFrameのいいねボタンはなんかデザインが合わなくて気持ちがわるいというのと、いろいろと嫌みな感じがする...という個人的見解から、シンプルで押してみたくなる感じの小さないいね!ボタン、しかもfbとすぐにわかるというものを探していたら、やっぱりありました。
http://128bit.blog41.fc2.com/blog-entry-261.html

 HTMLとCSSでシンプルに組み込めます。軽いのでとてもいいです。テキストと小さなアイコンで作成しています。

HTMLソース
<a class="fb-like" href="http://www.facebook.com/plugins/like.php?href=http://home.kjnet.co.jp/home/_homepage/document/other_24.php" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href=[いいね!したい記事のURL]' ,null ,'width=450 ,height=250'); return false;" rel="nofollow">いいね!</a>

こういう形になります。なかなかいいです。これ、Facebookにログインしたまま冗談で押すと「いいね!」になっちゃうます。

いいね!

CSSコード
/*いいねボタン*/
a.fb-like {
    display: inline-block;
    padding-left: 20px;
    padding-right: 2px;
    border: solid 1px #CAD4E7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    height: 20px;
    line-height: 20px;
    background: url([いいね!ボタンの画像URL]) no-repeat 2px center #ECEEF5;
    text-decoration: none;
    color: #3B59B8;
}
a.fb-like:hover {
    background: url(http://home.kjnet.co.jp/home/information/theme-images/icon/fb_icon_iine_hover.png) no-repeat 2px center #ECEEF5;
    border: solid 1px #9DACCE;
}






プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer