Социално SEO за начинаещи - част 1

Създаване на бутони и линкове за социални мрежи

Социалните мрежи са мощен безплатен инструмент за популязиране на съдържанието на твоя сайт и значението им за SEO оптимизацията постоянно нараства, защото Google отдвава все по-голямо значение на социалните сигнали. Има няколко значими социални мрежи, като всяка дава по няколко различни начина за споделяне на съдържание, което понякога прави трудно да изберем, кой бутон кога да ползваме. Тук ще се опитаме да направим изчерпателен списък с видовете бутони и да покажем разликата между двата вида бутони за споделяне (Share buttons) и бутони за следване (Follow buttons) в социалните медии.

Има доста статии, които показват как бързо да включим в сайта си социални бутони. Ние също имаме подобна статия, но обикновено при тях е трудно да се прави избор кой бутон да ползваме и кой не. Кодът е лесен за инсталиране, но полученият резултат е така както е бил подготвен и не можем лесно да го променяме. Тази статия е по-различна и е насочена повече за начинаещи програмисти и начините, по които могат да изберат и да инсталират тези бутони във всеки сайт.

Бутони за следване срещу бутони за споделяне в социални мрежи

За да можем да разберем различните видове бутони и кой кога се ползва, трябва да научим да правим разлика между бутони или линкове за споделяне и бутони за следване.

Бутони за споделяне в социални мрежи

Тези линкове и бутони позволяват на посетителите на твоя сайт лесно да споделят съдържанието на твоя сайт в техните профили в социалните мрежи. Споделеното от тях се публикува в техния личен профил в съответната мрежа с линк към твоя сайт и ще бъде видян от част от техните приятели или последователи в съответната социална мрежа. С добавянето на такива бутони, ако твоето съдържание е интересно, то може да бъде видяно за кратко време от голям брой хора и да получиш нови посетители в твоя сайт, които никога не са чували за твоя сайт. Поставянето на социални бутони за споделяне има смисъл за всяка страница с достатъчно съдържание - публикация, статична страница, входяща страница (landing page) и др. Всяка страница трябва да има уникален URL адрес. Бутоните за споделяне може да се ползват многократно от един посетител - за всяка нова публикация. Примери за такива бутони са - "Facebook Like Button," "Facebook Share Link", "Tweet Button", "Tweet This Link",  "LinkedIn Share Button", "Google +1 Button" и "Google+ Share Link".

Бутони за следване в социални мрежи

При тези бутони идеята е по-различна. Те служат за увеличаване на присъствието на твоя бизнес в различни сайтове социални мрежи и да ти помогнат за набиране на повече последователи или фенове от тези социални мрежи. Преди всичко е нужно да имаш създадени бизнес профили във всяка от по-важните социални мрежи. С поставяне на бутони за следване в твоя бизнес сайт, получаваш повече видимост за твоите фирмени социални акаунти. Бутона за следване на дадена социална мрежа е на ниво сайт и се ползва само веднъж от даден потребител, при което той започва да следва твоя фирмен профил в съответната социална мрежа. Всеки път, когато пуснеш публикация в твоя социален профил, твоите последователи, които скоро са имали взаимодействие с твоя акаунт, ще видят твоята публикация в своя личен профил в страницата за новини - News feed. Бутоните за следване може да се поставят на всяко място в сайта, но най-често се поставят само в началната страница, в страница Контакти или във дъното на сайта (footer). Те не са обвързани с конкретното съдържание в сайта. Примери за такива бутони са "Twitter Follow Button", "Facebook Like Box", "LinkedIn Company Profile Plugin" и "Google+ Page Button".

Нека започнем с начините за инсталиране на тези бутони за всяка от социалните мрежи. Заб. Всички изображения в дясната част на текста са само за пример и бутоните в тях не работят.

Социални бутони за Facebook

Започваме с най-важната социална мрежа, която към момента има над милиард потребители, от които близо 2 милиона в България. Ще разгледаме няколко основни социални приставки за Facebook.

Facebook Like Button

За какво служи и как работи Facebook Like Button?

Този бутон дава възможност на посетителите на твоя сайт лесно да препоръчат твоето съдържание във Facebook - "харесване". С натискането на този бутон, приятелите на този човек във Facebook им се показва в дясната колона "Happening Now", линк към твоята публикация и това, че този човек я е харесал. Този линк ще бъде видян в реално време от хората приятели на човека, който е натиснал бутона и които в момента са във Facebook. Тази колона в момента се намира в дясната част на екрана и постоянно се движи, като показва най-отгоре нещата, които се случват с приятели на този профил и техни приятели.

