การแก้ไขปัญหาเมื่อนำลิงก์จากเวิร์ดเพรส (WordPress) ไปใส่ในเฟสบุ๊ค (Facebook) แล้วแสดงผลไม่ถูกต้อง

Error Link ที่ส่งใน facebook
Error Link ที่ส่งใน facebook

เมื่อเรานำลิงก์จากเวบไซต์ของเราไปแชร์ในในเฟสบุ๊คแล้วปรากฏผล Error ขึ้น เช่น รูปของเวบเราไม่แสดง หัวข้อ (Title) หรือคำบรรยาย (Description) ผิด เราสามารถทำการแก้ไขได้โดยให้เราไปที่ไฟล์ header.php ของเราแล้วใส่โค๊ดดังต่อไปนี้เพิ่มเข้าไปในส่วนของหัวของเวบไซต์ (Head Tag)

%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1%e0%b8%b9%e0%b8%a5%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b8%95%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b9%83%e0%b8%aa%e0%b9%88%e0%b9%83%e0%b8%99-head-tag
ข้อมูลที่ต้องใส่ใน Head Tag

หลังจากนั้นให้เราไปที่เวบสำหรับผู้พัฒนาของเฟสบุ๊ค (facebook for developers) โดยให้ไปที่ลิงก์ https://developers.facebook.com/tools/debug/ เพื่อทำการตรวจสอบข้อมูลของเวบไซต์เรา ให้เราใส่ URL ของเราลงไปในช่อง Sharing Debugger แล้วทำการกดปุ่มแก้ไขจุดบกพร่อง

Facebook Developer
Facebook Developer

หากเราไม่ได้ทำการใส่ข้อมูลใน Head Tag จะปรากฏแสดงคำเตือนว่าให้เราแก้ไขเกี่ยวกับ Inferred Property เพื่อให้เราเติมข้อความข้างต้น

Error ที่เกิดขึ้น
Error ที่เกิดขึ้น

แต่หากเราได้ใส่ข้อมูลในส่วนนี้แล้วจะปรากฏหน้าตาดังรูป ถึงตรงนี้หากเรานำลิงก์ของเราไปใส่ในเฟสบุ๊คก็จะยังไม่แสดงผลให้เราเหมือนเดิม เพราะเฟสบุ๊คยังไม่เข้ามาเก็บข้อมูลที่เปลี่ยนไปของเรา ให้ทำการกดปุ่ม Scrape Again เพื่อให้เฟสบุ๊ค (Facebook) ทำการเก็บข้อมูลเราใหม่อีกครั้งหนึ่ง เมื่อถึงตรงนี้แล้ว ทุกครั้งที่เราส่งลิงก์ไปให้เพื่อนก็จะปรากฏข้อมูลที่เราได้ใส่ไว้อย่างครบถ้วน

Facebook แสดงผลอย่างถูกต้อง
Facebook แสดงผลอย่างถูกต้อง

อย่างไรก็ตาม การแสดงผลในเฟสบุ๊คนั้นจะแสดงเฉพาะเนื้อหาลิงก์หน้าแรกเท่านั้น หากต้องการที่จะให้แสดงแต่ละหน้าไม่เหมือนกัน เช่น เมื่อเราแชร์ลิงก์บทความแต่ละบทความก็ให้แสดงรูปภาพ หัวข้อ และเนื้อหาของบทความนั้นเราก็สามารถทำได้เช่นเดียวกัน แต่จะต้องทำการเพิ่มฟังก์ชั่นเข้าไปใน functions.php

ให้เราสร้างฟังก์ชั่นขึ้นมา 2 ฟังก์ชั่น ฟังก์ชั่นแรกเป็นฟังก์ชั่นที่จะแจ้งให้กับเวิร์ดเพรส (WordPress) รู้ว่า ยังมี HTML Tag บางตัวที่อยู่ในฟังก์ชั่นจะต้องเรียกไปใช้งาน ฟังก์ชั่นนี้จะถูกเพิ่มเข้าไป language_attributes

<?php
function doctype_opengraph($output) {
    return $output . '
    xmlns:og="http://opengraphprotocol.org/schema/"
    xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');
?>

ฟังก์ชั่นที่ 2 จะเป็นการระบุเงื่อนไข (Conditional Tag) โดยให้แสดงรูปหลัก (Featured Image) หัวข้อ (Title) และเนื้อหา (Excerpt) ของบทความนั้นๆ หากนำลิงก์ของบทความนั้นไปแชร์ต่อ แต่ในกรณีที่ไม่มีรูปของบทความหรือเนื้อหา (Excerpt) ผลลัพธ์ที่ได้จากฟังก์ชั่นนี้จะแสดงรูปที่อยู่ในโฟลเดอร์ที่เรากำหนดไว้ และแสดงคำบรรยายของเวบหลักตามลำดับ (รูปถูกกำหนดให้อยู่ในโฟลเดอร์ images) ฟังก์ชั่นนี้จะถูกฮุค (Hook) ด้วยคำสั่ง add_action ที่ wp_head เพื่อให้ใส่ข้อมูลทั้งหมดนี้ในส่วนหัว (Head Tag)

/* Facebook Opengraph */
function fb_opengraph() {
    global $post;
     if(is_single() || is_product()) {
        if(has_post_thumbnail($post->ID)) {
            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium_large');
        } else {
            $img_src = get_template_directory_uri() . '/assets/images/opengraph_image.jpg';
        }
        if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
        } else {
            $excerpt = get_bloginfo('description');
        }
        ?>
    <meta property="og:title" content="<?php echo the_title(); ?>"/>
    <meta property="og:description" content="<?php echo $excerpt; ?>"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="<?php echo the_permalink(); ?>"/>
    <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
    <meta property="og:image" content="<?php echo $img_src[0]; ?>"/>
 <?php
    } else { 
        $img_src = get_template_directory_uri() . '/assets/images/opengraph_image.jpg';
        $title   = get_bloginfo('name');
        $excerpt = get_bloginfo('description');
        ?>
    <meta property="og:title" content="<?php echo $title; ?>" />
    <meta property="og:description" content="<?php echo $excerpt; ?>" />
    <meta property="og:image" content="<?php echo $img_src; ?>" />
    <meta property="og:url"content="https://themevilles.com" />
   <?php }
}
add_action('wp_head', 'fb_opengraph', 5);

หมายเหตุ ฟังก์ชั่นนี้ในส่วนของการเรียกรูปจากโฟลเดอร์ หากเราใช้ Child Theme ให้เราใช้ฟังก์ชั่น get_style_directory_uri() และถ้าเป็น Parent theme ให้ใช้ฟังก์ชั่น get_template_directory_uri() แทน

เพียงแค่นี้เราก็สามารถแชร์ลิงก์ที่มีความแตกต่างกันได้แล้วครับ หวังว่าคงจะไม่ยากเกินไปนะครับ