Началната страница Назад към Блога

Създаване на WordPress плъгин за Facebook Open Graph тагове

Публикувано на 07.05.2017
Създаване на WordPress плъгин за Facebook Open Graph тагове

Въведение

Плъгинът, който ще направим днес, ще се грижи за това споделените връзки от нашия сайт да изглеждат правилно във Facebook.
Това става чрез Open Graph Tags – специални мета тагове, които казват на Facebook как да визуализира заглавието, описанието и изображението при споделяне.

Чрез нашия плъгин тази процедура ще се извършва автоматично. При всяка публикация, страница или продукт ще се взимат нейното заглавие, адрес, описание и изображение.

Facebook Crawler

Без Open Graph тагове Facebook роботът сканира страницата и избира каквото намери за подходящо.
С добавянето на тези тагове обаче поемаме контрол и му казваме точно как искаме връзката да изглежда при споделяне.

Подходящ размер на изображенията

Важно е да подберем правилните размери, за да се визуализира снимката коректно:

  • За висока резолюция: 1200 × 630 px

  • За ниска резолюция: 600 × 315 px

  • Минимален размер: 200 × 200 px (под него дебъгерът ще даде грешка и изображението няма да се покаже).

Подготовка

Преди да преминем към кода, трябва да направим обичайните стъпки — да създадем нова директория в wp-content/plugins и файл с име например facebook-og-tags.php.
Ако не си сигурен как става това, можеш да си припомниш от статията „Как да си направим WordPress Plugin“.

Код на плъгина

Копирайте следния код в новия PHP файл:

add_action('wp_head', 'cw_facebook_tags');

function cw_facebook_tags() {

    if (is_single() || is_page() || is_home()) {
        ?>
        <meta property="og:title" content="<?php the_title() ?>" />
        <meta property="og:site_name" content="<?php bloginfo('name') ?>" />
        <meta property="og:url" content="<?php the_permalink() ?>" />

        <meta property="og:description" content="<?php $post = get_post($post); $content = substr($post->post_content, 0, 300);
        echo htmlspecialchars($content, ENT_COMPAT, 'ISO-8859-1', true);
        ?>" />

        <meta property="og:type" content="<?php if (is_home() || is_page()) { echo 'website'; } else { echo 'article'; } ?>" />

        <?php if (has_post_thumbnail()) : $image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large'); ?>
            <meta property="og:image" content="<?php echo $image[0]; ?>"/>
        <?php endif; ?>

        <?php
    }
}

Този код проверява дали текущата страница е пост, страница или началната страница.
След това добавя всички нужни Open Graph тагове — заглавие, линк, тип съдържание, описание и изображение.

Заключение

С това имаме работещ плъгин, който автоматично добавя нужните Facebook Open Graph тагове.
Ако искаш да разшириш функционалността, в моя GitHub профил има по-пълна версия, където можеш ръчно да задаваш og:title и og:description.

Началната страница