Categories
HTML & CSS

วิธีติด FB Comments ใน WordPress


Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Facebook เป็น Social Network ขนาดใหญ่ มีบริการต่างๆมากมายทั้งฝั่งของ Users และ Developers มีอีกหนึ่งบริการที่น่าสนใจก็คือ FB Comments ที่จะช่วยเก็บ Comments ใน blog ของเรา ทำให้ไม่เปลืองเนื้อที่ และ ทราฟฟิค วันนี้จะมาแนะนำการติด Code FB Comments ครับ

เริ่มกันเลย

ถ้ายังไม่มี AppID ก็ต้องไปขอใช้ก่อนนะครับ คลิกไปที่ https://developers.facebook.com/

กดที่ Apps จะมีเมนูลงมา ก็เลือก Create a NewApp

fb-comment1

 

จะขึ้นหน้าจอให้กรอกข้อมูล

fb-comment2

แล้วก็จะมีหน้าต่าง Security Check ขึ้นมาให้กรอก captcha กรอกเสร็จแล้วกด Submit โล้ดด..

fb-comment3

เสร็จแล้วมันก็จะเด้งมาอยู่ที่หน้า Dashboard ของแอพที่เราสร้าง หมายความว่า สร้างเสร็จแล้ว เย้ๆๆ

จะเห็นได้ว่าใต้ชื่อ App เรานั้นไซ้ เขียนว่า “This app is on development mode” ถ้าขึ้นแบบแสดงว่า ยังเอาไปใช้จริงไม่ได้ยังไงล่ะ ต้องทำไงกันนะ….กดที่ เมนู Settings

fb-comment4

กดเข้ามาแล้วก็จะเจอหน้าตาแบบนี้ กรอก email ที่สามารถติดต่อได้ ของเรา แล้วก็ save changes โล้ด…

fb-comment5

เสร็จแล้ว ก็จะเห็นข้อมูลอัพเดทเรียบร้อย ให้คลิกที่เมนู Status & Review

ใต้ชื่อ App ของเรา จะมีคำถามประมาณว่า คุณต้องการจะทำแอพของคุณให้เป็นสาธาณะหรือไม่ ให้กดตรง NO ครับ มันจะเลื่อนกลายเป็น Yes

fb-comment6

ถามอีกครั้งเพื่อความแน่ใจ กด Confirm โล้ด….

fb-comment7

ตรงปุ่มเลื่อน จะเลื่อนจาก NO เป็น YES เป็นอันว่าเรียบร้อย !!

 

fb-comment8

แหม่!! ยืดยื้อซะยาวเชียว เกือบจะแบ่งเป็น 2 blog ซะแล้ว 555

 

 

 

ไปหา Code Facebook Comment กัน

หาไม่ยากครับ มันก็อยู่ใน Facebook Developer แหละ https://developers.facebook.com/docs/plugins/comments

จะมีช่องให้กรอกข้อมูล พร้อม แสดงตัวอย่างให้ดูด้วย

fb-comment9

Url to comment on ไม่ต้องไปเปลี่ยนครับ ยังไงเราก็ต้องแก้ตอนเอาไปใส่ WP อยู่แล้ว

Width ความกว้างของกล่อง comment อันนี้ใส่ตามความเหมาะสมได้เลยครับ

Number of Posts จำนวน Posts ที่จะให้แสดง ค่า default ให้มาเป็น 5 (ในภาพผมใส่ 2 ให้มันแคปรูปได้)

Color Scheme เป็น รูปแบบสี มี light กับ dark ลองเลือกดูครับ ว่าชอบแบบไหน

ปรับแต่งเสร็จแล้ว กด Get Code จะได้หน้าจอแบบนี้

fb-comment10

สีน้ำเงิน คือ App ที่เราจะนำมาใช้ (ก็ App ที่เราพึ่งสมัครเมื่อกี้แหละ) ระบบจะ gen code ให้

สีเขียว คือ Code ที่ต้องเอาไปใส่ที่บนสุดต่อจาก tag <body>

สีแดง คือ ส่วนที่จะแสดง comment box อยาไปไปโผล่ตรงไหน ก็เอาไปใส่ตรงนั้น

 

 

ได้โค้ดมาแล้วเอาไปใส่ตรงไหนมั่ง ?

เอ้าบอกไปแล้วนี่ เอาไปใส่ตรงไหนมั่ง เอ้ย…ไม่ใช่ ต้องบอกให้ละเอียดกว่านี้ดิ เอาไปใช้ กับ WP ไม่ใช่หรอ

เอาล่ะๆ จะเข้าไปแก้ Theme ก็ต้องเข้าไป Folder “wp-content/themes” แล้วก็เข้าไป Folder Theme ที่เราใช้อยู่

จะหาที่ใส่โค้ดส่วนแรก ก็คือ บนสุดต่อจาก <body> มันอยู่ไฟล์ไหนกันนะ น่าจะอยู่ที่ ไฟล์ header.php นะครับ ลองเข้าไปดู

หา tag <body> ให้เจอ แล้วก็ใส่ Code ในกรอบ สีเขียวลงไปโล้ด..

แล้วในกรอบสีแดงใส่ตรงไหน

ในกรอบสีแดง ซึ่งเป็นส่วนที่จะแสดงผล comment box เราจะนำไปใส่ในไฟล์ content-single.php ครับ อยู่ใน folder ของ theme นั่นแหละ

ผมจะเอาไปใส่ล่างสุดเลย

เอ๊ะ!! แต่ใส่ไปแล้ว มันยังไม่เป็น Comment ของ blog เรานะ ต้องแก้ Url ก่อน จำได้มั้ย Url to Comment on อ่ะ ที่บอกยังไม่ต้องใส่

ปกติจะเป็นแบบนี้

 

เราจะใช้คำสั่ง

จะเป็นคำสั่งของ WordPress ทำหน้าที่เรียก permalink ของ entry นั้นๆมาแสดง (URL ของ blog เรานั่นแหละ) จะแก้ attribute data-href นะครับ แก้เป็นแบบนี้

เสร็จเรียบร้อย!!

 

หากมีปัญหาในการทำ facebook comment สามารถสอบถาม ได้ในใน blog นี้เลยนะครับ comments ด้านล่างได้เลย

By Mai

ชื่อใหม่ครับ ชอบการพัฒนาเว็บไซต์ ศึกษาหาข้อมูลอยู่เรื่อย มีความรู้หรือเทคนิคอะไรใหม่ๆ ก็จะมาแบ่งปันกันครับ