Социальные сети: мне нравится → рассказать друзьям!
Социальные сети


В нашем блоге уже говорилось о том, как социальные сети могут помочь продвинуть сайт и привести на него новых посетителей. Но на этот раз хотелось бы перейти от теории к практике и подробнее рассказать о том, как разместить на своем сайте кнопки типа "Мне нравится" популярных социальных сетей, таких как: ВКонтакте, Facebook, Twitter, Одноклассники, МойМир, Google+, QIP и Яндекс.






Что такое "лайки", и какой от них толк?

До появления социальных сетей, говоря о лайках, люди имели в виду этих милых собачек:



(фото из интернета, автор неизвестен)


Однако в интернет-сленге "лайки" означают совсем другое и выглядят они вот так:



Если посещаемость вашего сайта составляет хотя бы 20 посещений в сутки, то вам уже стоит задуматься над тем, чтобы разместить подобные кнопки на своем сайте, потому что:



Думаю, комплиментов в адрес «лайков» достаточно, для того чтобы понять, насколько это полезно и важно для сайта. Поэтому, можно смело переходить к инструкциям по установке.



"Мне нравится" от ВКонтакте

1. Перейдите на страницу подключения виджета к вашему сайту.

2. Подключите свой сайт к социальной сети и нажмите "Сохранить":



3. Настройте вид виджета на свой вкус и получите готовый код:



4. Код виджета необходимо вставить в шаблоны страниц сайта по инструкции.


"Like" от Facebook

1. Перейдите на страницу настройки кнопки "Like".

2. Настройте виджет и нажмите кнопку "Get code":



3. В открывшемся окне скопируйте полученный код и вставьте в шаблоны сайта по инструкции.


"Tweet" от Twitter

1. Перейдите на страницу получения кнопки "Tweet".

2. Выберите тип кнопки:



3. Настройте вид кнопки:



4. Полученный код скопируйте и вставьте в шаблоны по инструкции:




"Класс!" от Одноклассников

Перейдите на страницу инструкции по настройке кнопки "Класс!". Здесь все намного проще: вам уже дан готовый код, и не нужно заполнять никаких форм. Просто копируете код интересующей вас кнопки и вставляете в шаблоны сайта по инструкции.


А еще проще — получить кнопку "Класс!" вместе с кнопкой "Нравится" от соц. сети "МойМир". Как раз дальше именно об этом и пойдет речь.




2 в 1: "Нравится" от МойМир + "Класс" от Одноклассников

1. Перейдите на страницу настройки виджетов "Нравится" и "Класс!".

2. Настройте виджет на свой вкус:



3. Полученный код скопируйте и вставьте в шаблоны сайта по инструкции:




"+1" от Google+

1. Перейдите на страницу настройки кнопки "+1".

2. Настройте вид кнопки:



3. Скопируйте полученный код и вставьте в шаблоны по инструкции:




Все в одном: для лентяев!

Если вам лень настраивать все социальные сети по отдельности, вы можете воспользоваться готовыми решениями и скриптами, которые предоставляют возможность разместить универсальную кнопку с шарингом (функцией "рассказать друзьям") во все популярные социальные сети. Учтите, что здесь не идет сильная привязка к сайту, и такие кнопки созданы больше для удобства, чем для SEO эффекта.



Получите коды кнопок и вставьте их на сайт по инструкции.


Куда вставлять полученные коды?

Для того чтобы разместить на сайте кнопки «лайков», для начала вы должны определиться с тем, на каких страницах вашего сайта их выгоднее и лучше всего разместить. Есть следующие варианты размещения кнопок на сайте:



Не нужно изобретать велосипед и размещать кнопки в сообщениях форума, на страницах контактных данных и так далее: такие кнопки лайкать не будут. После того, как вы определились с тем, куда будете вставлять кнопки, войдите в панель управления вашего сайта по адресу ваш-сайт.ucoz.ru/admin и перейдите в:



Вставьте полученные коды кнопок в один из этих шаблонов и сохраните внесенные изменения. Давайте рассмотрим этот момент на конкретном примере — размещение кнопки "Это интересно!" возле записи в нашем официальном блоге uCoz:



1. Заходим в панель управления сайта по адресу ваш-сайт.ucoz.ru/admin:



2. Переходим в раздел "Управление дизайном" с главной страницы панели управления:



3. Находим в списке шаблонов модуль "Блог" и переходим на страницу редактирования шаблона "Страница материала и комментариев к нему":



4. Вставляем в этот шаблон коды нужных кнопок. У нас в примере это кнопка "Мне нравится" от ВКонтакте. По инструкции на странице получения кнопки ВКонтакте вставляем код в шаблон:

Первую часть кода в heаd:





Вторую часть кода в любую часть шаблона, где бы вы хотели видеть кнопку "Мне нравится":





5. Сохраняем шаблон.

