วิธีผสานรวม Facebook Open Graph กับ WordPress

โปรโตคอล Facebook Open Graph ช่วยให้คุณสามารถแบ่งปันเนื้อหาบล็อกของคุณไม่เพียง แต่กับผู้อ่านของคุณ แต่ยังมีเพื่อน Facebook ของพวกเขาเช่นกัน ส่วนที่ดีที่สุดคือ - เมื่อมีคน ชอบ เนื้อหาของคุณจะถูกเผยแพร่ในโปรไฟล์ Facebook ของพวกเขา แต่นั่นไม่ใช่ทั้งหมด Open Graph ช่วยให้คุณสำรวจวิธีที่น่าสนใจในการโต้ตอบและมีส่วนร่วมกับผู้อ่านของคุณ ท้ายที่สุด - ถ้าสิ่งนี้ถูกต้องแล้วมันจะช่วยเสริมสร้างแบรนด์ของคุณและเพิ่มอัตราการเข้าชมเว็บไซต์ของคุณ.

ในโพสต์ของวันนี้เราจะตรวจสอบ วิธีรวม Facebook Open Graph เข้ากับ WordPress ที่โฮสต์โดยตนเอง ในคู่มือแบบทีละขั้นตอนอย่างละเอียด มันจะต้องแก้ไขธีม WordPress ที่มีอยู่ของคุณและสร้างแอปพลิเคชั่น Facebook (ถ้าคุณยังไม่มี).

พร้อมหรือยัง? เริ่มเบราว์เซอร์และเครื่องมือแก้ไขโค้ดที่คุณโปรดปรานกันเถอะ คำแนะนำแบบเต็มหลังจากกระโดด.

ขั้นตอน 1. สร้างแอพ facebook

เราจะต้องมี ID แอปพลิเคชัน และเพื่อให้ได้คุณจะต้องสร้างแอพ Facebook หากคุณมีแล้วให้ไปที่ขั้นตอนที่ 2.

การสร้างแอปพลิเคชันเป็นเรื่องง่ายนี่คือสิ่งที่คุณทำ:

1. เข้าสู่ระบบไปที่ Facebook ไปที่หน้านักพัฒนาซอฟต์แวร์.
2. คลิก "ตั้งค่าแอพใหม่ปุ่ม "ที่มุมบนขวา.
3. ตั้งชื่อ ในแอปใหม่ของคุณ, ตกลง ไปที่เงื่อนไข Facebook กด สร้างแอป.
4. ไปที่ เว็บไซต์ เติมให้เต็ม URL ไซต์ และ โดเมนไซต์.
5. จดบันทึกค่าของ ID แอปพลิเคชัน ที่ไหนสักแห่งและกดปุ่ม "บันทึกการเปลี่ยนแปลงปุ่ม ".

นั่นคือทั้งหมด! คุณสามารถกลับมาใหม่ได้ในภายหลังเพื่อเติมข้อมูลที่เหลือ.

ขั้นตอนที่ 2 แทนที่ แท็ก

เปิดไฟล์ส่วนหัวของธีมของคุณ (header.php) ในโปรแกรมแก้ไขรายการโปรดของคุณ เก็บสำเนาสำรองเสมอในกรณีที่มีอะไรผิดปกติ.

ค้นหาบรรทัดของรหัสต่อไปนี้หรือบรรทัดที่ขึ้นต้นด้วย >

แทนที่ด้วย:

เปิด header.php ไว้เราจะต้องทำขั้นตอนที่ 3.

ขั้นตอน 3. แทรก OG แท็ก

วางรหัสต่อไปนี้ทันที แท็กหรือก่อน แท็ก.

       "/>          

นี่คือค่าบางส่วนที่คุณจะต้องแก้ไข:

• บรรทัดที่ 3: แทนที่ your_fb_app_id กับ ID แอปพลิเคชัน จากขั้นตอนที่ 1.
• บรรทัดที่ 4: คุณจะได้รับ your_fb_admin_id ใต้หน้า Facebook Insights ของคุณ (ข้อมูลเพิ่มเติม) คลิกที่ "เจาะลึกเว็บไซต์ของคุณปุ่มสีเขียว "คว้าสตริงรหัสทั้งหมดแล้วแทนที่บรรทัด 4.
• บรรทัดที่ 12: บรรทัดนี้กำหนดรูปภาพที่แสดงถึงโพสต์ของคุณ หากธีมของคุณรองรับ WordPress Post Thumbnails ก็น่าจะใช้ได้ดี แต่หากไม่เป็นเช่นนั้นก็จะล้มเหลวอย่างงดงามหากไม่มีภาพ ลองดูขั้นตอน 3a เพื่อหาวิธีแก้ปัญหาอื่น.
• บรรทัดที่ 19: แทนที่ logo.jpg พร้อม URL ไปยังโลโก้บล็อกของคุณ มันจะปรากฏขึ้นเมื่อไม่มีการโพสต์หน้าบล็อกของคุณบน Facebook.