Линк към твоята публикация също така ще се покаже в личния профил на човека, който е натиснал бутона в блока Recent Activity, който в момента се намира в лявата колона на профила и показва последните 3 действия предприети от този потребител.

Бутонът може да изглежда по няколко начина и показва колко души са го натиснали.

При натискане на бутона от някой е задължително той в момента да е логнат в собствения си Facebook профил, ако това не е така ще бъде препратен към страница за логване във Facebook. Ако вече е логнат ще види единствено презареждане на бутона и увеличаване на брояча на харесванията. Освен увеличаване на брояча под бутона се отваря малко поленце в което посетителя може да напише коментар за текущата страница и с натискане на един бутон публикува този коментар в своя Facebook профил.

Създаване на Facebook приложение.

Преди всичко трябва да се логнеш във Facebook и да създадеш ново Facebook приложение. Логни се и влез на адрес https://developers.facebook.com/apps Горе вдясно е бутона [Create New App] за съдаване на ново приложение. Достатъчно е да въведеш име на приложението в полето App Name: (например домейна на сайта) и да натиснеш бутна [Continue]. Ще видиш данните на новото приложение, като най-важно тук е номера на приложението след App ID.
Sandbox Mode трябва да се изключи, когато всичко е тествано, че работи!

Как се инсталира Facebook Like Button?

На този адрес https://developers.facebook.com/docs/reference/plugins/like/  може да експериментираш с настройки на бутона и да получиш код, който се включва в твоя сайт на мястото, където трябва да се появи. В падащия списък след "This script uses the app ID of your app:" избери името на новото Facebook приложение, което създаде на предишната стъпка. Това е най-лесния начин за ръчно инсталиране на бутон. Ние обаче ще разгледаме нещо малко по-сложно - включване на този код с JavaScript с цел запазване на валидацията на HTML кода и увеличаване бързината на зареждане на съдържанието на страницата.

Според вида на бутона и начина по който се инсталира има множество варианти на кода. Ние избираме инсталиране на код с XFBML и вид бутон button_count, който представлява тесен бутон Like с брояч на натисканията му, който е идеален за разполагане в лента със социални бутони под публикация. За нов сайт, който е на HTML5 ползвай по аналогичен начин варианта с HTML5, този код е по-подходящ за стари сайтове с HTML4, но ще сработи и на нови сайтове.

Направи отделен файл /js/ganbox_social.js със следното съдържание:

Код 1:

/* ganbox.com Facebook Like button */
function ganboxFBLike() {

var layout = 'button_count'; /* вид на бутона: button_count, standard, box_count. Виж https://developers.facebook.com/docs/reference/plugins/like/ */
var loc = 'bg_BG'; /* може да бъде us_US и надиписа ще бъде Like */
var fwidth = '640'; /* ширина на полето на Facebook бутоните */
var aID = '360734674032298'; /* ID на Facebook приложение */
var ss = false; /* дали да се показва бутон Изпрати */
var sf = false; /* дали да се показват аватари на харесалите страницата */

window.fbAsyncInit = function() {
FB.init({
appId : aID,
status : true,
cookie : true,
xfbml : true
});
};

var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/'+loc+'/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);

var f = document.createElement('fb:like');
f.setAttribute('href', document.URL);
f.setAttribute('class', 'ganboxFBLike');
f.setAttribute('show_faces', sf);
f.setAttribute('send', ss);
f.setAttribute('layout', layout);
f.setAttribute('width', fwidth);
f.setAttribute('font', 'tahoma');
f.async = true;
document.getElementById('fb-root').appendChild(f);
}

Най-важно е тук да промениш реда var aID = '360734674032298'; като промениш този номер с твоя App ID, това е номера на Facebook приложението, което създаде по-горе. В последствие ще добавяме още функции към този файл.

Включи новия js файл в страницата, в която трябва да се показват бутоните, като в head частта преди затварящия /head таг, добавиш реда:

<script src="/js/ganbox_social.js" type="text/javascript"></script>

След това остава само, там където искаш да се покаже бутона (например в края на всяка публикация) да включиш кода.
Код 2:


<script type="text/javascript">// <!&#91;CDATA&#91; ganboxFBLike(); // &#93;&#93;></script>

Facebook препоръчват да подмениш своя начален html таг с


Това е нужно за някои по-стари версии на Internet Explorer да работи правилно (естествено, че този браузър ще прави проблеми, кой друг?). Възможно е твоя html таг вече да има някакви атрибути, тогава просто добави този атрибут в края. Ето един пример:


