[WordPress][Howto] เชื่อม Facebook เข้ากับเว็บไซต์ด้วย “Open Graph Tag”

จริงๆ เคยเขียนเรื่องนี้ไปเมื่อน้านนานมาแล้ว (เชื่อมต่อเว็บไซต์ของเราเข้ากับ Facebook ด้วย Open Graph Protocol และ Social Plugin) แต่ไหนๆ ก็มีต้นฉบับที่เขียนฮาวทูละเอียดยิบว่าด้วยการใส่ Open Graph Tag ให้กับเว็บไซต์ของเรา ก็จะขอเขียนถึงเรื่องนี้อีกครั้งนึงละกันเนอะ (จริงๆ CMS ตัวอื่นที่ไม่ใช่ WordPress ก็น่าจะใช้ฮาวทูนี้ได้เหมือนกันนะคะ โค้ดไม่น่าจะต่างกันมาก ^^)

ก่อนจะเข้าสู่ Howto อย่างละเอียด ก็ขอเกริ่นที่มาสักนิดว่าเราจะใส่ Open Graph Tag กันไปทำไมหรือ? ความเห็นส่วนตัวคิดว่า OG Tag นี่ก็เป็นเรื่องที่ละม้ายคล้ายคลึงกับการใส่ Meta Tag, Alt บน Picture สำหรับชาว SEO อยู่เหมือนกันนะคะ :D (ใครอ่านแล้วงงๆ แนะนำให้ไปอ่านบล็อกความรู้เรื่อง SEO ได้ ที่นี่ ฮับ) เพียงแต่ผลของ SEO จะทำให้มีคนค้นหาเว็บเราเจอได้ง่ายขึ้นอะไรประมาณนี้ใช่ม้า ส่วนการใส่ OG Tag นี่ ก็เพื่อให้ลิงก์ของเราไปขึ้นใน Facebook อย่างมีชั้นเชิงขึ้น เมื่อใส่ เวลามีใครกด Like หรือ Share ลิงก์ของเราขึ้น Feed ตัวลิงก์ของเราก็จะมีข้อมูลแบบย่อๆ ให้น่าสนใจเข้ามากดอ่านรายละเอียดมากขึ้น และถ้า Content ของเราน่าสนใจหรือดูดีมีประโยชน์ ก็จะมีคนบอกต่อๆ กันไปเรื่อยๆ ผ่านการกด Like, Share และอื่นๆ (เช่นคอมเมนต์ผ่าน Facebook Social Plugin) ซึ่งก็ถือว่าทำให้เกิดการกระจายต่อของ Content แบบ Viral ได้เหมือนกันนะ ^^

ยกตัวอย่างการกด Like เว็บไซต์ที่ใส่ Opengraph Tag แล้ว มันจะมาขึ้นใน Feed เราสวยงามแบบนี้ ผลดีของ Feed แบบที่มีทั้งภาพและรายละเอียดย่อๆ แบบนี้ จะทำให้มีคนสนใจอ่านรายละเอียดเพิ่มเติมมากขึ้น และดูเป็นลิงก์ที่มีสีสันกว่าการทำลิงก์แห้งๆ ไม่มีภาพย่อ ไม่มีคำโปรยชวนเชื่อให้เข้าไปอ่านเพิ่มเติมไรงี้ ^^

ต่อไปเป็นตัวอย่างของการ Share ลิงก์เว็บไซต์ที่ไม่ได้ใส่ Opengraph Tag ผลก็จะเป็นแบบนี้ฮับ….

อา.. (ทำหน้าไม่รู้ไม่ชี้) กลับมาที่ How to ของเรากันค่ะ จะใส่ Opengraph Tag ลงใน WordPress ไม่ยากจ้ะ ทำตามนี้โลดดดดดดด

สิ่งที่เราต้องการก็คือ “Application ID” ค่ะ ถ้าใครที่เคยสร้าง App มาบ้าง และมี App ID ที่ยังไม่ได้เอามาใช้ทำอะไร ก็เก็บเลข App ID ไว้ แล้วข้ามไปข้อ 2 โลด

ส่วนใครที่ยังไม่เคยสร้าง App ใดๆ มาก่อน ทำตามนี้ค่ะ

1. เข้าหน้า Facebook › Developer’s Page
2. คลิกปุ่ม “Set up a new app” ตรงมุมขวาบน
3. สร้าง App › กด Agree Facebook Terms › กด Create App
   
4. ไปที่แท็บ Website (หาจากแถบด้านซ้าย) แล้วก็ใส่ Site URL กับ Site Domain ของเราลงไป
5. ในส่วนที่ให้ใส่ Site URL กับ Site Domain นี่ ก็จะมีค่า App ID โชว์อยู่ด้วยค่ะ ให้เราก๊อป App ID เก็บไว้ จากนั้นก็กด Save Changes โลดดดด
   

ขั้นนี้เราจะเริ่มกลับมาที่ WordPress กันแล้วค่ะ :D

1. หาตีม header.php ในตีมของเรา ตรงนี้ถ้าไงก็ backup ข้อมูลเดิมไว้ก่อนกันเหนียว เผื่อแก้ไขอะไรผิดจะได้มีไฟล์เก่าไว้อุ่นใจฮับ
2. มองหาโค้ดที่ขึ้นต้นด้วย html xmlns=”http://www.w3.org/… ประมาณนี้ค่ะ (โค้ดเต็มๆ ก็จะเป็นแบบในกล่องด้านล่างนี้)

   >

   ถ้าเจอแล้วก็แทนที่ด้วยโค้ดบรรทัดด้านล่างนี้ค่ะ

แล้วก็ไปต่อ Step 3 กันเลยฮับ!!

ยังอยู่ที่ header.php นะคะ ให้ก๊อปโค้ดด้านล่างไปใส่หลังแท็ก head ค่ะ

โค้ดก้อนบนนี้มีบางค่าที่ต้องใส่เพิ่ม ดูตามด้านล่างเลยนะคะ

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

ถ้าเราไม่ได้ใช้ Post Thumbnails ในตีมเราเลย ให้ลองแก้โค้ดบรรทัดที่ 12 ตามโค้ดข้างล่างเลยค่ะ แต่ว่าในแต่ละ Post ที่เราเขียน จะต้องมีรูปภาพ 1 รูปที่มีชื่อว่า default.jpg นะคะ (หรือจะเปลี่ยนเป็นชื่ออื่นก็ได้ ตามสะดวก) เพราะว่าระบบจะหาไฟล์ที่มีชื่อดังกล่าวไปแสดงเป็นภาพตัวอย่างแทน Post Thumbnails (ที่เราไม่มี) ฮับ

เสร็จแล้วให้ไปเพิ่มโค้ดด้านล่างใน functions.php ค่ะ

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('//i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img){
			//Defines a default image
			$first_img = "/images/default.jpg";
		}
	return $first_img;
}

ก็เป็นอันจบเรื่องการใส่ Opengraph Tag ค่ะ ใครที่ใส่ Tag ลงในเว็บไซต์แล้วอยากทดสอบว่าโค้ดใช้ได้หรือเปล่า ให้เข้าไปทดสอบได้ที่ลิงก์นี้นะคะ

http://developers.facebook.com/tools/lint

ใน Part นี้ก็ขอจบเพียงเท่านี้ หวังว่าคงจะเป็นประโยชน์บ้างไม่มากก็น้อยนะคะ :D (จบได้เหมือนสรุปรายงานเปี๊ยบ ฮ่าๆ)