В конце этой записи вы можете увидеть результат нашей работы: у нас в блоге появилась кнопка "Это интересно" от ВКонтакте! Нажимайте "Это интересно" и рассказывайте друзьями, чтобы посмотреть, как это работает. :)
54 комментариев
1 2 »
1 Написал †Angel† 18 Май 2012, 14:35
А вот ещё для лентяев очень неплохой сервис для кнопок от всех соц сетей http://share42.com/
4 Написал hell 18 Май 2012, 14:43
Спасибо за ссылку, действительно неплохой сервис!
7 Написал taro 18 Май 2012, 15:33
По поводу этого сервиса должен сказать, может и для лентяев, но... Все кнопочки в одном стиле, удобно ставятся. Сами понимаете - приятно на глаз, приятнее тыкать. Не плохо было бы Ucoz такой же виджет сделать, есть же виджет социальных закладок. И лайк-виджет тоже нужен. С удовольствием бы пользовался.
8 Написал hell 18 Май 2012, 15:35
Речь тут идет как раз о том, что кнопки лайков привязываются к сайту, и лучше что бы вебмастеры сами с каждой соц сети настраивали кнопку. Это сказывается хорошо на SEO. А все варианты для лентяев не дают таких плюсов.
10 Написал taro 18 Май 2012, 15:46
Спасибо за разъяснение, буду делать реальные лайки.
2 Написал sergeymitrichev 18 Май 2012, 14:41
спасибо за инструкцию!
от себя бы добавил, что виджет Яндекса позволяет отслеживать статистику Лайков в Яндекс.Метрике. Но у него есть минус, на мой взгляд, кнопки маленькие и невыразительные, поэтому некоторые пользователи их "жмакают" с меньшей охотой.
3 Написал hell 18 Май 2012, 14:42
Думаю, тема Яндекс.метрики - это тема для нового поста в блог smile
5 Написал viper1987 18 Май 2012, 15:15
Еще один сервис для леньтяев http://www.addthis.com/
6 Написал hell 18 Май 2012, 15:17
Подобных иностранных сервисов очень много, но не все знают язык, конечно. Это получается не совсем для лентяев.
9 Написал viper1987 18 Май 2012, 15:38
Одним + я считаю возможность выбирать размер значков и настраивать очередность их вывода.
Сервис имеет память и можно подключить к нему статистику.
Но как заметил Hell - сервис англоязычный поэтому либо вспоминаем школу либо пользуемся хромом все отлично переводит smile
11 Написал Kiwikov 18 Май 2012, 17:27
Спасибо) Интересная статья)
12 Написал hotabb 18 Май 2012, 20:27
а как с кнопками которые в конструкторе находятся?
13 Написал hell 18 Май 2012, 21:44
О каких кнопках именно идет речь? Уточните пожалуйста.
18 Написал hotabb 20 Май 2012, 13:43
конструктор, виджеты, соц закладки, это разве не проще?
19 Написал hell 20 Май 2012, 17:09
Это проще, но это немного не то. Тут речь идет о лайках.
21 Написал hotabb 20 Май 2012, 22:15
аа понял biggrin
avatar
14 Написал Dinisimys 19 Май 2012, 18:11
Ну а как же эти кнопки помогают сео-оптимизации?
15 Написал hell 19 Май 2012, 18:55
В посте написано, что кол-во лайков по сайту прикрепленному к социальной сети, влияет на репутацию сайта.
avatar
16 Написал Dinisimys 19 Май 2012, 19:46
это продвинет сайт в поисковиках: поисковые системы давно научились взаимодействовать с социальными сетями, именно поэтому «лайки» оставляют свой след и в SEO.
Я про это
17 Написал hell 19 Май 2012, 20:50
Я тоже про это. Лайки и социальные сети, есть давние предположения, SEO мастеров - взаимосвязаны. Если это сейчас не ярко выражено, то в скором времени будет намного яснее.

Алгоритмы же поисковые системы все равно не раскрывают.
20 Написал mastero444ek 20 Май 2012, 21:39
ПОЧЕМУ не работает ссылка для регистрации кнопки +1 от гугла??? cry cry cry cry
22 Написал hotabb 20 Май 2012, 22:17
в гугле зарегистрированы, там вроде нужна регестрация.
23 Написал mastero444ek 21 Май 2012, 13:32
епта, там вообще ошибка 404 от юкоза.. в чем проблема - я хз, но там гуглом и не пахло..
25 Написал hell 22 Май 2012, 16:32
Где "там"?
26 Написал mastero444ek 22 Май 2012, 21:18
http://s2.hostingkartinok.com/uploads/images/2012/05/ae688735f20cd359ca0af79b3797c2e2.gif
http://s2.hostingkartinok.com/uploads/images/2012/05/3cb1f9455c999d46f78306b57a1eb276.gif
так понятнее? biggrin
28 Написал hell 23 Май 2012, 17:35
Да, исправлено. Спасибо.
avatar
24 Написал nDiviD 22 Май 2012, 10:11
Вот отличный урок для создания индивидуальных кнопок для uCoz:
http://www.unicegroup.ru/blog/like_buttom_for_ucoz_by_unicegroup/2012-05-22-25
avatar
27 Написал ERUDIT 22 Май 2012, 22:24
1. Перейдите на страницу настройки кнопки "+1".

