[howto] ทำหน้าจัดการคอมเมนต์ที่มาจาก Facebook Social Plugin [WordPress]

(16/6/11) How to นี้ใช้กับระบบ Facebook Comment แบบใหม่ไม่ได้แล้วนะฮับ
เข้าไปดูรายละเอียดระบบคอมเมนต์แบบใหม่ได้ที่นี่โลด
[Social Plugins] เชื่อมเว็บเรากับ Facebook ด้วยระบบ Comments ใหม่สุดเมพ!
เอนทรี่นี้มีเชื่อมโยงกับเรื่องก่อนหน้านิดหน่อยนะคะ ว่าด้วยเรื่องของ
ทำไมเดี๋ยวนี้ ใครๆ ก็ต้องพูดถึง Social Network?
เชื่อมต่อเว็บไซต์ของเราเข้ากับ Facebook ด้วย Open Graph Protocol และ Social Plugin
สนใจก็ไปอ่านย้อนหลังกันได้ค่ะ ^^

อย่างที่บอกไปข้างต้นว่ามีสองเรื่องที่ (เกือบเหมือน) จะเป็นเกริ่นๆ นำของคำถามที่ว่าทำไมต้องเอาเว็บเราไปผูกติดกับ Facebook อ่ะเนอะ
เพราะว่า Facebook ในตอนนี้กำลังเป็นที่นิยม และถ้ามีข้อมูลเนื้อหาสาระอะไรซักอย่างที่ดีๆ และเจ๋งพอ ก็จะถูกบอกผ่านเพื่อนต่อเพื่อนไปเรื่อยๆ
ทำให้เว็บของเราเป็นที่รู้จักมากขึ้นนั่นเอง ^^

ในแง่ของนักการตลาด อาจจะใช้ Facebook ในส่วนของแฟนเพจ หรือ Pages เพื่อทำหน้าที่คล้ายๆ เป็น Customer Care ทำการตลาด จัดแคมเปญ พูดคุยกับลูกค้า เพื่อให้ลูกค้ารู้สึกดีต่อผลิตภัณฑ์ตัวเอง หรือใช้ Facebook Pages โปรโมตเว็บไซต์ของตัวเองก็มี

แต่ในเชิงของเทคนิคนั้นก็มีหลายวิธีเหมือนกันที่ Facebook ได้คิดระบบขึ้นเพื่อให้ผู้ใช้สามารถเชื่อมต่อเว็บ (หรืออะไรต่อมิอะไร) กับ Facebook ซึ่งก็คือ Open Graph Protocol และ Social Plugin นี่แล og นี่ได้พูดไปแล้ว ส่วน Social Plugin ถ้าสนใจสามารถเข้าไปดูฟีเจอร์ทั้งหมดได้ที่นี่ค่ะ developers.facebook.com/plugins

และหนึ่งใน Social Plugin ที่จะพูดถึงวันนี้ก็คือ Comments นั่นเอง ใครสนใจก็เข้าไปเอาโค้ดมาติดได้จากตรงนี้ค่ะ Facebook Comments หรือถ้าใครที่ใช้ WordPress ก็ใช้ปลั๊กอินตัวนี้ได้ค่ะ Facebook Comments for WordPress

