PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

11 August 2010 By




อ่าน สร้าง 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


Tags:: facebook comment css





URL สำหรับอ้างอิง