Плагин «Цитата»

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

Публикация цитаты в мобильной сети

Если вы создаете веб-сайт для мобильной сети или предлагаемая кнопка не вписывается в дизайн вашего сайта, вы можете использовать диалог «Поделиться» для веб-платформы. Он тоже позволяет добавлять цитаты в публикуемые материалы.

Публикация цитаты для iOS и Android

Если приложение разработано для iOS или Android, вам следует использовать не эту кнопку, а нативный диалог «Поделиться» в iOS и Android.

Опробуйте плагинПример кодаНастройки

Опробуйте плагин

Выберите часть предложения, чтобы увидеть плагин в действии.

Пример кода

В качестве значения параметра data-href укажите URL своего сайта. Убедитесь, что метатеги Open Graph актуальны и что параметр data-href для плагина соответствует свойству og:url.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Comment #2: SDK -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
Попробуйте сами!

Комментарии к коду

  1. OG Tags: вы можете использовать теги open graph для настройки предварительного просмотра ссылки.
  2. SDK: загрузка Facebook SDK для JavaScript.
  3. Content: материалы вашей страницы.
  4. Plugin Code: код вашего плагина «Цитата» из конфигуратора. Вы можете разместить его в любом месте документа. Он будет отображаться, только когда вы выделите текст в контейнере. В этом примере он отображается только при выделении фрагмента в основном тексте.

Настройки

Вы можете изменить следующие настройки:

Настройка Атрибут HTML5 Описание По умолчанию

href

data-href

Абсолютный URL страницы, цитату с которой вы хотите использовать.

Текущий URL

layout

data-layout

  • quote: при выборе текста кнопка с синим значком Facebook и текстом «Поделиться цитатой» отображается в качестве наложения. При нажатии этой кнопки открывается диалог «Поделиться» с выделенным текстом в качестве цитаты.
  • button: ведет себя так же, как параметр "quote", но на кнопке отображается только синий значок Facebook.

quote

Области, допускающие цитирование

Некоторые области страницы можно сделать нецитируемыми, например меню, боковые панели или нижние колонтитулы. Задать области, допускающие цитирование, можно с помощью:

  • элементов <article> в HTML;
  • любого элемента с названием класса fb-quotable.

Для определения цитируемых областей можно использовать оба способа в любых комбинациях.

Если на странице нет ни <article>, ни class="fb-quotable", возможность цитирования будет доступна для всех элементов страницы.

Изменение языка

Чтобы изменить язык плагина «Цитата», загрузите локализованную версию Facebook SDK для JavaScript. При загрузке SDK задайте для js.src свою локаль. Замените en_US своей локалью, например fr_FR (французский язык (Франция)):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

Список поддерживаемых локалей см. в файле Facebook Locales XML. Возможно, вам понадобится изменить ширину Социального плагина, чтобы разместить локализованный текст. Подробную информацию см. на странице Локализация и перевод.