ทั้งสองแบบข้างบนนี้ใช้ในกรณีที่ไม่ได้ต้องการทำหน้าจัดการคอมเมนต์อะไรนะคะ ถ้าใครที่อยากลง Facebook Comment แล้วมีหน้า Comment Dashboard ด้วย ก็อาจจะเพิ่มขั้นตอนขึ้นมาอีกนิดหน่อย :D ตามนี้ค่ะ

  1. สร้าง Application ขึ้นมา ตั้งชื่อเป็น App เว็บไซต์เราอะไรก็ว่าไป
  2. ในเว็บไซต์ส่วน header

    ให้ไปแก้บรรทัดที่มี แล้วเติม xmlns:fb=”http://www.facebook.com/2008/fbml” ลงไปนะคะ จากนั้นให้ใส่ Open Graph Metadata ตามนี้

    1
    2
    3
    4
    5
    6
    
    <meta property="og:title" content="หัวข้อ"/>
    	<meta property="og:type" content="ประเภท"/>
    	<meta property="og:site_name" content="ชื่อเว็บไซต์"/>
    	<meta property="og:url" content="ลิงก์"/>
    	<meta property="og:image" content="ภาพ thumbnail ที่จะขึ้นใน Facebook"/>
    	<meta property="fb:app_id" content="ใส่ App id ที่เราสมัครไว้ในข้อแรก"/>

    จุดสำคัญก็คือ fb:app_id ต้องใส่ ไม่งั้นเวลาคนกด like แต่ละ url มันจะแสดงเป็น Page ขึ้นใน Facebook ค่ะ (ถ้าใส่ app_id มันจะมองเป็น application page ซึ่งแอดมินที่เราตั้งค่าไว้เท่านั้นจะสามารถดูได้)
    ตรงนี้ถ้าจะใส่ metadata ตัวอื่นเพิ่มอีกก็ได้นะคะ ^^

  3. ในส่วน comment.php ใช้โค้ดตามนี้ค่ะ
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId  : 'App Id ของเรา',
          status : true, // check login status
          cookie : true, // enable cookies to allow the server to access the session
          xfbml  : true  // parse XFBML
        });
      };
     
      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
     
    <fb:comments width="ความกว้างของกล่องคอมเมนต์"></fb:comments>
  4. ทำหน้าจัดการคอมเมนต์ด้วยการสร้างหน้าเพจขึ้นมาหนึ่งเพจ แล้วโหลดโค้ดนี้มาค่ะ

    ที่ต้องแก้ก็จะมี

    4
    5
    6
    7
    
    <?php
    	$fb_app_id = 'app id ของเรา';
    	$fb_secret = 'Application Secret ดูจากใน App เรา';
    	$fb_admin_uid = 'uid ของ Admin (หาได้จากลิงก์ profile pictures ของเรา จะมีตัวเลข uid อยู่)';

    และ

    25
    26
    27
    28
    29
    30
    31
    32
    33
    
    // Application ID# - enter your application ID# (Not API Key!) //
    var appid = 'app id ของเรา';
     
    // Admin ID# - enter your admin ID# (facebook profile id# in numbers, not a name id) //
    var adminid = 'uid ของ Admin (หาได้จากลิงก์ profile pictures ของเรา จะมีตัวเลข uid อยู่)';
     
     
    // PHP support - ตรงนี้ถ้า Server ไม่ Support php ก็ใส่ false ไปนะคะ //
    var phpsupport = 'true';

    เสร็จแล้วก็ Save เป็นไฟล์ .php ถ้าไม่ผิดพลาดอะไร จะได้หน้าตาที่เช็กคอมเมนต์แบบนี้ค่ะ

  5. ถ้าเป็น WordPress ถ้าต้องการเช็กคอมเมนต์จาก Dashboard ให้เพิ่มโค้ดตัวนี้ลงใน functions.php ค่ะ
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
        add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
     
        function my_custom_dashboard_widgets() {
        global $wp_meta_boxes;
     
        wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
        }
     
        function custom_dashboard_help() {
        echo '<iframe src="url ของหน้าเช็กคอมเมนต์" width=100%; height=ความสูง; ></iframe>';
        }

    (อันนี้แต่ก่อนจะมีปลั๊กอินให้ใช้ แต่ตอนนี้ปลั๊กอินไม่มีให้โหลดแล้วค่ะ ไม่รู้ทำไมเหมือนกัน T^T)

  6. เสร็จแล้วค่า ヽ(^▽^)ノ ถ้าไม่มีอะไรผิดพลาดก็จะได้ widget อยู่ที่ dashboard ที่สามารถเช็ก Facebook Comment ล่าสุดได้ และเช็กได้ว่ามาจากที่ไหนค่ะ

    (รูปเดิมเด๊ะเลย แฮ่ๆ)

Note:

  • อันนี้จะไม่มี notification เตือนว่ามีคอมเมนต์ใหม่นะคะ ต้องเช็กเอาเองค่ะ
  • โค้ดนี้ไม่ได้คิดเองนะคะ ต้องขอขอบคุณ Gil Goldshlager แห่ง Developer Forum มากๆ If you visit my blog unexpectedly, I want to thanks a lot for your kindness help :D
  • โค้ด Dashboard Widget เอามาจากที่นี่ค่ะ wpbeginner
  • ถ้าใครลองโค้ดแล้วติดขัดตรงไหน ถามได้นะคะ ตอบได้จะตอบ ตอบไม่ได้จะวิ่งหนีค่ะ ^^’
  • ถ้าใครพัฒนาหน้าจัดการ Facebook Comment ให้ดีขึ้นกว่านี้ได้อีกและอยากจะแชร์ผ่าน Faceblog ก็ยินดีนะคะ ขอบคุณล่วงหน้าเลยค่ะ ^^
อ่านเรื่องที่เกี่ยวข้อง
Share.

About Author

I come from B612 star, nerd, greedy, moody, lazy, Facebook Development, social Networking. almost Blog in Thai but English OK. ^^