Главная » Создание сайта » Раскрутка сайта » Социализация сайта: кнопки и комментарии от ВКонтакте, Twitter и Facebook на сайт

Социализация сайта: кнопки и комментарии от ВКонтакте, Twitter и Facebook на сайт

04.02.2012 в 16:57
Автор: [dreadful]

 


В нашу эпоху всё популярнее и популярнее становятся социальные сети - Вконтакте, Фэйсбук, Одноклассники и другие..
Для владельцев сайтов это прежде всего мощнейший инструмент для привлечения новых посетителей и расширения существующей аудитории сайта.

Самый простой способ это реализовать - установить блок социальных закладок на видном месте. Люди могут сохранять понравившийся
материал на своих страницах и тем самым обеспечивать бесплатную и довольно эффективную рекламу вашего ресурса.

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

 

 

 

 

 

 

 

 

 

 

 

 


Красным цветом подчеркнуты следущие параметры:
- ширина панели - ставим по ширине блока или оставляем стандартную
- Inline - располагаем кнопки в линию
- 24 - размер иконок, на ваше усмотрение

Всё, жмем "Применить" и получаем довольно симпатичный блок соцзакладок.

Если Вас чем-то не устраивают эти кнопки, можете воспользоваться аналогичным сервисом от Яндекса.
Идем на API Yandex'a, там приступаем к настройке блока:
- выбираем набор сервисов и оформление блока
- копируем код

 

 

 

 

 


- как и в установке стандартных кнопок, создаем новый блок в конструкторе, в "Содержимое" вставляем код:

 

 

 

 

 


Что имеем на выходе - на картинке:

 

 

 

 

 


Следующий способ - установка виджета сообщества в соцсети.
Установим виджеты Вконтакте, Фэйсбука и Твиттера.
Вконтакте. Идем сюда,настраиваем блок по своему усмотрению, копируем код и через конструктор вставляем код на сайт в новый блок, или добавляем к ранее созданным соцзакладкам.

 

 

 

 

 


Facebook, их виджет называется LikeBox и устанавливается так же.
Здесь настраиваем внешний вид, всё интуитивно понятно.

 

 

 

 

 


Виджет твиттера представляет собой последние твиты вашего профиля, настраивается здесь

 

 

 

 

 


Что в итоге получится на сайте:

 

 

 

 

 


Но соцзакладки и сообщества - только первая часть нашей социализации сайта. Вторая часть - это комментарии от соцсетей.
Что они дают - облегчение возможности пользователям оставить отзыв о материале.
Владельцу сайта всё то же - привлечение пользователей из соцсетей, потому что по умолчанию оставленный комментарий отразится на странице в социальной сети.

В данном случае я покажу, как не только установить комментарии соцсетей на сайт, но и красиво и функционально их расположить.
Будем использовать такое популярное решение для размещения контента, как вкладки(табы) на jquery. Во вкладках и расположим комментарии.
Работать будем с модулем "Новости сайта" - Панель Управления - Дизайн - Управление дизайном - Новости - Страница материала и комментариев к нему.
Шаблон использовался стандартный #798

Будьте внимательны! Обязательно сделайте резервную копию данного шаблона, чтобы в случае чего можно было восстановить.

Итак, для начала вырежем и сохраним код комментариев uCoz. Выглядит он следующим образом:

 

 

Code

<?if($COM_IS_ACTIVE$)?>
<?if($COM_CAN_READ$)?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25"><!--<s5183>-->Всего комментариев<!--</s>-->: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
<?endif?>

<?if($COM_CAN_ADD$)?>
$COM_ADD_FORM$
<?else?>
<?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg"><!--<s5237>-->Добавлять комментарии могут только зарегистрированные пользователи.<!--</s>--><br />[ <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> ]</div><?endif?>
<?endif?>
<?endif?>


Следующий шаг - добавить комментарии Вконтакте, для этого идем на страницу виджета.
Заполняем форму подключения комментариев, как на картинке ниже, только вместо site.ucoz.ru указываем адрес вашего сайта:). Жмем "Сохранить".

 

 

 


Настраиваем по вкусу комментарии - их количество, ширину, возможность добавлять мультимедиа файлы.
Копируем код и сохраняем отдельно, как и код ucoz-овских комментариев.

 

 

 

 

 


