Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 15 - сентября Разное
2489 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: Справочник

Протокол Open Graph позволяет любой веб-странице стать полноценным объектом в социальных сетях. Например, протокол используется на Facebook, чтобы разрешить любой веб-странице иметь такую же функциональность, как и любой другой объект на Facebook.

Хотя многие различные технологии и схемы существуют и могут быть объединены вместе, нет ни одной технологии, которая предоставляет достаточно информации, чтобы красочно представлять какие-либо веб-страницы внутри социальных сетей. Протокол Open Graph строится на этих существующих технологиях и предоставляет разработчикам возможность реализовать все это в одном протоколе. Простота разработки является ключевой задачей протокола Open Graph, сообщили многие, на основе
технических проектных решений.



Основные Метаданные

Что бы превратить вашу web-страницу в графические объекты, вам нужно добавить базовые метаданные к вашей странице. Мы основываемся на первоначальной версии протокола
RDFa это означает что вы будите размещать дополнительные <meta> теги в <head> вашей web-странице. Четыре основных свойства для каждой страницы:

  • og:title - Название вашего объекта, как он должен отображаться в графе, например фильм, "The Rock".
  • og:type - Типы объектов , например, "video.movie". В зависимости от типа, можно задать другие свойства которые могут быть необходимы.
  • og:image - URL-адрес изображения, который должен определить Ваш объект в графе для изображения.
  • og:url - Канонический URL-адрес объекта, который будет использоваться в качестве его
    постоянного ID в графе, например, "http://www.imdb.com/title/tt0117500/".

В качестве примера ниже приводится разметка протокола Open Graph для фильма "The Rock" на IMDB:

Код:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Дополнительные Метаданные

Следующие свойства являются необязательными для любого объекта и, как правило, рекомендуется:

  • og:audio - URL-адрес звукового файла, который сопутствует этому объекту.
  • og:description - Одно-два предложения описания вашего объекта.
  • og:determiner - Слово, которое появляется перед названием этого объекта в предложении. Тип enum (a, an, the, "", auto). Если выбрано auto, потребитель данных должен выбирать между "a" или "an". По умолчанию - " " (пусто).
  • og:locale - Тег локации.
    Формат language_TERRITORY. По умолчанию en_US.
  • og:locale:alternate - Тип array других локалей на этой странице.
  • og:site_name - Если ваш объект является частью большого web-сайта, название, должно отображаться на всех страницах сайта. Например, "IMDb".
  • og:video - URL-адрес видео-файла, который сопутствует этому объекту.

Например (line-break исключительно в демонстрационных целях):

Код:
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

Схему RDF (в Turtle) можно найти на ogp.me/ns.



Структурированные Свойства

Некоторые свойства могут иметь дополнительные метаданные, прикрепленные к ним.
Они определены таким же образом как метаданные свойство и
содержание, но свойства будут иметь дополнительные:.

Свойство тега og:image имеет несколько дополнительных структурированных свойств:

  • og:image:url - Идентичный og:image.
  • og:image:secure_url - Альтернативный url-адрес для использования в случае, если web-страница требует HTTPS.
  • og:image:type - Типы MIME для изображения.
  • og:image:width - Число пикселей в ширину.
  • og:image:height - Число пикселей в высоту.

Пример структурированных свойств для изображения:

Код:
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

Свойство тега og:video имеет идентичные теги с og:image. Вот пример:

Код:
<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

Тег og:audio имеет только 3 доступных свойства (потому что, звук не имеет ширины и высоты):

Код:
<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />


Массивы

Если тег может иметь несколько значений, просто поставьте несколько таких тегов <meta> на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.

Код:
<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.

Пример:

Код:
<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300x300px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000px в высоту.



Типы Объектов

Для того что бы корректно отобразить объект в графе, необходимо задать ему тип. Это делается с помощью свойств: og:type

Код:
<meta property="og:type" content="website" />

Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма
CURIEs

Код:
<head prefix="my_namespace: http://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />

Глобальные типы сгруппированы по вертикали. Каждый вертикальный тип имеет собственное пространство имен. Тип og:type значение имени всегда с префиксом пространства имен, а затем период.
Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.

Музыка

og:type значение:

music.song

  • music:duration - integer >=1 - Длина песни в секундах.
  • music:album - music.albumarray - Название альбома.
  • music:album:disc - integer >=1 -Номер альбома на диске.
  • music:album:track - integer >=1 -Номер трека в альбоме.
  • music:musician - profilearray -Исполнитель песни.