Quote
http://blog.ucoz.ru/blog/soc_seti_mne_nravitsja_rasskazat_druzjam/http//www.google.com/intl/ru/webmasters/+1/button/index.html


Поправьте ссылку wink
29 Написал hell 23 Май 2012, 17:35
Спасибо, уже.
30 Написал ASTMAND 23 Май 2012, 21:06
Как поставить кнопку "Мне нравится" из вконтакте на форум под 1 сообщением во всех темах? Во все модули получается, а в этом нет. Появляется сразу 10 кнопок
32 Написал hell 24 Май 2012, 16:28
Условным оператором. Задать суловие "Если сообщение темы первое (шапка)".
31 Написал gagauz 23 Май 2012, 23:35
Вопрос,конечно не по теме,но не могу не задать-что с сайтом http://www.unet.com/,второй день не доступен??? angry
33 Написал hell 24 Май 2012, 16:28
Вопрос не по теме. С авторизацией есть проблемы, сейчас их решают программисты.
avatar
34 Написал Robivan 27 Май 2012, 17:06
Всё сделал по инструкции. Работает на ура. Можете убедиться на моем блоге http://music-shelf.at.ua/
35 Написал BlackHard 28 Май 2012, 10:28
Я делал все по инструкции, но кнопка почему-то не отображается sad
36 Написал hell 28 Май 2012, 17:20
Какая именно кнопка?
37 Написал BlackHard 28 Май 2012, 21:52
ВКонтакте.
Первую часть кода ложил в тег "head".
Вторую в нужное мне место "body".
Контейнер <div> кнопки почему-то невидимый.
Я подозреваю, что возможно это связано с тем, что я не имею премиум-аккаунта и javaScript необходимый для работы лайк-кнопки не работает.
38 Написал hell 29 Май 2012, 08:07
Глупости. JS работает у всех, для этого не надо быть премиум аккаунтом.

Вы код копировали с этого поста, или сами получали с официального сайтв ВК?
41 Написал BlackHard 01 Июль 2012, 00:24
С офф-сайта
avatar
39 Написал velar0498 29 Май 2012, 11:02
Товарищи! мне кажется давно назрела тема входа на сайты с помощью аккаунтов социальных сетей! Когда появится такой сервис на Ucoz? sad
40 Написал ДухLESS 31 Май 2012, 09:23
Давно осуществлено на PHP: http://phpexample.ucoz.net/publ/avtorizacija_cherez_soc_seti/1-1-0-11 .
avatar
42 Написал лео83 18 Сентябрь 2012, 12:46
Подскажите пожалуйста на ucoz такая проблема. Когда нажимаешь на кнопку поделиться,он может в ссылку вместо фото новости может вставить любую картинку из страницы(хоть из глобального блога-хоть баннер-даже логотип бывает)
Как сделать чтобы вставляло в ссылку IMG1?
avatar
43 Написал DJ0210 11 Декабрь 2012, 19:15
Могли бы вы сказать точно куда мне ставить эти коды?ВоT:
Code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/.s/src/css/921.css" />
</head>

<body style="background-color:#869746; margin:0px; padding:0px;">
$ADMIN_BAR$

$GLOBAL_AHEADER$

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding: 10px;background:url('/.s/t/921/4.jpg') top left no-repeat"><tr><td width="100%" align="center">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="225" align="center">
<div style="height:60px;"></div>
<!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="225">
<tr><td>
<!-- <sblock_menu> -->
<?if($SMENU_1$)?>
<!-- <bc> -->$SMENU_1$<!-- </bc> -->
<?endif?>
<!-- </sblock_menu> -->
</td></tr>
</table><br />
<!--/-->
<!-- -->
<!--/-->

</td>

<td valign="top" style="padding:0 5px 0 0;">
<!-- <middle> -->
<table border="0" cellpadding="5" cellspacing="0" width="100%"><tr><td><!-- <body> -->$CONTENT$<!-- </body> --></td></tr></table>
</td>
<?if(!$HIDE_CRIGHTER$)?>  
<td valign="top" width="225">
$GLOBAL_CLEFTER$
<!-- </middle> -->
</td>
<?endif?>
</tr>
</table>

</td></tr></table>

$GLOBAL_BFOOTER$

</body>

</html>
44 Написал SilverGold 06 Январь 2013, 18:17
Все нужно вставлять перед тегом </body> biggrin
45 Написал SilverGold 06 Январь 2013, 18:43
Здравствуйте! А, как модерировать комментарии, которые добавляют пользователи, через социальные сети? Например Фейсбук. Или, можно как-то не дать этой возможности? Спасибо. biggrin
avatar
46 Написал sa97009 31 Январь 2013, 14:57
У меня проблема ,в ютуб смотрел и у Вас по картинкам ничего похожего нет в хтмл...Помогите,пожалуйста...
avatar
47 Написал ZweR4878 19 Март 2013, 03:33
Скажите Олег можно ли авторизоваться через сайт Вконтакте ?. Как показано на главной страничке ucoz.ru
1-20 21-21
Ваш комментарий