ใส่ Facebook Comment ในหน้าสินค้า

วันนี้ตรวจสอบคีย์เวิดของ statpress เห็นมีคนค้นหามาที่เว็บผมด้วยคีย์เวิดใกล้เคียงกัน เลยขอหยิบยกเอามาเขียนสักหน่อย สำหรับมือใหม่หัดแก้ไขเทมเพลทของ ร้านค้าออนไลน์ ระบบ Opencart ซึ่งวิธีการก็ไม่ยากอะไรครับ

สิ่งที่ต้องมี

1.Facebook Account ซึ่งมีกันทุกคนอยู่แล้ว

2.เครื่องมือในการแก้ไข หรือ Text Editor ดีดีสักตัว ผมใช้ EditPlus หรือถ้าใครขี้เกียจโหลดก็ใช้ NotePad ยาสามัญประจำเครื่องแทนก็ได้

เริ่มการแก้ไข

1.ไปที่ url developers ของ Facebook ครับ หรือเข้าตาม url นี้

http://developers.facebook.com/docs/reference/plugins/comments/

เข้าไปแล้วก้อจะเจอหน้าจอดังรูปครับ

Facebook Comment Opencart

Facebook Comment Opencart

Url to Comment on:ก็ใส่ url ของเว็บเราลงไป
Number Of Posts:คือจำนวนของ comment ที่จะแสดงใน 1 หน้าครับ ถ้ามันเยอะมันก็จะแสดง 2 3 4 ไปเรื่อยๆ
Width: ก็คือความกว้างของกล่องคอมเมนท์
Color Scheme:คือรูปแบบสีของกล่องมี 2 แบบคือ Dark กับ Light
จากนั้นกดปุ่ม Get Code ได้เลยครับ ก็จะได้โค้ดคล้ายๆแบบนี้

Facebook Comment Code

Facebook Comment Code

จากโค้ดเราต้องเอามาปรับอีกนิดครับ


ให้แก้เป็น

ดูตรง data-num-post , data-width เราปรับแต่งตามเหมาะสมได้เลยน่ะครับ

ทำไมถึงต้องแก้ data-href?
คำถามนี้คงเกิดขึ้นกับบางท่าน เหตุผลเพราะว่า เราจะแยกคอมเมน์แต่ละสินค้าได้ ถ้าเราไม่แก้ คอมเมนท์มันจะรวมกันครับ

จากนั้นให้เปิดไฟล์เทมเพลทของ ร้านค้าออนไลน์ ของเรา ซึ่งตามพาทด้านล่างนี้(ขึ้นอยู่กับเทมเพลทที่ใช้งานน่ะครับ)
-catalog/view/theme/ธีมที่ใช้งาน/template/product/product.tpl
หาตำแหน่งที่เหมาะๆ แล้วใส่โค้ดลงไปครับ ต้องใส่ลงไปทั้ง 2 ชุดตามที่ facebook สร้างโค้ดมาให้เลยน่ะครับ
ซึ่งส่วนใหญ่ โค้ดชุดแรก จะใส่ลงไปใน footer.tpl ของเทมเพลทที่ใช้งาน ส่วนโค้ดชุดที่ 2 ก็จะใส่ที่หน้าที่เราต้องการจะแสดงคอมเมนท์นั้นๆครับ ปรับ url ตามใจชอบ
ตัวอย่าง ผมอยากเอาไปใช้ที่หน้า ติดต่อเรา ก็ปรับ url ให้เป็น index.php?route=information/contact เป็นต้น

เราสามารถปรับโค้ดให้เหมาะสมตามโครงสร้างของ url ที่เราเขียนได้ตามความเหมาะสมน่ะครับ ไม่จำเพาะเจาะจงว่าเป็นระบบ ร้านค้าออนไลน์ Opencart โค้ด html หรือ php อันอื่นก็ใส่ลงไปได้ครับ

Don't be shellfish...Share on FacebookTweet about this on TwitterShare on Google+Digg thisPin on PinterestShare on Reddit

8 Responses so far.

  1. mellowmay พูดว่า:

    ขอตัวอย่างการใส่ code แบบละเอียดหน่อยค่ะ คือไม่เป็นเรื่องการแก้ code เลยค่ะ

    ไม่เข้าใจว่าต้องเอา code ตัวแรกไปใส่ตรงไหน แล้ว code ตัวที่ 2 ใส่ตรงไหน ใส่ในหน้า design template เดียวกันหรือเปล่าแล้วใส่ยังไงคะ

  2. amdev พูดว่า:

    โค้ดส่วนแรกเอาไปแปะที่ footer.tpl ที่เราใช้งานเทมเพลทนั้นๆครับ เอาไปใส่ก่อน ครับ

    ส่วนโค้ดส่วนที่ 2 เอาไปแปะที่หน่าไหนก็ได้ที่เราต้องการ จากตัวอย่างก็หน้า product.tpl ของเทมเพลทที่เราใช้งานครับ ส่วนตำแหน่งก็ค่อยๆไล่ดูว่าตรงไหนเหมาะสมกับเว็บเราครับ

  3. mellowmay พูดว่า:

    เข้าใจแล้วค่ะ ขอบคุณมากค่ะ

  4. mellowmay พูดว่า:

    แล้ว เราจะเห็นไหมคะถ้ามีคนมา comment สินค้าเราด้วย facebook น่ะค่ะ
    ลองแล้วมันไม่มีการแจ้งเตือนหรืออะไรเลยน่ะค่ะ

  5. amdev พูดว่า:

    แจ้งเตือนครับ
    Facebook Notification

  6. mellowmay พูดว่า:

    ลองล็อค เฟสเพื่อนมาเม้นมันไม่ขึ้นอ่ะค่ะ ทำยังไงดีอ่ะค่ะ
    คือลองเช็คดูแล้วค่ะ มันไม่มี appID ค่ะ
    เราจะหา app id ได้จากที่ไหนคะ

  7. amdev พูดว่า:

    พิมพ์คำว่า Facebook app ในgoogle ครับแล้วกดเข้าไปสร้าง

  8. เม็ดทรายคร๊าฟ พูดว่า:

    ระวังกันหน่อยนะครับ ช่วงนี้พวกมิจฉาชีพหลอกขายของทางเน็ตเต็มบ้านเต็มเมือง โดยใช้บัญชี นายอมร ก้องกังสดาลกุล อย่าได้หลงเชื่อเด็ดขาด มิฉะนั้นคุณจะต้องเสียใจภายหลัง เพราะคุณจะเสียเงินไปฟรีๆ ให้กับพวกมิจฉาชีพพวกนี้อย่างแน่นอน

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *

คุณอาจจะใช้ป้ายกำกับและคุณสมบัติHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>