Share

หน้าเว็บ

วันเสาร์ที่ 6 สิงหาคม พ.ศ. 2554

Facebook Comment Plugin (แบบใหม่) ใน Blogspot

ไม่ได้เขียนบทความอันใดมาตั้งนาน จะเขียนก็เขียนเป็นช่วงช่วง ไม่สม่ำเสมอ (อย่าไปเล่นมุขว่า เขียนเป็นแพนด้าล่ะ :P อายเขาตาย)
   รอบนี้มาเขียนเพราะหลังจากค้นหาดูแล้ว ไม่ค่อยมีใครเขียนกัน ที่เขาเขียนกัน ผมก็ทำตามไม่เกิดผลสำเร็จ คือเขาอาจจะเขียนดีแล้ว คนอื่นอ่านเข้าใจ แต่ผมมันโง่เอง อ่านไม่รู้เรื่อง ทำตามไม่เป็น
   เลยไปค้นๆของฝรั่งเขา ปรากฏว่าทำตามแล้วสำเร็จ จึงคิดว่าจะแปล(บวกประสบการณ์งงๆของผม) เอามาบอกกล่าวต่อๆกัน



   ร่ายมายาว ลืมบอกกันไปว่า ที่จะเขียนคือ วิธีการเอา Facebook Comment Plugin แบบใหม่ มาใส่ใน Blogspot

แทรกไว้นิด เผื่อใครยังไม่ทราบว่า เจ้า Facebook Comment Plugin นี้คืออะไร ก็คือเป็นการเอากล่อง Comment ของ Facebook มาใส่ในบล็อกของเรา แล้วพอมีใครมาคอมเม้นท์ แสดงความคิดเห็นในกล่องนี้ ก็จะไปปรากฏใน Facebook ของคนๆนั้นด้วย แล้วเจ้ารุ่นใหม่นี้ ก็จะมีลูกเล่นมากขึ้น สมกับเป็นของใหม่ไงละครับ


มาเริ่มกันเลยนะครับ ข้อมูลจากนี้ จะแปลและดัดแปลงมาจาก http://www.ogbongeblog.com/2011/04/new-facebook-comment-form-for.html นะครับ (ถ้าอ่านของผมแล้วงง ก็ไปดูที่ต้นฉบับได้นะครับ) ส่วนภาพ จะทำขึ้นมาใหม่ครับ

1.เริ่มจากไป Verify Facebook Account ของเราก่อน วิธีการคงไม่ลงรายละเอียดนะครับ บอกได้แค่ที่ต้องลงทะเบียนเพื่อรับ Confirmation code ทางโทรศัพท์มือถือ แต่ถ้าใครได้ทำขั้นตอนนี้ไปแล้วก็ข้ามไปได้นะครับ

2.ไปที่ Facebook developer page http://developers.facebook.com/setup/ ก็จะเจอหน้านี้




กรอกข้อมูลลงไปครับ

Site name คือ ชื่อเว็บของเรา
Site URL คือ ก็ตามนั้นนะครับ คือ URL ของเว็บเรา **ในช่องนี้ เว็บต้นฉบับเขาเน้นไว้นะครับว่า ต้องใส่ / เอาไว้หลัง URL นะครับ
Locale อันนี้ ผมเปลี่ยนมาเป็นภาษาไทยครับ



ใส่กันครบก็กดปุ่ม Create app
แล้วจะมาเจอหน้า Security Check ก็ใส่กันไป
จากนั้น จะเจอหน้านี้



กดแท็บ App ที่อยู่ด้านบน
แล้วจะมาที่หน้านี้



จะมีประโยคร้องขออยู่กลางหน้าว่า You need to grant permissions to your app to get an access token. ผมก็ทำตามแต่โดยดี (อันนี้ ฝรั่งไม่ได้เขียนบอกไว้ แต่ผมเชื่อตามที่ facebook ฝรั่งอีกคนขอไว้)
พอเราทำตามที่เขาขอเรียบร้อย ในหน้านี้จะมีข้อมูลที่เราจะต้องใช้ในกาลต่อไป คือ App ID กับ User ID (ในส่วนของ User ID คือเลข Facebook Profile ของเราก่อนที่เราท่านจะเปลี่ยนมาใช้ชื่อ ใช้ตัวอักษรกัน ถ้าเราไม่ได้เข้ามาหน้านี้ ก็หากันได้ในหน้ารูปภาพใน Facebook ซึ่งต้องใช้วิธีพิสดารเล็กน้อยถึงปานกลาง)