ขั้นตอนที่ 3a - เมื่อ "wp_get_attachment_thumb_url" ล้มเหลว

เมื่อ wp_get_attachment_thumb_url () ล้มเหลวในการทำงานคุณมีแนวโน้มที่จะไปที่แอตทริบิวต์ของเนื้อหาโดยไม่มีค่าเช่นที่แสดงด้านล่าง:

วิธีแก้ปัญหาง่ายๆคือการแทนที่ Line 12 ด้วยรหัสต่อไปนี้:

ถัดไปเปิด functions.php และใส่รหัสต่อไปนี้:

ฟังก์ชัน catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ ตรงกัน); $ first_img = $ ตรงกัน [1] [0]; if (empty ($ first_img)) // กำหนดภาพเริ่มต้น $ first_img = "/images/default.jpg";  ส่งคืน $ first_img; 

รหัสการแทนที่นี้พยายามใช้การเรียกใช้ฟังก์ชัน catch_that_image () เพื่อคว้าและแสดง URL ของภาพแรกที่พบ แทนที่บรรทัดที่ 10 ด้วย URL เป็นรูปภาพเริ่มต้นหากฟังก์ชันไม่สามารถค้นหารูปภาพแรกได้.

ขั้นตอน 4. แทรก Facebook Javascript SDK

Javascript ต่อไปนี้ช่วยให้คุณเข้าถึงคุณลักษณะทั้งหมดของ Graph API และ Dialogs นอกจากนี้ยังช่วยให้คุณสามารถรวมปลั๊กอินโซเชียล Facebook เช่นปุ่ม Like, Facepile, Recommendations และอื่น ๆ ได้อย่างง่ายดาย.

วางไว้ใน header.php, ทันทีหลังจากที่

แทนที่ your_fb_app_id ในบรรทัดที่ 4 ด้วย ID แอปพลิเคชัน จากขั้นตอนที่ 1 ก่อนหน้านี้.

ขั้นตอนที่ 5 ลองทดสอบกัน!

เรากำลังรวม Facebook Open Graph เข้ากับบล็อก WordPress ลองทดสอบสองอย่างเพื่อให้แน่ใจว่าเราทำสิ่งถูกต้องแล้ว.

ทดสอบ # 1 - ดูรหัสต้นฉบับ

ดูซอร์สโค้ดของหนึ่งในบล็อกโพสต์คุณควรมีดังนี้:

ตรวจสอบคุณสมบัติและค่าของมันตรวจสอบให้แน่ใจว่าถูกต้อง.

ทดสอบ # 2 - ติดตั้งกล่องชอบ

หากคุณยังไม่ได้ติดตั้งปุ่มถูกใจของ Facebook แสดงว่าถึงเวลาที่คุณต้องซื้อ วางรหัสต่อไปนี้ไว้ที่ใดก็ได้ (โดยเฉพาะก่อนเนื้อหาหรือหลังเนื้อหา) ด้านใน single.php:

จากนั้นรับเพื่อน ชอบ มัน. คุณควรเห็นสิ่งที่คล้ายกันปรากฏในโปรไฟล์ Facebook ของเขา:

พิเศษ: ปลั๊กอิน WordPress

หากคุณไม่สามารถติดตั้งรหัสหรือต้องการให้ทำอย่างรวดเร็วและง่ายดาย - มีปลั๊กอิน WordPress สำหรับสิ่งนั้น.

Facebook Open Graph Meta ใน WordPress เป็นปลั๊กอิน WordPress ที่เพิ่มข้อมูล Facebook meta เพื่อหลีกเลี่ยงปัญหาภาพขนาดย่อ, ปัญหาชื่อเรื่องผิด, ปัญหาคำอธิบายที่ผิด, ฯลฯ.