Как опубликовать запись с блога в Facebook с картинкой на всю ширину

  Автор:
  11473
Как опубликовать запись с блога в Facebook с картинкой на всю ширину

Вы обратили внимание, что некоторые записи в Facebook и Google+ отображаются с изображением на всю ширину. Такие записи в социальной сети более заметны в ленте, и есть больше шансов, что Ваши друзья кликнут по ссылке и перейдут на Ваш блог.

Внимание! Если Ваш блог создан на шаблоне AB-Inspiration, то Вам нужно просто обновиться до новой версии AB-Inspiration 4.14. В шаблоне уже эта функция включена.

Вообще я решила описывать все, что встраиваю в шаблон AB-Inspiration не просто фактами, что это есть в шаблоне, а как я это сделала. Во-первых это покажет какая работа проделана с шаблоном — это для тех, кто хочет знать немного больше, чем просто пользоваться шаблоном AB-Inspiration, во-вторых мой опыт будет полезен тем, кто настраивает свой блог самостоятельно, не на шаблоне AB-Inspiration, а на любом другом шаблоне для WordPress.

Итак, вернемся к теме «Как опубликовать запись с блога в Facebook с картинкой на всю ширину».

Когда Вы нажимаете кнопку «Поделиться» у Вас всплывает окно в котором сформирован анонс для отправки в Вашу ленту. Анонс состоит из заголовка, нескольких строк текста и изображения.

На скриншоте ниже 2 примера отображения изображения.

1-е маленькое слева,
2-е на всю ширину.

Согласитесь, второй вариант гораздо выгоднее смотрится :).

10629667_729280053785805_2119467799562624558_n

За формирование анонса отвечают специальные метатеги, которые вставляются между тегами head в файле header.php. С помощью метатегов мы как бы связываем блог с социальными сетями.

Давайте заглянем на страницу в HTML коде, где уже установлены метатеги.

Нажмите на изображение, чтобы посмотреть его в большом размере.
meta

Как видите каждая строчка начинается с <meta property=»» content=»»>.

Каждый мета тег отвечает за конкретное содержание.
og:title — за заголовок,
og:description — за описание,
og:image — за изображение,
og:url — за ссылку.

Есть еще нескольо дополнительных метатегов, они не влияют на отображение анонса, но несут определенную нужную информацию об авторе, о типе контента, о языке итд.

В этой статье я не буду расписывать все метатеги, остановимся только на изображении. Если Вам интересно, как правильно оформить все метатеги для кнопок поделиться, напишите в комментариях. Тогда я напишу об этом поподробнее.

За отображение картинки в анонсе отвечает метатег
<meta property=»og:image» content=»http://AdresBloga.ru/adres-izobrazhenia.jpg»>.
Чтобы на место content=»» подставлялось изображение из статьи нам нужно вставить следующий код:

<?php
if(!has_post_thumbnail( $post->ID ))
{
$default_image='http://AdresBloga.ru/adres-izobrazhenia.jpg';
echo '<meta property="og:image" content="' . $default_image . '">';
}
else
{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '">';
}
echo "\n"; ?>

Код нужно вставить в файле header.php между тегами head. (В шаблоне AB-Inspiration он уже вставлен.)

Разберем код по порядку.

Код делиться на 2 условия:
1. если в статье нет миниатюры, то в мета тег прописывается ссылка на изображение по умолчанию

$default_image='http://AdresBloga.ru/adres-izobrazhenia.jpg';
echo '<meta property="og:image" content="' . $default_image . '">';

Здесь в строчке $default_image=’http://AdresBloga.ru/adres-izobrazhenia.jpg’ нужно прописать полный адрес к изображению, которое будет включено в анонс в случае если в статье нет миниатюры. В шаблоне AB-Inspiration мы загружаем изображение по умолчанию в настройках шаблона в разделе вставки.

2. если есть миниатюра, в мета тег прописывается ссылка на миниатюру.

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '">';

Здесь ничего менять не нужно. За размер изображения в анонсе отвечает атрибут ‘full’ в функции wp_get_attachment_image_src ()

Когда Вы загружаете изображение в статью, WordPress автоматически создает копии изображения в разных размерах. Всего их 4 — thumbnail, medium, large и full. Регулировать размеры (thumbnail, medium, large) можно в разделе «Настройки» — «Медиафайлы».

Снимок экрана 2014-10-08 в 20.45.03
Здесь Вы можете прописать, те размеры, которые Вам нужны.