Остались только комментарии Facebook их берем отсюда.
Настройка - в первое поле вводим адрес сайта, выставляем количество комментариев(10), ширину(470) и цветовую схему под светлый(light) или темный дизайн (dark)

 

 

 

 

 


Жмем "Get code"

 

 

 

 

 


Полученный код из 2 частей сохраняем отдельно, как и предыдущие два.

Теперь самое сложное - корректно установить табы и скопировать туда все коды.

Создаем новый файл tabs.css с настройками стиля для наших будущих табов. Туда копируем следующий код:

 

 

Code

div.tabs {
background: #fff;  
}

div.container {  
margin: auto;  
width: 90%;  
margin-bottom: 10px;
}

ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}

ul.tabNavigation li {
display: inline;
}

ul.tabNavigation li a {
padding: 3px 9px;
background-color: #e5e5e5;
color: #000;
text-decoration: none;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #e5e5e;  
color: #000;
}

ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}

ul.tabNavigation li a:focus {
outline: 0;
}

div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #FFF;
background: #FFF;
}

div.tabs {
margin-top: 0;
}

 


Грузим файл на сайт, копируем ссылку на него и вставляем чуть ниже вместо site.ucoz.ru

В "Панель Управления - Дизайн - Управление дизайном - Новости - Страница материала и комментариев к нему" на место, где были стандартные комментарии
вставляем код вкладок(табов), одновременно подключая файл стилей и скрипт для работы переключателей:

 

Code

<link type="text/css" rel="StyleSheet" href="http://site.ucoz.ru/tabs.css" />
<script type="text/javascript">
$(function () {
  var tabContainers = $('div.tabs > div');
  tabContainers.hide().filter(':first').show();
   
  $('div.tabs ul.tabNavigation a').click(function () {
  tabContainers.hide();
  tabContainers.filter(this.hash).show();
  $('div.tabs ul.tabNavigation a').removeClass('selected');
  $(this).addClass('selected');
  return false;
  }).filter(':first').click();
});
</script>

<div class="tabs">
  <ul class="tabNavigation">
  <li><a class="" href="#first">uCoz</a></li>
  <li><a class="" href="#second">Вконтакте</a></li>
  <li><a class="" href="#third">Facebook</a></li>
  </ul>

  <div id="first">место для вставки комментариев uCoz</div>
  <div id="second">место для вставки комментариев Вконтакте</div>
  <div id="third">место для вставки комментариев Facebook</div>
</div>


Элементы списка в начале - это ссылки, по нажатие на которые откроются те или иные комментарии.
В табах сразу написано, куда следует вставлять код комментариев - "место для вставки комментариев ...."
Это и делаем. Сохраняем и получаем на выходе вот такой вот симпатичный блок комментариев.

 

 

 

 

 

 

 

 

 

 

 


Дополнение. Как настроить автоматический экспорт rss-ленты сайта в facebook и twitter?
О часто обновляемой информации на сайте трудно сразу вручную уведомить подписчиков в соцсетях, поэтому на помощь придет автоматический постинг новостей.
Работает только для FaceBook и Twitter, Вконтакте пока известных мне способов автоматизации нет.

Регистрируемся на сайте ТвиттерФид, после регистрации видим следующее окно:

 

 

 

 

 


заполняем адрес rss ленты и название. Переходим к шагу 2. Подключаем акааунты твиттера и фэйсбука.

 

 

 

 

 


Жмем на "all done" и через некоторое время оцениваем результат.

На этом все, надеюсь выполнение этих способов социализации значительно повысит популярность вашего сайта в соцсетях.

 

 

социализация, социальные закладки, вконтакте, facebook, Twitter, социальные кнопки


Рейтинг: -15  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 22622          Комментариев: 44

Похожие инструкции

06.07.2014 в 16:44      0  

Доброго времени. Тема очень интересная и актуальная! В связи с чем есть вопрос. Кто нибудь сталкивался с установкой блока комментариев с Linkedin? Они тоже предоставляют инструменты API, но сильно заморочисто, никак не могу разобраться. Подскажите как осуществить, кто знает?
12.06.2014 в 20:29      0  

Фигня! Это ооочень легко!!!
03.04.2014 в 16:13      -1  

Спасибо, хорошая инструкция, помогла в установке facebbok комментариев.
26.01.2014 в 14:00      +1  

