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

От тогава до сега 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 обявиха възможност и за тези типове сайтове. Добавете следните мета тагове:

<meta property=”og:video” content=”http://site.com/media.swf” /> – Адрес на видеото или flash-а, например http://site.com/media.swf
<meta property=”og:video:height” content=”640″ /> – Височина в пиксели
<meta property=”og:video:width” content=”385″ /> – Широчина в пиксели
<meta property=”og:video:type” content=”application/x-shockwave-flash” /> – Тип на медията. За момента се поддържа само SWF вариант, т.е. в линка горе си добавете линк към видео плеъра в сайта

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

<meta property=”og:audio” content=”http://site.com/song.mp3″ /> – URL до MP3 файла
<meta property=”og:audio:title” content=”Song” /> – Заглавие на парчето
<meta property=”og:audio:artist” content=”Band” /> – Заглавие на изпълнителя или бандата
<meta property=”og:audio:album” content=”Album” /> – Заглавие на албума
<meta property=”og:audio:type” content=”application/mp3″ /> – Тип на файла. Поддържат се само MP3 на този етап

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

<meta property=”fb:app_id” content=”1234567890″/>

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

Стъпка 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.