แทรกไว้อีกนิดนึง อีกเว็บหนึ่ง คือ http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html ได้เสนอให้เราไปปรับอะไรสักเล็กน้อยเกี่ยวกับ Core setting ของ Site Domain คือให้ใส่ไว้ว่าเป็น blogspot.com (แต่สำหรับผู้ที่เปลี่ยน Domain name กันแล้ว ก็ใส่ตามชื่อที่ได้เปลี่ยนไปนะครับ)


3.พักที่ facebook เอาไว้ก่อน ไปที่ blog ของเรากัน




ไปที่หน้า การออกแบบ ---> Edit HTML (แก้ไข HTML) -----> เลือก Expand Widget Templates (ขยายเทมเพลตวิดเจ็ต)
ก่อนจะทำอะไรต่อจากนี้ เพื่อความไม่ประมาท บันทึกสำเนาของแม่แบบไว้ก่อนนะครับ



จากนั้น ก็ค้นหาคำว่า <body> หรือไม่ก็คำว่า <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
หาเจอแล้วก็เอา Code นี้ไปวางไว้ในบรรทัดต่อจากนั้น โดยใส่ App ID ตรง "เลขแอพไอดีของคุณ"

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=เลขแอพไอดีของคุณ&amp;xfbml=1"></script>

4.ยังไม่เสร็จนะครับ ยังอยู่หน้าเดิม ทีนี้ ค้นหาคำว่า <data:post.body/> แล้วเอา code นี้ไปวางไว้บรรทัดต่อจากนั้น

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://www.dekchildkong.com/'><img alt='' class='icon-action' src='http://2.bp.blogspot.com/_B1aAP3Dld_s/TQMw8AEVE3I/AAAAAAAAAdU/m3jMAe8aMko/s320/commentpix.png'/></a></p>
<fb:comments expr:href='data:post.url' numposts='10' width='500'/>
</b:if>

ใน code นี้ เขาจะให้มีรูปภาพ เพื่อจะกดลิงค์ไปที่เว็บของเขา ผมก็จัดการเปลี่ยนมาที่เว็บของผม อิอิ :) ส่วนคุณๆก็จะให้ไปที่ไหนก็เปลี่ยนกันได้นะครับ รวมทั้งรูปก็เปลี่ยนได้นะครับ และความกว้าง (width) ก็แก้ได้นะครับ



5.เหมือนจะเสร็จ แต่อีกนิดนะครับ จากนี้จะเป็นการทำให้มีการเตือนไปที่หน้า facebook ของเรา เมื่อมีผู้มาคอมเม้นท์
ยังอยู่ที่หน้าเดิมนะครับ คือ การออกแบบ ---> Edit HTML (แก้ไข HTML) -----> เลือก Expand Widget Templates (ขยายเทมเพลตวิดเจ็ต)
ค้นหาคำว่า <b:skin><![CDATA[/ แล้วเอา code นี้ไปวางไว้ที่บรรทัดก่อนหน้า

<meta content='เฟสบุ๊คโปรไฟล์ไอดีของคุณ' property='fb:admins'/>
<meta content='แอปไอดีของคุณ' property='fb:app_id'/>

แล้วก็ไปเพิ่มให้คุณเป็น Moderator ด้วยนะครับ ประเดี๋ยวจะครบถ้วนกระบวนความ
ใส่ code กันจนสิ้น ก็กด save เป็นอันเสร็จแล้วครับ (อันนี้ ฝรั่งไม่ได้บอก แต่ลองคลำเอาเองจนเจอว่าต้องทำครับ)



ปล. ใครเคยใช้ facebook comment แบบเก่ามาก่อน มีคนเคยเขียนไว้ว่า มันอัพเดตได้ แต่อย่าถามผมนะว่าทำไง เพราะผมก็ไม่ทราบ ทราบเพียงแต่ว่า พอทำตามวิธีนี้ แล้วลบอันเก่าออก อันเก่าก็จะหายไปหมดนะครับ
ปล.2 จะจัดการคอมเม้นท์ หรือดูคอมเม้นท์ที่เด้งมาที่ facebook กันได้อย่างไร ก็ดูที่หน้า Profile ของเรา ถ้าไม่เจอก็กดเลือกที่ Notification หรือไม่ก็ไปที่ http://developers.facebook.com/tools/comments นะครับ
ปล.3 คงจะมีเพียงแค่นี้นะครับ ขาดตกบกพร่องหรือควรแก้ไขอย่างไร ก็คอมเม้นท์บอกกันได้นะครับ ผมเองก็ไปดัดแปลงมาจากท่านอื่นเขาเหมือนกัน :)


Twitter Delicious Facebook Digg Stumbleupon Favorites More