Спасибо за мануал! Всё работает, и заработало с первого раза smile Пришлось только чуток повозиться с модулем комментирования Фейсбука - по-умолчанию у него нет привязки страницы, но это лечится применением кода $REQUEST_URI$
Последовательность действий:
1. Бэкап (святая святых)
2. Читаем мануал выше и копируем нужные части в блокнот
3. Выполняем действия, рекомендованные разработчиками модулей социалок
4. Копируем всё в один файл в нужные места
5. Устанавливаем код на сайт и любуемся...
12.01.2014 в 05:22      0  

Следующий способ - установка виджета сообщества в соцсети. 
Установим виджеты Вконтакте, Фэйсбука и Твиттера. 
Вконтакте. Идем сюда ----------------------------------------------------------         ошибка 404
10.05.2013 в 10:43      0  

Добрый день а где можно найти боллие подробней описания с фотками для чайника или видео не получается у меня совсем(((
11.05.2013 в 09:11      0  

Здравствуйте, уточните, на каком этапе у Вас возникают трудности?
12.05.2013 в 15:55      0  

Полностью всё только вконтакт мне нужно. куда код кинуть от вконтакта
это я сделал 1-Итак, для начала вырежем и сохраним код комментариев uCoz. Выглядит он следующим образом:
2- Следующий шаг - добавить комментарии Вконтакте, для этого идем на страницу виджета.
Заполняем форму подключения комментариев, как на картинке ниже, только
вместо site.ucoz.ru указываем адрес вашего сайта:). Жмем "Сохранить". следующий шаг не пойму

Теперь самое сложное - корректно установить табы и скопировать туда все коды.

Создаем новый файл tabs.css с настройками стиля для наших будущих табов. Туда копируем следующий код:
13.05.2013 в 09:11      0  

Код устанавливается:
Цитата
В "Панель Управления - Дизайн - Управление дизайном - Новости - Страница материала и комментариев к нему".


Вы можете устанавливать соответствующий код без риска нарушить дизайн Вашего сайта. Производя установку кода и обновляя соответствующую страницу Вашего сайта, Вы можете исследовать, где элемент отобразился. Если неудачно (не соответствует Вашей задумке) – Вам необходимо перемещать в иное место исходный код в соответствующем шаблоне дизайна до момента достижения корректного результата. Также, настоятельно рекомендуется перед началом редактирования шаблонов, в – Панель управления → Управление дизайном → Backup шаблонов – выполнить резервное копирование шаблонов ("Создать резервную копию").
13.05.2013 в 09:23      0  

Всё Спасибо сделал для новостей. а этот год можно поставить и фото альбом и на форум? можно сделать что бы он везде был?
Ещё у меня Экран сьехал(( в чём может быть проблема?
14.05.2013 в 09:12      0  

Соответственно, по аналогии Вы можете производить установку и в иных модуля, код также устанавливается в Панель управления → Управление дизайном. Например, Панель управления → Управление дизайном → Фотоальбомы: Страница с полной фотографией и комментариями.

Укажите ссылку на пример страницы.
14.05.2013 в 09:18      0  

Спасибки вот сылка timoshin.ucoz.ru
14.05.2013 в 10:06      0  

Поясните, что Вами подразумевается под: "Экран сьехал". Отображение сайта корректно.
14.05.2013 в 10:33      0  

У меня на мозиле в право влево двигается сайт а было просто стоял прямо и только можно верх вниз
17.05.2013 в 09:34      0  

Укажите ссылку на пример конкретной страницы, где существует проблема с отображением дизайна сайта. На главной странице, к примеру, отображение дизайна корректно:
17.05.2013 в 10:07      +1  

Да вижу у вас хорошо значит у меня с мозилой что-то((( Спасибо большое за помощь thumb
10.02.2013 в 16:22      0  

За ТвиттерФид отдельное спасибо. Не знал  up .
06.12.2012 в 15:53      0  

Помогите пж... в чем ошибка? tabs.css сделал и выложил как написано.. вот скрины http://dmiales.ru/2/1/oshibka1.png и http://dmiales.ru/2/1/oshibka_2.png
07.01.2013 в 00:17      0  

в чем собственно ошибка?
Вместо "место для ...." надо вставлять скрипты коментариев юкоза, контакта и фейсбука
21.10.2012 в 14:53      0  

Спасибо, все работает!!!! http://portalwork.ucoz.net/
21.09.2012 в 16:34      0  

Что-то комменты от контакта глючат sad
1 2 3 »