‘full’ — означает полный размер, такой как Вы загрузили.

Когда мы прописываем в функции wp_get_attachment_image_src () аттрибут ‘full’ это значит, изображение, которое будет уходить в социальную сеть, будет того размера, который Вы загрузили как миниатюру в статью.

Если Вы хотите, чтобы уходило изображение определенного размера, укажите в коде вместо ‘full’ атрибут ‘thumbnail’, ‘medium’ или ‘large’, а сами размеры отрегулируйте в настройках медиафайлов.

Одно важное замечание. Загружаемое изображение должно быть прямоугольным. Фейсбук рекомендует наилучший размер 1200 Х 627. Если высота будет больше, в фейсбук изображение будет обрезано. А также ширина должна быть не меньше 600. Если изображение 600px в ширину, в высоту оно должно быть примерно 312px! Если изображение меньше, в анонсе оно не будет отображаться на всю ширину.

Буду рада Вашим комментариям и вопросам.

Как опубликовать запись с блога в Facebook с картинкой на всю ширину

   8 голосов
Средняя оценка: 4.5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - разработчик сайтов на Wordpress с 2007 года. Создатель и разработчик универсального шаблона - конструктора "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов на WordPress. Основатель клуба "Мастер WordPress". Спикер. Путешественница.

Пошаговый План По Созданию Бизнес-Блога На WordPress
Оставьте свой комментарий:
30 комментариев
  1. Марина Мышелова

    Анфиса, как всегда, не могу пройти мимо. Мне очень полезна эта информация, я как раз из тех, кто хочет знать больше, чем просто пользоваться шаблоном. Согласна на все 100%, что большая картинка в помта смотрится гораздо лучше! Только всера обновилась до 4.13, а сегодня побегу обновляться до 4.14. И надеюсь, Вы опять оцените мои записи. :-[ С безграничной благодарностью к Вашему труду, Ваша поклонница.

  2. Нина

    Анфиса здравствуйте ! Я не сильна в техническом плане, но все ,что делается Вами -делается для улучшения качества блога .Поэтому я отношусь к Вам с доверием и надеюсь оно сохранится на долгие годы . Во всем нужна сноровка , закалка , тренировка !

  3. Добрый день, Анфиса. Спасибо за еще одну познавательную статью. Ваш блог у меня уже давно в закладках, в качестве мини энциклопедии по блоговедению. Я очень признательна вам за проделанную работу, результаты которой постоянно радуют нас и наших подписчиков =)

  4. Благодарю, Анфиса! Очень полезный материал. Постоянно работаю с соц сетями. Да, на всю ширину гораздо лучше, приятнее визуально.

  5. Анфиса!
    А я что-то не вижу новую версию шаблона 4.14. На сайте вижу версию 4.7. Подскажите, как обновиться, очень бы хотелось. Ключ автоматического обновления я не покупала. Благодарю заранее!

    • Галина, в клубе, для ручного обновления, шаблон будет появляться как обычно, раз в пол года (по некоторым причинам, может выйти и раньше — исправление критических ошибок или измнения в связи с изменениями в соц сетях или поисковиках).
      Для желающих получать текущие обновления сразу не дожидаясь выхода глобального обновления, мы установили ключ. Больше о ключе автоматического обновления можно почитать здесь: http://anfisabreus.ru/2014/08/klyuch-avtomaticheskogo-obnovleniya-dlya-shablona-ab-inspiration-4-0/

  6. Виктор Фомин

    Спасибо Анфиса за эту маленькую хитрость!

  7. У вас интересный шаблон, Анфиса!)
    Я тут подумываю приобрести его!)

  8. Анфиса, ты профессионал в своем деле. С интересом читаю твои статьи. Обновленной версии отдаю предпочтение. В технические моменты не особо вникаю. наверно зря. Не хватает времени. Удачи.

  9. Анфиса, благодарю! Очень ценная статья. Буду применять :) И да, про мета-теги в целом тоже интересно. Расскажи, пожалуйста. И еще, как решается вопрос с защитой контента от копирования? В шаблон встроен какой-то плагин или код, или настроена особого рода связка с Яндексом / Google?
    Благодарю!

    • Павел, по поводу защиты ничего специально не установлено в шаблон. Вообще блог это такой инструмент, где вся информация открыта. Блог на шаблоне AB-Inspiration хорошо индексируется и поисковики сами знают где оригинал а где плагинат. Даже если ваши статьи кто-то перекопирует, вряд ли они выйдут в том.

    • Но Вы всегда можете усилить защиту с помощью плагинов.

      • Да, благодарю, защиту с помощью IT Security я тоже ставлю своим клиентам, — только статью написать про это никак не собрался. А у вас заметил, и это очень полезно читателям.

  10. Ольга Сухорутченко

    Хорошая штучка для увеличения посещаемости блога. Сначала привлекает внимание картинка, тем более, когда она Большая.
    Спасибо, Анфиса!

  11. Виталий Котляров

    Анфиса, приветствую!
    Это просто Потрясающе!!!
    Совершенно не представляю, как Вам Это удается? Читая статью, ловлю себя на мысли, что каким то трепетным и нежным чувством проникаюсь к магии HTML (еще месяц назад для меня и понятия такого не существовало).
    Блоггинг, как в видимых проявлениях, так и в разрезе внутренней кухни, все более поглощает меня.
    Считаю, читателю важно давать не только качественный контент, но и достойную визуализацию. А для этого необходимо более глубинно понимать принципы формирования и настройки самих процессов преобразования (текста, фото, виде).
    Это очень полезная и важная информация.
    Благодарю за увлекательное вовлечение в процесс создания и продвижения блога! *THUMBS UP*

  12. Анфиса, у меня шаблон AB-Inspiration 4.14. Вы пишите, что «В шаблоне уже эта функция включена». А мои анонсы, почему-то, отображаются по-старому, с маленькой картинкой (моим портретом). Что мне нужно сделать?

    • Светлана,этот функционал работает с миниатюрой. Загрузите в каждую статью миниатюру размером не меньше 600 пикселей в ширину. Тогда Ваши статьи будут уходить с этим изображением.

      • Спасибо, Анфиса, за ответ. Я поняла так, что ставить картинки нужно, как на Вашем блоге? Или можно загрузить большую — 600 пикселей — а в статью вставить меньшего размера?
        Извините за непонятливость.

  13. Анфиса, здравствуйте. Опять я. Я загрузила в статью картинку размером 600х312 — как у Вас. Но на фейсбук всеравно идет все по-старому. В чем еще может быть причина? :(

    • Светлана, для отправки изображения в соц сети нужно загружать как миниатюру. Справа от редактора записей есть боковая колонка. Спуститесь чуть ниже и Вы увидите блок «Миниатюра записи».

      Нажмите на ссылку «Задать миниатюру». Дальше все как обычно, во всплывшем окне выберите картинку из бибилиотеки или загрузите новую. Затем нажмите на синюю кнопку справа «Задать миниатюру».
      Изображение появится справа в боковой колонке в редакторе статьи. Вот это изображение и будет отправляться в социальную сеть.

  14. Ольга

    Анфиса, огромная благодарность. увидела статью и тут же применила в действие. *BRAVO* *THUMBS UP* . Часто задавала себе вопрос: Как опубликовать запись с блога в Facebook с картинкой на всю ширину, а тут такой подарок!!!

  15. Здравствуйте! у меня версия 5.0, но картинки отправляются в фкйсбук маленькие. Я так понимаю, дело в настройках миниатюры. Я что- не совсем поняла про размер миниатюр. В моем понимании, миниатюра — это картинка размером 150х150, при подготовке статьи мы просто задаем — выбрать миниатюру, выбираем какую именно картинку хотим сделать минатюрой, и она устанавливается автоматически.. а Вы советуете загружать миниатюру 600 пикселей? Вот этот момент мне непонятен. И еще просьба. Было бы неплохо, если бы Вы написали статью, как подготовить картинку или фото для публикации на блоге ( может она есть, я просто не нашла?) Вот у меня, почему-то Гугл индексирует картинки, а Яндекс — нет. А почему — не знаю, хотя блогу уже 10 месяцев, вроде пора уж индексировать.

    • Ирина, по подготовке изображения есть статья — http://anfisabreus.ru/2014/09/podgotovka-izobrazheniya-k-publikacii-na-bloge/
      по поводу, почему картинка уходит маленькая — размер миниатюры на блоге будет зависеть от того, какой Вы выбрали в «Настройки шаблона» — «Настройка статей». На выбор есть 3 варианта: Маленькая (150/150), Средняя (300), Большая (640). Но загружать все равной нужно не меньше 600px.
      По поводу индексации в Яндекс, попробуйте вручную прописывать в картинках title (описание)

  16. Сергей

    Огромное спасибо за информацию! Очень пригодилась!

на Блоге
в Фейсбук
в Вконтакте