С промяна на променливите в началото на JavaScript функцията ganboxFBLike() лесно може да се промени изгледа на бутона.
Бутонът има добавен CSS клас ganboxFBLike за позициониране през css файл. Например често се налага, когато този бутон е в лента с други бутони да се подравни в горната част на лентата с използване на следните правила за стила: .ganboxFBLike { display: inline; vertical-align:top; }

Това е всичко за този бутон. По-късно в статията ще видим как се комбинира с другите социални бутони.

Facebook Share Link

Този вид споделяне все още работи, но отдавна не се поддържа от Facebook. Това е така, защото основната му функция беше поета от Like бутона - да може посетителя да остави коментар за линка към текущата страница, която споделя. Въпреки това считаме, че все още може да бъде много полезен, затова следва пример за създаване на Facebook Share Link.

Как се създава Facebook Share Link?

Просто правиш линк, който сочи към http://www.facebook.com/share.php?u=https://ganbox.com
като на мястото на ganbox.com се поставя URL адреса на страницата, която споделяме.
Ако адреса е много дълъг и съдържа кирилица, трябва първо да му се направи urlencode. Друг по-добър вариант е адреса предварително да се съкрати с bit.ly или друга услуга за съкращаване на URL адреси.
Например URL адреса на тази публикация е https://ganbox.com/blog/социално-seo-бутони-за-споделяне, когато мине през urlencode адреса става прекалено дълъг и трябва да се съкрати. Съответния съкратен адрес е http://bit.ly/ZUyf8m
По този начин линка за споделяне става: http://www.facebook.com/share.php?u=bit.ly/ZUyf8m
Може да пробваш линка и наистина да споделеш тази сатия във Facebook тук 😉 Това беше пример за ръчно създаване на линк, което за CMS система не е удобно и е по-добре да се направи програмно.

Автоматично създаване на линк за споделяне във Facebook с PHP

Първо трябва да се регистрираш в http://bit.ly и да получиш login име и API ключ. Може да се логнеш и с твоя Facebook акаунт. След това влез в https://bitly.com/a/settings/advanced там ще видиш login и API Key.
Създай си php файл /inc/ganbox_social.php със следния код.
Код 3:

/* ganbox.com: съкращаване на URL адрес чрез bit.ly */
function make_bitly_url($url,$login,$appkey,$format='json',$version='2.0.1')
{
// API адрес на bit.ly
$bitly = 'http://api.bit.ly/shorten?version='.$version.'&amp;longUrl='.urlencode($url).'&amp;login='.$login.'&amp;apiKey='.$appkey.'&amp;format='.$format;

// свързване с bit.ly (по-добре да се ползва cURL тук)
$response = file_get_contents($bitly);

// обработване на резултата в зависимост от протокола
if(strtolower($format) == 'json')
{
$json = @json_decode($response,true);
return $json['results'][$url]['shortUrl'];
}
else //xml
{
$xml = simplexml_load_string($response);
return 'http://bit.ly/'.$xml-&gt;results-&gt;nodeKeyVal-&gt;hash;
}
}
/* ganbox.com: функция, която връща пълния текущ URL адрес*/
function full_url()
{
$s = empty($_SERVER["HTTPS"]) ? '' : ($_SERVER["HTTPS"] == "on") ? "s" : "";
$sp = strtolower($_SERVER["SERVER_PROTOCOL"]);
$protocol = substr($sp, 0, strpos($sp, "/")) . $s;
$port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":".$_SERVER["SERVER_PORT"]);
return $protocol . "://" . $_SERVER['SERVER_NAME'] . $port . $_SERVER['REQUEST_URI'];
}

След това в страница на публикация е нужно да включиш файла с include_once('/inc/ganbox_social.php'); и някъде под текста на публикацията да извикаш функцията:

$short_url = make_bitly_url(full_url(),'bitlylogin','R_36acc310c5c443e4f5192e016ff23980','json');
echo '<a href="'.$short_url.'">Споделете във Facebook</a>';

Естествено трябва да промениш bitlylogin с твоя login от bit.ly и този примерен API ключ R_36acc310c5c443e4f5192e016ff23980 с твоя bit.ly ключ.

Facebook Like Box

За какво служи Facebook Like Box?

Това е кутия, която може да се включи в твоя бизнес сайт и да показва информация за твоята бизнес страница във Facebook - хора които са харесали страницата и последните публикации там. Също дава лесен начин на посетителите в сайта да станат фенове на фирмената страница във Facebook само с един клик и без да напускат сайта.

Как се инсталира Facebook Like Box?

