[Howto] CSS : แต่งกล่อง Facebook Like Box กัน

เพิ่งไปเจอมา เลยเอามาเขียนไว้เผื่อใครยังไม่รู้ จริง ๆ แล้วเราสามารถกำหนด Stylesheet ให้กับตัว Facebook Like Box ได้นะครับ

1
2
3
4
5
<div class="sidefb">  
	<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>  
	<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>  
	<fb:fan profile_id="ใส่ id จาก facebook" stream="0" connections="8" logobar="0" width="ใส่ความกว้าง" height="ใส่ความสูง" css="ใส่ css ลงไป?1" rel="stylesheet" type="text/css"></fb:fan> 
</div><!-- .sidefb -->

ตรง <code>css=</code> อย่าลืมใส่ <code>?1</code> และเปลี่ยนเป็น 2, 3, 4, … ทุกครั้งที่ทำการเปลี่ยนค่า css ในส่วนที่เราจะแต่ง Facebook Like Box ด้วยนะครับ อย่างเช่น ทำครั้งแรกก็ใส่เป็น <code>css=”stylesheet.css?1″</code>

ผมก็เอามาประยุกต์ใช้กับ sidebar ด้านขวาของเว็บผมเหมือนกัน Rabbitinblack.com ใน Code ของ Theme WordPress ผมใส่แบบนี้ครับ

1
2
3
4
5
6
7
8
9
10
11
12
<div class="sidefb">  
	<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>  
	<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>  
	<fb:fan profile_id="235867876471637" stream="0" connections="8" logobar="0" width="237" height="225" css="<?php bloginfo('stylesheet_url'); ?>?1" rel="stylesheet" type="text/css"></fb:fan> 
</div>
<div class="sidetw">  
	<a href="https://twitter.com/Rabbitinblack" class="twitter-follow-button">Follow @Rabbitinblack</a>  
	<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>  
</div> 
<div class="sideg">  
	<div class="g-plusone" data-size="medium" data-href="http://www.rabbitinblack.com"></div><span>Recommend on Google</span>  
</div>

ส่วน CSS ของผมก็เป็นแบบนี้ครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.fan_box .full_widget {padding:10px 3px 20px 3px !important;border:0 none !important;position:relative;}
.fan_box .connect_top{background: none !important;padding: 0 !important;}  
.fan_box .profileimage, .fan_box .name_block{display: none;}
.fan_box .connect_action{ padding: 0 !important; }  
.fan_box .connections{ padding: 0 !important;border: 0 !important;font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-weight: bold;color: #666; }  
.fan_box span.total{ color: #FF4F92;font-weight: bold; }
.fan_box .connections .connections_grid {margin-right:-10px;padding-top: 10px !important; }  
.fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; }  
.fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-weight: normal;color: #666 !important;padding-top: 1px !important;}
.fan_box .connect_widget{ position: absolute;bottom:0px;left:0px;margin: 0 !important; }  
.fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; }  
.fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; } 
 
.sidefb {position:relative;font-size: .85em;color: black;padding:0 9px;line-height: 1px;border:1px solid #DDD;}
.sidetw {background-color: #EEF9FD;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg {background-color: #EEF9FD; font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color: #333}

ผลลัพธ์ที่ได้ มีลักษณะแบบนี้ครับ

ลองเอาไปปรับแต่งกันดูนะครับทุกคน >_<

Share.

About Author

Web Developer @TiGERiDEA Interested in HTML CSS jQuery PHP Wordpress and I'm S♥ne แวะไปเยี่ยมชม Blog ได้ที่ http://www.rabbitinblack.com หรือ Follow Twitter @Rabbitinblack

Comments