Зміст
- Відкрийте протокол Graph в двох словах
- Починаємо
- Поєднання основ
- Вибір правильного типу Open Graph
- Діяльності
- Підприємства
- Групи
- Організації
- Люди
- Місця
- Продукти та розваги
- Веб-сайти
- Розширення ваших метаданих
- Що ще ми можемо надати?
- Оновлення тегів Open Graph
- Перевірте перед розгортанням
- Додавання кнопки "Подобається" на вашу сторінку
У цьому підручнику ми побачимо, як ми можемо використовувати Open Graph Facebook, щоб зробити наш сайт більш зручним для Facebook. Це має багато переваг, але головним чином це дозволяє вашій зовнішній веб-сторінці бути рівноцінною сторінці у Facebook. Отже, коли користувач “подобається” вашій сторінці, між вашою сторінкою та користувачем встановлюється зв’язок. Потім ваша сторінка з’явиться в розділі «Сподобання та інтереси» в профілі користувачів, і ви також можете публікувати оновлення для користувача. Ви також можете визначити копію та ескіз, які масово відображаються.
То як ми цього можемо досягти? Це напрочуд просто. Надаючи структурований набір даних (за допомогою протоколу Open Graph), ви можете визначити, як ваш сайт представляється у Facebook.
Відкрийте протокол Graph в двох словах
Протокол Open Graph був спочатку створений Facebook. Початкова версія базується на RDFa (або Framework Description Framework - in - attributes), що є засобом розміщення додаткових мета> теги в голова> веб-сторінки, що дозволяє їй стати об'єкт в соціальному графіку, в даному випадку Facebook. Він був побудований з використанням існуючих відкритих стандартів, намагаючись створити більш семантичну мережу.
Починаємо
Щоб розпочати роботу та перетворити ваші сторінки на графічні об’єкти, потрібно лише додати відповідний протокол Open Graph мета> теги та кнопку "Подобається" вашим сторінкам.
Ми розглянемо вбудовування кнопки "Подобається" трохи пізніше, але спочатку нам потрібно попрацювати над мета> теги для визначення об'єкта вашої сторінки.
Теги, які ми використовуємо, надзвичайно прості в побудові і виглядають так:
мета властивість = "og: title" content = "Відкрити підручник з графіків" />
Ви бачите, що це, безумовно, дійсний метатег. Все, що ми робимо, - це використовувати спеціальний атрибут властивості у формі og: властивість. Самі властивості визначаються протоколом Open Graph і охоплюють майже все, що потрібно для визначення вашої сторінки (ми розглянемо їх більш докладно коротко).
Протокол Open Graph має чотири обов’язкові властивості:
og: заголовок - Назва вашого об'єкта (наприклад, "Відкрити підручник з графіків")
og: тип - Тип вашого об’єкта (наприклад, “стаття”)
og: зображення - Зображення, що представляє ваш об’єкт
og: url - канонічна URL-адреса вашого об’єкта
Є кілька важливих моментів, які слід врахувати з урахуванням цих вимог:
Тип - це завжди повинен бути дійсний тип об’єкта зі списку підтримуваних типів
Зображення - Ваше зображення має мати принаймні 50 пікселів на 50 пікселів з максимальним співвідношенням 3: 1
URL - Це буде використовуватися як унікальний і постійний ідентифікатор усередині графіку
Варто зазначити, що ви можете поставити кілька og: поля зображення; коли користувач “Ділиться” або “Подобається” вашій сторінці, у нього буде вибір, яке зображення використовувати для представлення вашої сторінки у своїй стрічці профілю.
На додаток до цих вимог, Facebook розширив основні метадані, додавши ще два обов’язкові поля для підключення вашої сторінки до Facebook:
og: ім'я_сайту - Зрозуміле для користувача ім'я вашого сайту (наприклад, “.net Magazine”)
fb: адміністратори або fb: app_id - Розділений комами список ідентифікаторів користувачів Facebook або ідентифікаторів програм
Ви помітите, що останні мають префікс "fb' замість 'ог’. Це тому, що це дозволяє Facebook пов’язати точні ідентифікатори користувачів або ідентифікатори програм, які можуть адмініструвати сторінку. Допустимо включати обидва на свою сторінку, або ви можете просто залишити їх, якщо вони не застосовуються.
Facebook рекомендує включити іншу властивість, тег опису:
og: опис - Короткий (одне-два речення) опис вашої сторінки.
Включення властивості description - це чудовий спосіб миттєво отримати таку трохи додаткової інформації про вашу сторінку.
Поєднання основ
Переваривши все це, має сенс побачити, як все це виглядає, коли воно складається разом, щоб сформувати дійсний об’єкт Open Graph. Я буду використовувати код, який я вбудував на одній зі своїх особистих сторінок і використовував для просування деяких міксів, які я роблю:
! - ВІДКРИТИЙ ГРАФ FACEBOOK -> мета властивість = "og: title" content = "Mike Mackay - House Warming Mix (травень 2011 р.)" /> Мета властивість = "og: type" content = "mix" /> мета властивість = "og: image" content = "http://dj.mikemackay.co.uk/uploads/thumbnail.webp">
У своєму коді Open Graph я вказав тип як “mix”. Із майбутнього списку ви помітите, що "mix" насправді не є визначеним типом об'єкта: це прийнятне використання на графіку, і я лише за мить поясни. Я також вказав свій ідентифікатор користувача Facebook як адміністратора цього конкретного об'єкта на графіку.
Вибір правильного типу Open Graph
Щоб ваш об’єкт був представлений на графіку, вам потрібно вказати його тип. Як ми вже бачили, це робиться за допомогою властивості og: type. Доступні підтримувані типи об'єктів підпадають під вісім загальних груп і є такими:
Діяльності
- діяльність
- спорт
Підприємства
- бар
- компанії
- кафе
- готель
- ресторан
Групи
- причина
- спортивна_ліга
- sports_team
Організації
- гурт
- уряд
- неприбуткова
- школа
- університет
Люди
- актор
- спортсмен
- автор
- директор
- музикант
- політик
- профіль
- громадський діяч
Місця
- місто
- країна
- орієнтир
- state_province
Продукти та розваги
- альбом
- книга
- пити
- їжа
- гра
- фільм
- продукту
- пісня
- телешоу
Веб-сайти
- статті
- блог
- веб-сайт
Для продуктів, які мають код UPC або номер ISBN, ви можете додатково вказати їх за допомогою og: upc і og: isbn властивості.
Для вмісту, який підпадає під категорію «Веб-сайти», Facebook рекомендує таке:
“Використовуйте стаття для будь-яку URL-адресу, що представляє перехідний вміст - наприклад, статтю новин, публікацію в блозі, фото, відео тощо. Не використовувати веб-сайт Для цієї мети. веб-сайт і блог призначені для представлення цілого сайту, og: тип тег з типами веб-сайт або блог зазвичай має відображатися лише в кореневій частині домену ".
Цей список повинен виявитися адекватним для більшості людей та сторінок: однак, бувають випадки, коли один конкретний тип об’єкта не зовсім підходить (як на моєму прикладі “міксів”); у цих випадках ви можете вказати власний тип. Недоліком цього є те, що ці типи будуть представлені у Facebook як «інші».
Facebook заявляє, що буде активно контролювати найбільш часто використовувані типи та додавати їх до списку підтримуваних og: типи належним чином.
Розширення ваших метаданих
Для деяких сторінок ми можемо захотіти включити додаткові дані про об’єкт, наприклад, місце розташування кафе, компанії чи готелю. Open Graph дозволяє вам задовольнити це, створюючи стільки властивостей og:, скільки вам потрібно для того, щоб надати додатковий контекст щодо ваших веб-сторінок.
Скажімо, ми створили сторінку та створили об’єкт про нашу компанію - ресторан у Лондоні. Потім ми можемо додати на графік додаткові відомості про своє місцезнаходження та контактні дані, надавши власні власні властивості:
meta property = "og: street-address" content = "123 Any Street" /> meta property = "og: city" content = "London" /> meta property = "og: postal-code" content = "XY1 2ZZ" /> meta property = "og: country-name" content = "United Kingdom" />
Потім ми також надаємо контактні дані для бронювання та запитів:
meta property = "og: email" content = "[email protected]" /> meta property = "og: phone_number" content = "02071234567" />
Поєднуючи таким чином додаткові метадані з необхідними властивостями, ми можемо подати безліч цінних даних прямо на графік.
Що ще ми можемо надати?
Я радий, що ви запитали. Open Graph також дозволяє безпосередньо підключати аудіо чи відео. Скажімо, наприклад, що ви в групі (або навіть відповідаєте за їх просування) і щойно випустили новий трек. Ви хочете отримати максимальну експозицію, яку ви можете отримати, і, прикріпивши безпосередньо медіа, ви зможете дуже легко збільшити свою аудиторію.
meta property = "og: audio" content = "http://www.myband.com/song.mp3" /> meta property = "og: audio: title" content = "The Fictitious Song" /> meta property = " og: audio: artist "content =" Fictitious Band "/> meta property =" og: audio: album "content =" Fictitious Album "/> meta property =" og: audio: type "content =" application / mp3 "/ >
Коли хтось продовжить "Подобається" або "Поділиться" вашою сторінкою, аудіо буде доступне безпосередньо в публікації цього користувача. Це дозволить будь-якому з їхніх друзів слухати композицію безпосередньо зі своєї сторінки профілю.
Якби ми хотіли натомість просувати новий музичний кліп групи, ми могли б зробити наступне:
мета властивість = "og: video" content = "http://www.myband.com/new-video.swf" /> мета властивість = "og: video: height" content = "640" /> мета властивість = " og: video: width "content =" 385 "/> meta property =" og: video: type "content =" application / x-shockwave-flash "/>
Висота, ширина і типу в цьому випадку необов’язкові, але важливо зазначити, що наразі Facebook підтримує лише вбудовування відео у форматі SWF.
Якщо ви хочете, щоб ваше відео відображалось у стрічці новин, вам потрібно додати в свою розмітку дійсний тег og: image.
Оновлення тегів Open Graph
Коли ваш об’єкт потрапить у Facebook, ви можете оновити Open Graph на своїй сторінці мета> теги як звичайні.
Надзвичайно важливо зазначити це og: заголовок і og: тип редагуються лише спочатку: як тільки ваша сторінка отримає 50 позначок "подобається" og: заголовок властивість закріплюється на графіку. Коли ваша сторінка продовжується, ви отримаєте 10 000 "Лайків" og: тип стає фіксованим.
Якщо ви зміните дані для цих властивостей, як тільки вони будуть виправлені, зміна не відображатиметься у Facebook, оскільки збереже їх початкові значення. Facebook робить це для того, щоб уникнути здивування або заплутування користувачів, яким ваша сторінка вже сподобалася.
Перевірте перед розгортанням
Одне з основних правил розробки, як я впевнений, ви вже знаєте, це тестування, тестування та повторне тестування перед тим, як що-небудь публікувати. Поки мета> теги не впливатимуть ні на що безпосередньо на сторінці, вони впливають на Facebook. Наявність недійсних тегів або властивостей перешкоджатиме правильному представленню вашої сторінки і, можливо, міститиме неправильну інформацію, або, що ще гірше, відсутність інформації: зрештою, це максимальний вплив.
На щастя, Facebook надає корисний інструмент. У разі тестування Open Graph це офіційний посилання на URL-адреси в Facebook:
developers.facebook.com/tools/lint
Введіть нову URL-адресу з відкритим графіком (або тестову URL-адресу), натисніть «Lint», і Facebook отримає ваш вміст, проаналізує ваші теги та перевірить вашу інформацію. Якщо він виявить щось неблагополучне, вам буде представлений список попереджень та / або помилок, щоб ви точно знали, з чого почати виправлення своїх тегів. Відредагуйте свої теги за необхідності, а потім просто повторно протестуйте їх у лінтері.
Ви можете протестувати свою сторінку стільки разів, скільки вам потрібно, щоб отримати її форму і без помилок.
Додавання кнопки "Подобається" на вашу сторінку
Останній шматок головоломки - це можливість дозволити користувачам легко “Поділитися” або “Подобається” Вашій зовнішній сторінці. Facebook знає, що чим складніше чогось (програмно) досягти, тим менше шансів зробити це люди. З огляду на це, Facebook розробив дуже простий інструмент, який допоможе вам створити та застосувати кнопку "Подобається" на вашій сторінці:
developers.facebook.com/docs/reference/plugins/like/
По суті, є дві реалізації "Подобається": XFBML та Iframe. Версія XFBML є більш універсальною, але вимагає завантаження Facebook JavaScript SDK на вашу сторінку. Версія Iframe все ще надає вам основне використання, але не дозволяє прослуховування подій або динамічне переозброєння. Вам слід вибрати метод, який найбільше відповідає вашій сторінці.
Після того, як ви створили свій код, все, що вам потрібно зробити, це просто вставити його на свій сайт. Оновіть свою сторінку, і ви побачите, що всім знайома кнопка «Подобається» прикрашає ваш сайт.
З твоїм мета> Позначки всіх налаштувань і вашу блискучу новеньку кнопку "Подобається" на місці, тепер ви повинні бути готові до розгортання нового об'єкта Open Graph у світі.
