Как да интегрираме Facebook Open Graph с WordPress

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

В днешния пост ще разгледаме как да интегрирате Facebook Open Graph със самостоятелно хостван WordPress в подробно ръководство стъпка по стъпка. Ще е необходимо да редактирате съществуващите си WordPress теми и да създадете Facebook приложение (ако нямате такъв).

Готов? Нека да стартираме браузъра и любимия ви редактор на код. Пълно ръководство след скок.

Стъпка 1. Създайте Facebook App

Ще ни трябва Идентификационен номер на приложението и за да получите това, ще трябва да създадете Facebook App. Ако вече имате такъв, преминете към стъпка 2.

Създаването на приложение е лесно, ето какво правите:

1. Влезте в Facebook, отидете на страницата на разработчика.
2. Кликнете върху „Настройте ново приложение"в горния десен ъгъл.
3. Дайте име към новото ви приложение, Съгласен на термини във Facebook, хит Създаване на приложение.
4. Отиди на Уеб сайт напълнете URL адрес на сайта и Домейн на сайта.
5. Запишете стойността на Идентификационен номер на приложението някъде и удариЗапазите промените".

Това е всичко! Винаги можете да се върнете по-късно, за да попълните останалата информация.

Стъпка 2. Заменете свободен край

Отворете заглавния файл на вашата тема (Header.php) в любимия си редактор. Винаги поддържайте резервно копие само в случай, че нещо се обърка.

Потърсете следния ред код или този, който започва с >

Сменете го с:

Запазете header.php отворен, ние ще се нуждаем от него за третата стъпка.

Стъпка 3. Поставете OG тагове

Поставете следния код веднага след това или преди свободен край.

       "/>          

Ето някои от стойностите, които трябва да промените:

• Ред 3: Замяна your_fb_app_id с Идентификационен номер на приложението от стъпка 1.
• Ред 4: Можете да получите your_fb_admin_id под страницата на Facebook Insights (Още информация). Кликнете върхуИнформация за уебсайта Ви"зелен бутон, вземете целия низ от код и заменете Линия 4.
• Ред 12: Този ред определя изображението, което представлява вашата публикация. Ако вашата тема поддържа WordPress Post Thumbnails, тя трябва да работи добре. Но ако това не стане, то ще се провали грациозно без образ. Проверете стъпка 3а за алтернативно решение.
• Ред 19: Замяна logo.jpg с URL адрес към логото на блога ви. Тя ще се покаже, когато страница във вашия блог, която не е публикувана, се споделя във Facebook.

Стъпка 3a - Когато "wp_get_attachment_thumb_url" не успее

Кога wp_get_attachment_thumb_url () не успя да работи, вероятно ще преминете към атрибут за съдържание без стойност, като това, което е показано по-долу:

Едно просто решение ще бъде да се замени ред 12 със следния код:

След това отворете functions.php и въведете следния код:

функция catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ съответства [1] [0]; if (empty ($ first_img)) // Определя изображение по подразбиране $ first_img = "/images/default.jpg";  return $ first_img; 

Този заместващ код се опитва да използва функционално повикване catch_that_image () за да вземете и изведете URL адреса на първото изображение, което се среща. Заменете ред 10 с URL на изображение по подразбиране, ако функцията не успее да намери първото си изображение.

Стъпка 4. Поставете Facebook Javascript SDK

Следните Javascript ви дават достъп до всички функции на Graph API и Dialogs. Той също така ви позволява да интегрирате Facebook социални плъгини като бутона Like, Facepile, препоръки и т.н. с лекота.

Поставете го header.php, веднага след

Заменете your_fb_app_id в ред 4 с Идентификационен номер на приложението от стъпка 1 по-рано.

Стъпка 5. Да го тестваме!

Ние свършихме интегрирането на Facebook Open Graph с блога на WordPress. Нека дадем няколко теста, за да сме сигурни, че сме направили нещата правилно.

Тест # 1 - Преглед на изходния код

Разгледайте изходните кодове на един от публикациите в блога, трябва да имате нещо подобно:

Проверете свойствата и нейните стойности, уверете се, че са правилни.

Тест №2 - Инсталиране на подобна кутия

Ако не сте инсталирали Facebook Like Button, вероятно е време да го получите. Поставете следния код навсякъде (за предпочитане преди съдържанието или след съдържанието) вътре single.php:

След това накарай приятел като то. Трябва да видите нещо подобно, което се показва в потребителския му профил във Facebook:

Допълнително: добавка за WordPress

Ако по някакъв начин не успяхте да инсталирате кодовете или се нуждаете от това да се направи бързо и лесно - има приставка за WordPress.

Facebook Open Graph Мета в WordPress е WordPress плъгин, който добавя мета данни към Facebook, за да се избегне липсата на миниатюри, неправилно издаване на заглавие, грешно описание и т.н..