music.album

  • music:song - music.song - Название песни в альбоме.
  • music:song:disc - integer >=1 -
    Тоже самое что music:album:disc но в обратном значении.
  • music:song:track - integer >=1 -
    Тоже самое что music:album:track но в обратном значении.
  • music:musician - profile - Профайл музыканта, который создал эту песню.
  • music:release_date - datetime -
    Дату выпуска альбома.

music.playlist

  • music:song - Идентично одному из music.album
  • music:song:disc
  • music:song:track
  • music:creator - profile - Создатель плейлиста.

music.radio_station

  • music:creator - profile - Создатель Радио-станции.

Видео

og:type значение:

video.movie

  • video:actor - profilearray - Актеры в этом фильме.
  • video:actor:role - string - Роли актеров
  • video:director - profilearray - Режиссеры фильма.
  • video:writer - profilearray - Авторы фильма.
  • video:duration - integer >=1 - Длина фильма в секундах.
  • video:release_date - datetime - Дата выхода фильма в прокат.
  • video:tag - stringarray - Теги, связанные с этим фильмом.

video.episode

  • video:actor - Идентично video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series - video.tv_show - К какой серии этот эпизод принадлежит.

video.tv_show

Если это сериал или ТВ-шоу, метаданные идентичны video.movie.

video.other

Видео, которое не относится ни к одной из категорий. Метаданные идентичны video.movie.

Не Вертикальные объекты

Это глобально-определеные объекты, которые просто не вписываются в вертикальные объекты, но всеже широко используются в Интернете.

og:type значение:

article - Статья, пространство имён определяется URI: http://ogp.me/ns/article#

  • article:published_time - datetime - Когда статья была впервые опубликована.
  • article:modified_time - datetime - Когда статья была последний раз изменена.
  • article:expiration_time - datetime - Время истечения срока статьи.
  • article:author - profilearray -Авторы статьи.
  • article:section - string - Название категории.
  • article:tag - stringarray - Теги, связанные с этой статьей.

book - Книга, пространство имён определяется URI: http://ogp.me/ns/book#

  • book:author - profilearray - Кто написал эту книгу.
  • book:isbn - string - Международный стандартный книжный номер ISBN
  • book:release_date - datetime - Дата выпуска книги.
  • book:tag - stringarray - Теги, связанные с этой книгой.

profile - Профайл, пространство имён определяется URI: http://ogp.me/ns/profile#

  • profile:first_name - string - Имя пользователя профайла.
  • profile:last_name - string - Фамилия пользователя профайла.
  • profile:username - string - Ник.
  • profile:gender - enum - Пол (мужской, женский).

website - Web-сайт, пространство имён определяется URI: http://ogp.me/ns/website#

Никаких дополнительных свойств, отличных от базовых. Любая не размеченная web-страницы должна рассматриваться как og:type web-сайт.



Типы

Следующие типы используются при определении атрибутов в протоколе Open Graph.

ТипОписаниеЛитерал
BooleanПредставляет логическое значение true или falsetrue, false, 1, 0
DateTimeDateTime представляет собой временное значение, состоящее из даты (Год, месяц, день) и дополнительного компонента времени (часов, минут)ISO 8601
EnumТипа, состоящий из ограниченного множества постоянных строковых значений (перечисление членов).Строковое значение, которое является членом перечисления
Float64-разрядное число с плавающей точкойВсе литералы, которые соответствуют следующим форматам:

1.234

-1.234

1.2e3

-1.2e3

7E-10
Integer32-разрядное целое число с плавающей запятой. Во многих языках целое число, по сравнению с 32-бит, становятся числом с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для удобного использования нескольких языков.Все литералы, которые соответствуют следующим форматам:

1234

-123
StringПоследовательность Unistrong символовВсе литералы состоят из символов Unistrong без каких-либо символов Escape-Последовательности
URLПоследовательность Unistrong символов, которые идентифицируют Интернет-ресурс. Все допустимые URL-адреса, которые используют протокол http:// или https://

Можешь почитать и вот эту статейку "Как подключить Jquery с разных хранилищ"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 671
  • Онлайн всего: [32]
  • Гости: [31]
  • Поисковики: [1] Google
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 26
  • Генерация страницы: 0.283сек
  • Потребление памяти: 5.433 Mb 
  •   Яндекс.Метрика