2013年度版FacebookのLikeboxをカスタマイズする方法

By@mtoksuyOn 2013年06月12日

Tag To
facebook
likebox
カスタマイズ
つくってみた

2012年に色々なブログで紹介されていたカスタマイズ法が絶滅した感があります。

そこで、アクセストークンとかアプリキーとかめんどくさいんで違う方面から攻めてみました。HTMLとCSSだけでカスタマイズできるようにしたのですが少々冗長気味になってしまっているのが申し訳ないです。

まーとりあえず、やり方を紹介していきます。

初めに注意点とか色々

Facebookの仕様が変わりデザインが崩れる恐れがあります。
レスポンシブにも対応していますがデザインによって挙動が変わるかもしれません。
実装を試して上手く行かない時はご連絡下さい。 @mtoksuy
FBページの中で動画やアニメを実装する事も可能ですので実装した勇者は宜しければ、ご連絡頂けたら嬉しいです。

「いや、俺はアクセストークンとか使ってJavaScriptでカスタマイズしたいんだ!!」って方はこちらの記事を読んで下さい。

それでも、Facebook「Like Box」をカスタマイズしたかった。

こんなLileboxにする事が出来ます

Programmer_BOX_Likebox

これを軸に作ります & 紹介が終わったらこのLikeboxのコードで実装を説明していきます。

Facebook_Color_Likebox

Facebookカラーで新しめな感じにしました。

iOS7_Likebox

発表されたばかりですからね、ガジェットブログとかで使えそう。

Google+box_Likebox

Google+のボックスと同じデザインにしてみました。クール。

star_night_Likebox

ブラック系も一応作ってみました。

Magnifying glass_Likebox

虫眼鏡的な。ラーメンどんぶりとか色々作ったのですが奇抜すぎてボツにしました。※320以下のデバイスだとはみ出てしまいます。作ってから気付いてしまいました。すいません。あとおそらくですがChrome、Safariのバグで画像にポインターを合わせると画像がはみ出てしまいます。調べまくったのですがわからずでした。。

Background_Twitter_Likebox

Twitterの背景を使いました。かわいい。

Likeboxのカスタマイズ方法

サンプルの紹介も終わったとこで次は実装の説明をしていきたいと思います。

上記でも説明した通り Programmer_BOX_Likebox のコードで説明していきますね。

HTML

	<!-- 影を隠すよ -->
	<div class="face_book_plgin_shadow_hidden"> </div>
	<!-- この中にFBページを閉じ込めるよ -->
	<section class="face_book_plgin"> <!-- ここでデザインもするよ -->
		<!-- FBページ -->
		<div class="fb-like-box" data-href="設置したいFBページURL" data-width="この記事の説明では694だけど自由に書き換える" data-height="" data-show-faces="true" data-stream="false" data-header="false"></div>
		<!-- FBページから強制出力されるborderを隠す(トップ) -->
		<div class="face_book_plgin_border_top"> </div>
		<!-- FBページから強制出力されるborderを隠す(ライト) -->
		<div class="face_book_plgin_border_right"> </div>
		<!-- FBページから強制出力されるborderを隠す(ボトム) -->
		<div class="face_book_plgin_border_bottom"> </div>
		<!-- FBページから強制出力されるborderを隠す(レフト) -->
		<div class="face_book_plgin_border_left"> </div>
	</section>

こんな感じのHTMLを貼付けて下さい。※一応書きますけどFBのプラグインjsもどっかに記述して下さい。

CSS

/** 影を隠す **/
.face_book_plgin_shadow_hidden {
    background: none repeat scroll 0 0 #FCFBF9; /** 背景色に合わせる 合わない場合はheight: 0でもおk **/
    height: 1px;
}
/** FBページを出さないようにしてデザイン **/
.face_book_plgin {
    background-color: #FCFBF9 !important; /** ここの色に合わせてボーダーを消す色も合わせる !important超大事 **/
    border-radius: 2px 2px 2px 2px; /** デザイン **/
    box-shadow: 1px 1px 0 2px rgba(0, 0, 0, 0.05); /** デザイン **/
    float: left; /** デザイン **/
    width: 100% !important; /** 超大事 **/
    margin: 0 0 41.6px; /** デザイン **/
    overflow: hidden !important;  /** 超大事 **/
    position: relative; /** 超大事 **/
    width: 100% !important; /** 超大事 **/
    word-wrap: break-word; /** 一応記述 **/
    word-break: break-all; /** 一応記述 **/
}
/** borderを隠す(トップ) **/
.face_book_plgin_border_top {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    height: 12px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1032px;
}
/** borderを隠す(ライト) **/
.face_book_plgin_border_right {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    position: absolute;
    right: 0;
    width: 6px;
}
/** borderを隠す(ボトム) **/
.face_book_plgin_border_bottom {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 6px;
    left: 0;
    position: absolute;
    width: 1032px;
}
/** borderを隠す(レフト) **/
.face_book_plgin_border_left {
    background: none repeat scroll 0 0 #FCFBF9; /** 合わせる **/
    bottom: 0;
    height: 300px;
    left: 0;
    position: absolute;
    width: 6px;
}

CSSはこんな感じで。

これだけでデザインが自由に出来るLikeboxになりました!パチパチ。