Разбира се е задължително да имаш създадена Facebook фирмена фен страница. Ако все още нямаш, прочети статията Създаване на фен страница във Facebook.

На адрес https://developers.facebook.com/docs/reference/plugins/like-box/ може да експериментираш с изгледа на кутията. Нейното инсталиране е много подобно на Facebook Like Button, затова ще ползваме същия JavsScript файл /js/ganbox_social.js В него добави функцията от
Код 4:

/* ganbox.com: функция за асинхронно създаване на Facebook Like Box */
function ganboxLikeBox(){
var loc='bg_BG'; /* език, (може да бъде us_US) */
var pageID = '129621312785'; /* уникално ID на страницата във Facebook */
var pageURL = 'http://www.facebook.com/ganboxcom';
var bwidth = '278'; /* ширина на кутията */
var bheight = '325'; /* височина на кутията */
var sf = true; /* дали да показва лица на фенове */
var stream = false; /* дали да показва публикации от FB страницата */
var header = true; /* заглавна лента */

var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/'+loc+'/all.js#xfbml=1';
e.async = true;
document.getElementById('likebox').appendChild(e);

var f = document.createElement('fb:like-box');
f.setAttribute('href', pageName);
f.setAttribute('width', bwidth);
f.setAttribute('height', bheight);
f.setAttribute('show_faces', sf);
f.setAttribute('border_color', '');
f.setAttribute('stream', stream);
f.setAttribute('header', header);
f.setAttribute('colorscheme', 'light');
f.async = true;
document.getElementById('likebox').appendChild(f);
}

Редовете
var pageID = '129621312785';
var pageURL = 'http://www.facebook.com/ganboxcom';
се променят с ID и URL на твоята фирмена страница във Facebook. След това по подобен начин на Like бутона включи JavaScript файла
в head частта преди затварящия /head таг, като добавиш реда:

<script src="/js/ganbox_social.js" type="text/javascript"></script>

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


<script type="text/javascript">// <!&#91;CDATA&#91; ganboxLikeBox() // &#93;&#93;></script>

Добави атрибута xmlns:fb="http://ogp.me/ns/fb#" в твоя отварящ HTML таг, ако все още не си го направил.

С промяна на променливите в началото на функцията може лесно да се променя размера и изгледа на кутията.

Това бяха по важните социални приставки за Facebook. За по-подробна информация виж https://developers.facebook.com/docs/plugins/
Ние от Ganbox можем да инсталираме всяка от тези социални приставки. Свържи се с нас от страница Контакти.

Очаквайте част 2 на тази публикация.

Не забравяйте да споделите тази статия с бутоните отляво за споделяне в социалните мрежи 😉

Прочетена:19128
1 - лоша2 - слаба3 - средна4 - добра5 - отлична (3 гласа, оценка: 5,00 от 5. Моля изберете оценка!)
Loading...
Георги Стефанов
Магистър по информатика, който се занимава с компютри от 1988 г., професионално с програмиране от 1998 г., а с уеб технологии от 2002 г. Има богат опит при оптимизиране на бизнес сайтове. Повече от 15 години развива успешно свои уеб проекти и работи с български и международни компании за постоянно подобряване на техните сайтове и увеличаване на онлайн продажбите. 

5 comments on “Социално SEO за начинаещи - част 1”

  1. Според мен бутоните трябва да са по-големи, така изглеждат по-лесни за натискане и потребителите ги ползват.

  2. Здравейте!
    Поздравления за хубавата статия.
    Чудесно!

    При мен обаче бутона за харесване премигва няколко пъти преди да се покаже напълно, как може да се оправи?
    Ако не се задава bg_BG, ще разпознава ли сам на какъв език да изпише "Харесай" на потребителя, и от какво зависи?

    Благодаря,
    Поздрави!

  3. Поради промени направени от Facebook относно Facebook приложенията, които ще влязат в сила на 10 юли 2013, добавихме в Код 1 следния ред:
    f.setAttribute('href', document.URL);

  4. Здрасти. Сложих "Харесва ми" в блога си, взет директно от Facebook но не работи. Или изчезва след натискане или като се натисне за миг се показва едно отброяване и пак се връща на старото си число. Просто не работи. В предния ми блог си работеше без проблем, даже като сложих бутона си показа харесванията на домейна автоматично. Но сега след някой промени на блога неще да работи. Изписва се надпис "The page at http:// www. домейн.com/ could not be reached." Дайте съвет ако може и как да се разреши това. Благодаря.

  5. Страхотна статия. Благодарности към автора за споделеното знание и отделеното време.

споделиха
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram