Facebook

Для интеграции Facebook используется протокол Open Graph.

Во-первых, необходимо чтобы каждая страница начиналась с заголовка:

<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> Это принципиально важная строка, если ее опустить Facebook не оценит ваших дальнейших усилий. Обычно эту строку достаточно прописать вместо безымянного заголовка <html> в _layouts/default.html, но это зависит от шаблона темы. У меня есть знакомый шаблон, для которого пришлось прописывать заголовок в трех местах!

Во-вторых, следующий кусок кода должен быть вставлен в область <head> обычно за нее в Jekyll отвечает _includes/head.html. Вот в него-то в любое место вставляем строки:

<!-- Open Graph -->
 <!-- Basic Metadata -->
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{{% endif %}" />
<meta property="og:type" content="{% if page.image.feature %}article{% else %}website{% endif %}" />
<meta property="og:image" content="{% if page.image.feature %}
    {{ site.url }}{{ '/images/' | prepend: site.baseurl }}{{ page.image.feature }}
{% else %}
    {{ site.url }}{{ '/images/' | prepend: site.baseurl }}{{ site.logo }}
{% endif %}" />
<meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.url }}" />

<!-- Optional Metadata --> 
<meta property="og:locale" content="{{ site.locale }}" />
<meta property="og:site_name" content="{{ site.title }}" />
<meta property="og:description" content="{{ desc }}" />

В данном куске кода необходимо пояснить только следующие моменты:

site.url должен содержать “правильное начало” http::// или https::// (зависит от).
page.image.feature - это изображение для статьи. Скорее всего в вашем шаблоне оно обзывается по-другому. Поменейте как надо.
переменная desc (краткое описание статьи) у меня вычисляется раньше и используется во всех аналогичных случаях. Код приводится чуть ниже в этой статье.

Правильность всего написанного можно выяснить на страничке: Facebook Object Debugger

В поле вставляется url вашей странички, кто не понял. Заодно узнаете все, что о вас думает facebook.

В описании Open Graph можно найти много интересных дополнительных возможностей. Мне они пока не понадобились.

Интерес могут представлять свойства fb:admins и fb:profile_id для организации доступа к персональной странице. Я обошелся без них.

Twitter

Описание: [](https://dev.twitter.com/cards/overview){:target=”_blank”} Валидатор: Card validator

<!-- Twitter Cards -->
<meta name="twitter:title" content="{% if page.title %} page.title }}{% else %}{{ site.title }}{% endif %}">
<meta name="twitter:description" content="{{ desc }}">
{% if site.owner.twitter %}<meta name="twitter:site" content="@{{ site.owner.twitter }}">{% endif %}
{% if author.twitter %}<meta name="twitter:creator" content="@{{ author.twitter }}">{% endif %}
{% if page.image.feature %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ site.url }}{{ '/images/' | prepend: site.baseurl }}{{ page.image.feature }}" />
{% else %}
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="{{ site.url }}{{ '/images/' | prepend: site.baseurl }}{{ site.logo }}" />
{% endif %}
<meta name="twitter:url" content="{{ page.url }}" />

Описание сайта

Вычисление описания сайта desc:

{% if page.excerpt %}
{% assign desc_long  = page.excerpt %}
{% else %}
{% assign desc_long  = page.content %}
{% endif %}

{% if desc_long contains site.excerpt_separator %}
{% assign desc = desc_long | split:site.excerpt_separator | first | strip_html | truncatewords:50 %}
{% else %}
{% assign desc = desc_long | strip_html | truncatewords:50 %}
{% endif %}

page.excerpt - описание в шапке страницы, которое может отсутствовать. site.excerpt_separator - в _config.yml у меня определено как переменная моря: 

Хотелось получить универсальное описание без тегов, длиной не более чем и независимой от присутсвия спец описания на странице

Не являюсь спецом по Liquid не нашел каким образом заставить работать более сложные конструкции. Было бы интересно посмотреть более простую реализацию.

Google+

<!-- Google+ Authorship -->
<link rel="author" href="https://plus.google.com/+{{ site.author.google_plus }}">

Красивый идентификатор автора гугла+ можно получить через месяц и еще при соблюдении некоторого набора условий. А нет, так придется довольствоваться номером. Престиж, однако!