Facebook „Харесва ми“ с възможностите на „Сподели“ / Блог на Иво Илиев

Facebook „Харесва ми“ с възможностите на „Сподели“

Преди около месец сравних бутоните „Харесва ми“(Препоръчвам) и „Сподели“ с техните нови възможности, предимства и недостатъци.

От тогава до сега Facebook бяха много активни в Европа и имаше серия ключови събития във Великобритания, Германия, Франция и пр. И България не остана назад с Social Me Workshop, който имаше толкова голям отзвук и интерес, че на 20.април предстои продължението му!

Очевидно, че Facebook обръщат значително внимание и лансират всички проекти, свързани с тяхната платформа. Стартъпи, маркетолози и програмисти от Европа се събират и комуникират активно по мащабни социални проекти, свързани с Facebook, а от компанията постоянно ни радват с „умни“ подобрения, фиксове и разработки.

Част от добрите новини около Facebook са многото нови възможности за интегриране на микросайтове във Фейсбук страниците, оптимизацията на фейсбук коментарите и социалните модули за сайтове, както и подобренията по инструментите за социално споделяне.

Тази публикация има за цел да коментира възможностите на бутонът „Харесва ми“ в неговия подобрен вариант.

Да си поговорим за бутон „Харесва ми“

Той има три основни варианта:
1. Стандартен бутон, който изисква пространство от 450 пиксела широчина и 80 пиксела височина. При този вариант срещу бутона виждате снимките на приятелите Ви, които харесват съответната страница в интернет. Когато натиснете бутона можете да публикувате коментар на стената си от изскачащо микро-поле за коментиране.

2. Малък бутон с брояч – до бутона има малко каре с бройката харесвания. Това е един компактен вариант, който не изисква място, но пък няма възможност за коментари и показване снимките на приятелите.

3. Голям бутон с брояч – като вариант 2, но изисква повече място на височина. Карето с бройката харесвания е над самия бутон. Отново няма възможност за коментари и показване на снимките на приятелите.

Имаше два вида код, чрез който бутонът може да се интегрира в сайта:

1. iFrame вариант – той е най-универсален и не изисква кой знае какви програмни умения за да се постави. Проблемът при него е, че няма почти никакви допълнителни възможности

2. XFBML вариант – той е по-богат на опции, има по-трудна интеграция, но за съвременните сайтове е по-удачен вариант. Изисква познания по Javascript.

Новият бутон „Харесва ми“

Всъщност промяната не е кой знае колко голяма, но е съществена, защото в новия „Харесва ми“ се включва една моя любима функционалност на бутон „Сподели“.

Новия бутон „Харесва ми“ има стандартен вид (виж по-горе, 1-ви вариант на бутона) с тази разлика, че когато го натиснете се показва поле за коментар, който да публикувате на стената си, но публикуваното, освен този коментар съдържа и линк към сайта, където е „Харесва ми“ бутонът.

С други думи, след като кликнете „Харесва ми“ можете да споделите линк към страницата, която харесвате с ваш личен коментар за нея. Това е страхотно, защото улеснява и нас, като разработчици на Facebook модули и приложения, така и вас – които искате да споделяте и давате отзиви за съдържанието в интернет.

UPDATE: Току що получих видео от Френския Facebook форум, където се коментира новия „Харесва ми“. Тук може да гледате видеото . Ще забележите, че с новия бутон имате администрация и пълни статистики за всяка страница от сайта си поотделно. Супер, нали?

Интеграция на бутона във вашия сайт

Внимание Моля всички, които се притесняват да гледат програмен код да не четат по-надолу, а да потърсят помощ от запознат разработчик. За момента не намерих информация в българското интернет пространство по този въпрос, затова бързам да споделя, а вие побързайте да сте първите, които интегрират новия бутон в сайта си

Стъпка 1: Добавяне на OG метатагове.
Отваряте страницата, където ще слагате бутона и намирате </head> – Преди него слагате следния код:

