През 2011г. една от социалните мрежи стана третата по население държава в света. Тогава написах статията "Оръжия за масово споделяне"…
Преди около месец сравних бутоните „Харесва ми“(Препоръчвам) и „Сподели“ с техните нови възможности, предимства и недостатъци.
От тогава до сега 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.
Иво Илиев
___ Повече за автора четете от тук | YouTube канал | Facebook страница ___ Иво Илиев e управител на дигиталните маркетинг компании BOLANDILA и InteractAGE. ___ Иво Илиев е практик в сферата на маркетинга, рекламата и комуникациите от 2003г. Има богат опит в маркетинга и рекламата на международни компании. Практикува като консултант, водещ на корпоративни обучения, лектор. ___ View all posts by Иво Илиев
Здравейте,
искам да попитам дали тези кодово могат да се поставят в блог и ако да как би трябвало да стане.
Поздрави
[…] във Фейсбук визуализират при споделяне (виж как). Съдържанието включва кратко описание, снимка и […]
[…] Добавяте бутон Like […]
[…] след като екипът на Facebook анонсира новите подходи за споделяне , получихме от тях още една страхотна новина – Facebook […]