ปรับแต่ง facebook comments ด้วย css กำหนด style ให้เข้ากับเว็บ

อ่าน สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย ได้ที่

http://www.ninenik.com/สร้าง_comment_ด้วย_social_plugins_ใน_facebook_api_อย่างง่ายดาย-291.html

การนำ facebook comments ไปใช้ ในกรณีที่ต้องการปรับแต่ง การแสดงผลของเนื้อหา และรายละเอียดของ comments เช่น สีตัวอักษร ตำแหน่งการจัดวาง สีพื้นหลัง ให้เข้ากับเว็บไซต์ สามารถทำได้ดังนี้

อ่านวิธีการและตัวอย่าง จากที่มา ภาษาอังกฤษ ได้ที่ http://giltbdblack.blogspot.com/

1. สร้างไฟล์ css สำหรับกำหนด style ในที่นี้ใช้ชื่อ facebook_comment.css แล้ว copy จาก css ด้านล่างไปใช้ปรับแต่ง โดย css ด้านล่างจะเป็นการปรับแต่ง สีของข้อความเป็นหลัก สามารถเพิ่ม ปรับแต่ง สีพื้นหลัง หรืออื่นๆ เพิ่มเติมได้ตามต้องการ
 

@charset "utf-8";
/* css กำหนดปุ่ม Like  ปรับแต่งตามต้องการ */
div.like span.connect_widget_text {color:#eee;}
div.like div.connect_widget_confirmation {color:#eee;}
div.like span.connect_widget_text a {color:#ffc6ff;}

/* css กำหนดส่วนของ comments ปรับแต่งตามต้องการ */

/* css กำหนดส่วนของ การล็อกอิน facebook กรณียังไม่ได้ล็อกอิน */
div.comment_body div.composer div.connected {color:#eee;}
div.comment_body div.composer div.connected div.UIImageBlock_Content {color:#fff;}
div.comment_body div.composer div.connected span.namelink a {color:#ffc6ff;}
div.comment_body div.post_area div.connected label {color:#ccc;}
div.comment_body div.show_connected a.editsettings {color:#ffc6ff;}

/* css กำหนด ส่วนของแต่ละรายการของ comments*/
div.comment_body div.wallkit_post {color:#eee;border-bottom:#d8dfea 1px dotted;}

/* css ในส่วนที่แสดงเนื้อหาข้อความ comments */
div.comment_body div.wallkit_postcontent h4 {color:#eee;}
div.comment_body div.wallkit_postcontent h4 a {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#ccc;}
div.comment_body div.wallkit_postcontent div {color:#fff;}
div.comment_body div.wallkit_postcontent div a {color:#c4ffc4;}

/* css กำหนด ส่วนลิ้งค์ของผู้ดูแล comments เช่นปุ่มลบ บล็อก เป็นต้น */
div.comment_body div.wallkit_actionset a {color:#ffc6ff !important;}

/* css ในส่วนที่แสดงจำนวน comments และลิ้งค์แสดงหน้าของ comments */
div.comment_body div.wallkit_subtitle div.post_counter {color:#ccc;}
div.comment_body div.wallkit_subtitle div.pager a {color:#ffc6ff;}
div.comment_body div.wallkit_subtitle div.pager a:hover {color:#fff;}

/* css กำหนดส่วนของ การล็อกอิน facebook กรณียังไม่ได้ล็อกอิน */
div.comment_body div.connect_area div.or {color:#eee;}
div.comment_body div.connect_area div.connect_button_text {color:#eee;}

/* css ข้อความในส่วนของ captch กรณีอนุญาตให้คนทั่วไป comments ได้  */
div.comment_body div.wall_captcha {color:#eee;}
div.comment_body div.wall_captcha h3 {color:#eee;}
div.comment_body div.wall_captcha a {color:#ffc6ff;}
div.comment_body div.wall_captcha label {color:#eee;}

2. ปรับในส่วน tag fb:comments  โดยเพิ่ม attribute simple และ css เข้าไป
 

<fb:comments xid="<?=md5($_SERVER['SCRIPT_NAME'].$_SERVER['REQUEST_URI'])?>" 
simple="1" css="http://www.youdomain.com/facebook_comment.css?<?=time()?>"  
numposts="10"  width="800"></fb:comments>  

โดย path ของ css ต้องเป็น แบบ absolute url หรือ path เต็ม ไม่สามารถใช้ css="facebook_comment.css?<?=time()?>" ได้

3.ปรับแต่งไฟล์ facebook_comment.css ในข้อ 1 ตามต้องการ เมื่อได้ style ตามต้องการแล้ว ให้เอา <?=time()?> ใน css="http://www.youdomain.com/facebook_comment.css?<?=time()?>" จากข้อ 2 ออก แล้วใช้เป็น
ตัวเลข 1 2 3.... เป็น css="http://www.youdomain.com/facebook_comment.css?1"

หากต้องทดสอบการปรับรูปแบบใหม่ ให้ใช้ <?=time()?> แทนตัวเลขหลัง ? และถ้าได้ style ตามต้องการแล้ว
ให้เปลี่ยนกลับเป็นตัวเลข โดยเพิ่ม เป็น 2 3 4 ...
css="http://www.youdomain.com/facebook_comment.css?2"
css="http://www.youdomain.com/facebook_comment.css?3" .....

 ตัวอย่างภาพประกอบ กรณีกำหนดพื้นหลังเว็บไซต์เป็นสีดำ

ตัวอย่างภาพประกอบ กรณีกำหนดพื้นหลังเว็บไซต์เป็นสีฟ้า

ดาวน์โหลดไฟล์ css และไฟล์ตัวอย่างได้ที่ http://www.ninenik.com/download/facebook_test_style.rar

หมายเหตุ เราไม่สามารถปรับรูปแบบให้ได้ตามต้องการเลยในครั้งเดียว จึงใช้ <?=time()?> แทนการกำหนด ?1 ?2 ?3 ในครั้งแรก เพื่อลดการเสียเวลา ในการไปกำหนดเพิ่มตัวเลข กรณีทุกครั้งเราทำการปรับแต่ง style