<meta property="og:title" content="Заглавие на сайта" />
<meta property="og:type" content="website" />
<meta property="og:url" content="URL на сайта" />
<meta property="og:image" content="URL до картинка" />
<meta property="og:site_name" content="Име на сайта" />
<meta property="fb:admins" content="Код на администратора" />

Нека накратко разтълкуваме всеки един от редовете код по-горе:

<meta property=“og:title“ content=“" /> - Тук записвате заглавието на сайта или страницата
<meta property=“og:type“ content=“" /> – Тук записвате какъв е типа на сайта. Всички типове са описани тук
<meta property=“og:url“ content=“" /> – Адрес до сайта или страницата, например http://www.site.com или http://www.site.com/page.html . Трябва да е работещ и реален уеб адрес
<meta property=“og:image“ content=“" /> – Картинка, която да се споделя. Може да е логото ви например.
<meta property=“og:site_name“ content=“" /> – Името на сайта ви, без излишни допълнения. Например може да е името на бранда ви
<meta property=“fb:admins“ content=“Код на администратора“ /> – Индивидуален код (ID) на потребителя (вие) от фейсбук, който ще е администратор на социалните разработки в сайта. Може да сложите няколко кода, разделени със запетая. Ако не си знаете кода – тук съм направил едно приложение, откъдето да си го видите.

За сайтовете с видео и флаш – буквално преди минути, докато пишех тази публикация от Facebook обявиха възможност и за тези типове сайтове. Добавете следните мета тагове:

За сайтовете с музика (аудио) - аналогично, само заменяте думичката „video“ с „audio“

Ако искате да имате статистики и администраторски функции към бутона „Харесва ми“, за да може да следите „харесванията“, трябва да имате facebook application и съответно да добавите мета таг с нейното ID, например:

След като си добавите тези тагове към кода на страниците от сайта може да пристъпим към…

Стъпка 2: Създаване на „мост“ между сайта ви и Facebook

Накратко създавате метод, чрез който сайта ви да комуникира с фейсбук.
За целта намерете в кода на сайта: <html (намира се в най-горната част на страниците от сайта)

Допълнете <html с: xmlns:fb=“http://www.facebook.com/2008/fbml“, т.е. в крайния вариант трябва да се получи нещо от сорта:

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:og="http://ogp.me/ns#"
 xmlns:fb="http://www.facebook.com/2008/fbml">

Това е цялата философия. Продължаваме нататък…

Стъпка 3: Добавяне на бутон „Харесва ми“

Важно! Задължително ползвайте XFBML варианта на бутона! (виж по-горе за повече информация)

Добавете в страницата този код еднократно, като текста „bg_BG“ може да се замени с абревиатурата на друг език (например ако е „en_US“, всички контроли на бутон „Харесва ми“ ще се преведат автоматично на английски език).

<div id="fb-root"></div>
 <script src="http://connect.facebook.net/bg_BG/all.js"></script>
 <script>
 FB.init({
 appId  : '1234567890',
 xfbml  : true
 });
 </script>
<fb:like show_faces="true" width="450"></fb:like>

В appId запишете ID номера на facebook application-а Ви.

Стъпка 4: Изчакайте

Необходимо е малко търпение (от няколко минути) за да се кешира новия тип предаване на данни от сайта ви към Facebook. За тази цел кликнете на бутон „Харесва ми“, след това минете с мишката върху лявата му страна и натиснете хикса му докато не стане отново активен бутон за кликане. След това натиснете Ctrl+F5 за да refresh-нете страницата и пак кликнете на бутона. Ще забележите, че след клик може да добавите коментар за харесаното. С малко CSS модефикации се получава резултата, който виждате в моя блог, в началото на всяка публикация.

Стъпка 5: Проверете дали всичко е наред

Самата Cat Lee споделя, че OG платформата им е доста бъгава и крехка на този етап. За това, за да видите дали всичко е наред ползвайте любимият ми URL Linter.