วันก่อน เห็นแว๊บๆใน Facebook มีคนถามหาวิธีเอา Fanpage Like Box ไปไว้ใน Instant Article วันนี้ไปลองหาคำตอบมาแล้ว เลยได้ไอเดียเพิ่มเติมมาแบ่งกันครับ

จริงๆแล้วในตัว Instant Article นั้น จะมีปุ่ม Like ให้สำหรับคนที่ยังไม่ได้กดไลค์เพจเราอยู่แล้ว ที่ตำแหน่งบนขวาของ Header ตามรูปภาพด้านล่าง

 

ซึ่งปุ่ม Like นี้จะหายไปก็ต่อเมื่อผู้อ่านคนนั้นได้กดไลค์แฟนเพจเราไปแล้ว แต่ทีนี้ ถ้าบังเอิญว่า เราอยากให้มีชื่อแฟนเพจหรือ Like Box ของเพจเราขึ้นอยู่ตลอดหละ จะทำยังไงได้บ้าง..?

ผมเลยไปดั้นด้นอ่าน Document ของ Facebook Instant Article ตามลิ้งก์นี้ : https://developers.facebook.com สรุปเจอวิธีที่น่าสนใจ ซึ่งถามว่าผิดกฏของ Facebook มั้ย ก็ไม่น่าจะนะ เพราะอะไร เดี๋ยวมาวิธีทำกันก่อนดีกว่า

ก่อนอื่น ให้เข้าใจตรงกันก่อนว่า ผมยังไม่ได้หาว่า วิธีนี้มันมีแบบเป็น WordPress Plugin ขึ้นให้ Auto เลยมั้ย วิธีนี้เลยจะต้องทำแบบ Manual ทุกครั้ง

อีกเรื่องคือ วิธีนี้ ใช้ได้เหมือนกันหมด ไม่ว่าจะเป็นเว็บไซต์ที่ทำด้วยเฟรมเวิร์คอะไรก็ตาม WordPress , Joomla หรือแม้กระทั่งเว็บไซต์ทำเอง เพราะที่เราจะทำ มันอยู่ที่ Facebook ไม่ได้อยู่ที่เว็บไซต์ แต่วิธีทำ ผมจะเขียนอิงจากการทำด้วย WordPress ซึ่งถ้าใครทำด้วยอย่างอื่น ให้ข้ามไปข้อ 2 เลย

1.เริ่มแรก ให้เขียนบทความใน WordPress ตามปกติ แล้วก็กด Publish

2.ไปที่ https://developers.facebook.com/docs/plugins/page-plugin แล้วตั้งค่าต่างๆให้เรียบร้อย โดยที่

  • Facebook Page URL : ให้ใส่ URL ของเพจเรา
  • Tabs : ให้เลือกเอาว่า เวลาคนกด จะไปโผล่ที่แท็บไหนของเพจ (เอาเป็น timeline ก็ได้)
  • Width : อันนี้เว้นไว้ครับ
  • Height : อันนี้คือความสูงของกล่อง ผมเซ็ตไว้ที่ 214 pixel จะกำลังพอดี เลือกเอาตามใจ
  • Use Small Header : ถ้าเลือกข้อนี้ ส่วน Cover ของกล่องด้านบนจะเล็ก
  • Hide Cover Photo : ถ้าเลือกข้อนี้ จะไม่แสดง Cover ของกล่องด้านบน
  • Adapt to plugin container width : ถ้าเลือกอันนี้ มันจะกำหนดความกว้างให้เท่ากับหน้าจอโดยอัติโนมัติ (เลือกไว้)
  • Show Friend’s Faces : ถ้าเลือกข้อนี้ จะโชว์รูปเพื่อนของผู้อ่าน ที่กดไลค์เพจนี้แล้ว

ลองเลือกๆเล่นๆแต่งๆเอาเลยครับ เราจะเห็นกล่องตัวอย่างเปลี่ยนไปตามที่เราตั้งค่า (กล่องตัวอย่างอยู่ด้านล่าง)

3.หลังจากนั้นก็กด Get Code จะปรากฏหน้าต่างเล็กๆขึ้นมา ให้เลือกที่แท็บ IFrame

4.ตรง Step 1 : ให้เลือกชื่อแอพฯของคุณ ซึ่งก็คือ ชื่อเพจ – Instant Article เช่นเพจผมชื่อ ‘บล็อกของปอ’ ก็เป็น ‘บล็อกของปอ – Instant Articles’

5.เสร็จแล้วก็ก้อปปี้โค้ดใน Step 2 ตั้งแต่คำว่า <iframe>… จนสุดคำว่า </iframe> ซึ่งก็คือทั้งหมดนั่นแหละ โดยก้อปปี้ไปไว้ที่ไหนก่อนก็ได้ notepad ก็ได้

6.เช็คดูที่ Facebook Page ของเรา ในส่วนของ Instant Article หรือเข้าไปที่ Page ของเรา -> Setting -> Instant Article -> Production Articles และดูรายชื่อบทความที่เราต้องการเพิ่ม

7.กดแก้ไขบทความนั้นๆ โดยคลิ๊กที่รูปดินสอด้านขวา จะปรากฏหน้าต่างที่มีโค้ดเต็มไปหมดแบบนี้

8.ตรงนี้คือแท็ก html ให้มองหา </p> ตรงไหนก็ได้ มันมีหลายที่ ก็แล้วแต่เราว่าอยากเอาไว้ตรงไหน ให้เล็งไว้ แล้วพิมพ์ <figure class=“op-interactive”></figure> หลังแท็ก </p> ที่เราเลือก  แบบในรูปตัวอย่างด้านล่าง บรรทัดที่ 44

9. เสร็จแล้วให้เอาโค้ดที่เราก้อปในข้อ 5 มาใส่ในแท็ก <figure class=”op-interactive”>ในข้อ 8 ก็จะได้ตามรูปด้านล่าง

10. กด Save แล้วก็พรีวิวดูได้เลย อย่างของผมก็จะขึ้นแบบนี้

ลองทำดูครับ ไม่ยาก สำหรับคนที่ไม่ใช่โปรแกรมเมอร์หรือไม่คุ้นเคยกับโค้ด HTML อาจจะงงๆเล็กน้อย แต่ถ้าทำตามทีละขั้น รับรองไม่หลงครับ

ส่วนถามว่าผิดกฏ Facebook มั้ย ผมว่าไม่ผิดนะ เพราะในคู่มือของ Facebook เองได้บอกว่า

‘You can embed Facebook content within your Instant Article by inserting the Facebook embed code inside of an <iframe> and wrapping it with a <figure> element with the op-interactive class attached.’

‘คุณสามารถฝังเนื้อหาของ Facebook ใน Instant Article ได้โดยการ..’ ซึ่งผมมองว่า ไอ้กล่อง Facebook Page Like Box เนี่ย ก็เป็น Facebook Content เหมือนกัน ดังนั้น ไม่น่าจะผิดกฏอะไร

ลองทำดูครับ ถ้าทำไม่ได้ก็ฝากคำถามไว้ได้เลย