Новые сообщения · Участники · Правила форума · Поиск
Страница 1 из 3123»
Форум о uCoz и Web » Интернет » Раскрутка/Оптимизация » Кнопки социальных сетей
Кнопки социальных сетей
SleepWalkerДата: Четверг, 17.11.2011, 22:20 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
Установка кнопок социальных сетей




В общем чем полезны эти кнопочки нам, вебмастерам? Полезны же они тем, что с их помощью мы можем без особого труда привлечь дополнительных пользователей к себе на сайт. Кнопочка социальной сети позволяет пользователю пометить материал сайта как "понравившийся" и поделится им со своими друзьями. Учитывая то, что сейчас буквально каждый пользователь зарегистрирован в социальной сети, то это открывает доступ к весьма большой аудитории. От нас же требуется только интересная информация, остальное сделают за нас наши пользователи.
В случае если статья просто невообразимо интересная, то она будет гулять от пользователя к пользователю, принося все новых и новых людей на сайт.

Как установить такие кнопки к себе на сайт?
В этой статье я приведу код установки кнопок четырех социальных сетей: Facebook, Vkontakte, Google+ и Twitter. На мой взгляд это самые популярные сети. Пытаться собрать кнопки всех социальных сетей бессмысленно, так как избыток кнопок будет только отпугивать пользователей и тормозить загрузку сайта.

Перед тем, как размещать кнопки на вашем сайте вам нужно получить ApiID для вконтакте. Для этого зайдите на страницу генерации кнопки вконтакте. Заполните форму как на картинке ниже и нажмите "Сохранить".



Далее вам нужно скопировать число apiId (см. картинку ниже), чуть позже мы его скормим нашему коду.



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

Скрипты, необходимые для работы кнопок социальных сетей
Начнем с кода, который нужно вставить между <head>...</head>. Это код библиотек для кнопок социальных сетей Google +, Twitter, Vkontakte.
Code

<!-- Social buttons -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?43"></script>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
                {lang: 'ru'}
</script>


Код библиотеки Facebook вставляем после тега <body>:
Code
<div id="fb-root"></div>
<script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) {return;}
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Устанавливаем кнопки в шаблоны сайта
Сперва откроем шаблон "Таблицы стилей (CSS)" и вставим туда следующий код:
Code
.soc_buttons {
        height:62px;
        width:210px;
        display:inline-block;
}
.soc_buttons .sbutton {
        float:left;
        margin:0 2px;
}


Теперь переходим непосредственно в тот шаблон, в котором мы хотим видеть кнопки (к примеру "Страница материала и комментариев к нему"). И вставляем следующий код, после кода $MESSAGE$ (можно и в любом другом месте):
Code
<div class="soc_buttons">
<div class="sbutton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="">Tweet</a></div>
<div class="sbutton"><fb:like send="false" layout="box_count" style="width:44px;" show_faces="true"></fb:like></div>
<div class="sbutton" style="padding-top:2px;"><g:plusone size="tall"></g:plusone></div>
<div class="sbutton" style="padding-top:7px;"><div id="vk_like"></div></div>
<script type="text/javascript">
VK.init({apiId: 2684043, onlyWidgets: true});
VK.Widgets.Like("vk_like", {type: "vertical", height: 24});
</script>
</div>


В коде выше нужно прописать ваш apiID в скрипт вконтакта. Замените его в строке:
Quote
VK.init({apiId: 2684043, onlyWidgets: true});

Еще можете прописать свой ник из Twitter в коде кнопки (data-via="Ваш ник"). Тогда при ретвите будет писаться ваш ник и вы сможете следить за тем, кто и какие страницы ретвитит.
В принципе после этого все кнопки готовы к использованию. Дальше в статье пойдет речь о том, как настроить более красивое оформление записям, отправленным в соц сеть.

Немного подробностей о кнопке твиттера. Не забудьте прописать логин своего аккаунта в параметре data-via (сейчас в коде стоит мой твиттер аккаунт). Если вам нужно самостоятельно сформировать текст твита, воспользуйтесь атрибутом: data-text="Текст твита".

Делаем красивые посты в социальные сети



Что бы соц сеть могла оформить материал так, как на картинке выше, нам нужно ей указать ссылки на изображения, а так же выдать красивые описания материала, для этого используются специальные теги, которые нужно вставлять между <head>...</head>. Все нижеприведенные теги не являются обязательными, по сути главное указать ссылку на картинку, остальное соц сеть подберет сама:
Quote
<meta name="description" content="Описание материала" />
<meta property="og:description" content="Описание материала" />
<meta property="og:title" content="Название материала" />
<meta property="og:url" content="Ссылка на материал" />
<meta property="og:site_name" content="Название сайта" />
<meta property="og:image" content="ссылка на картинку (для фейсбука)" />
<link rel="image_src" href="ссылка на картинку" />


Более подробная информация о тегах для фейсбука и для вконтакте (в самом конце страницы)

На что обращать внимание при размещении кнопок?
При размещении кнопок вы должны учитывать два момента. Во первых вам нужно, что бы пользователь увидел эти кнопки и что бы ему захотелось кликнуть. На желание пользователя кликнуть на кнопку социальной сети можно повлиять их оформлением (над этим постарались разработчики кнопок, плюс мы, когда написали код, так, что бы они были ровно размещены). Второй фактор, который повлияет на желание пользователя, это несомненно содержимое статьи. Потому не вздумайте размещать кнопки вверху статьи, так как к концу статьи пользователь может вообще забыть о кнопках, к тому моменту, как он ее дочитает или ему будет просто лень прокручивать страницу, ради кнопочки.

Официальные странички кнопок социальных сетей
Кнопка Facebook Like
Кнопка Google plus
Кнопка Twitter
Кнопка Vkontakte Like

Как разместить кнопки в первом посте на форуме uCoz?
Все довольно просто. Вам нужно поместить код кнопок в условный оператор в шаблоне "Вид материалов". Это можно легко сделать, прочитав статью о том, как разместить код в первом посте на форуме uCoz.

Скрипты, необходимые для роботы социальных сетей можно тоже вставить в условный оператор, после тега <body>:
Code
<?if($PAGE_ID$ == 'threadpage')?>
<!-- Social buttons -->      
      <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?43"></script>      
      <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>      
      <script type="text/javascript" src="https://apis.google.com/js/plusone.js">      
      {lang: 'ru'}      
      </script>
<div id="fb-root"></div>      
      <script>(function(d, s, id) {      
      var js, fjs = d.getElementsByTagName(s)[0];      
      if (d.getElementById(id)) {return;}      
      js = d.createElement(s); js.id = id;      
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";      
      fjs.parentNode.insertBefore(js, fjs);      
      }(document, 'script', 'facebook-jssdk'));
VK.init({apiId: 2684923, onlyWidgets: true});
</script>      
<?endif?>

Не забываем поменять apiId!
Как установить кнопки социальных сетей?

Time Waits For No One
 
djemNaДата: Четверг, 17.11.2011, 23:47 | Сообщение # 2
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
Свят, хорошая статья!!

Quote (SleepWalker)
на нашем форуме появился критик, который переплюнул Илью))


А вот оно что, а я думаю что Илья его закопать готов, у него конкуренция)))

-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
UnShameДата: Четверг, 17.11.2011, 23:55 | Сообщение # 3
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Offline
круто, надо будет как-нибудь себе поставить
Тот, кто удалит этот пост будет гореть в аду.
 
AnarkiДата: Пятница, 18.11.2011, 09:27 | Сообщение # 4
Генералиссимус
Сообщений: 2386
Репутация: 162
Социальная репутация:

Статус: Offline

Свят статья великолепная))

"Если не можешь сделать сам — по крайней мере, помешай другому."
Карел Чапек

◘ Я снова в деле.. >:D ◘
 
MHДата: Пятница, 18.11.2011, 11:13 | Сообщение # 5
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
Очень полезно!!!
http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH
 
guitarist_detectedДата: Среда, 28.12.2011, 23:14 | Сообщение # 6
Рядовой
Сообщений: 3
Репутация: 0
Социальная репутация:

Статус: Offline
Вроде бы все правильно сделал, а почему-то появилась кнопка только Твиттера...( помогите пожалуйста!
 
SleepWalkerДата: Четверг, 29.12.2011, 10:52 | Сообщение # 7
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
нужна ссылка на сайт, где ты это правильно делал... подругому не определить
Time Waits For No One
 
guitarist_detectedДата: Четверг, 29.12.2011, 12:32 | Сообщение # 8
Рядовой
Сообщений: 3
Репутация: 0
Социальная репутация:

Статус: Offline
сразу на новость http://bubble.my1.ru/news/test/2011-12-29-5
 
SleepWalkerДата: Вторник, 03.01.2012, 15:08 | Сообщение # 9
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
guitarist_detected, ты не вставлял скрипты. судя по всему ты вообще проигнорировал пункт статьи: Скрипты, необходимые для работы кнопок социальных сетей
Time Waits For No One
 
guitarist_detectedДата: Вторник, 03.01.2012, 20:55 | Сообщение # 10
Рядовой
Сообщений: 3
Репутация: 0
Социальная репутация:

Статус: Offline
спасибо! уже понял, где протупил. я не проигнорировал, а не на той странице в head запилил.
 
Сталкер_27Дата: Четверг, 01.03.2012, 13:45 | Сообщение # 11
Рядовой
Сообщений: 6
Репутация: 0
Социальная репутация:

Статус: Offline
Спасибо за статью...

Добавлено (01.03.2012, 13:45)
---------------------------------------------
Пипл, я пробовал но не до конца получилось...((

 
SleepWalkerДата: Четверг, 01.03.2012, 23:06 | Сообщение # 12
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
ну как бы той информации, что ты нам выдал не достаточно, что бы понять в чем проблема...
Time Waits For No One
 
Сталкер_27Дата: Пятница, 02.03.2012, 12:54 | Сообщение # 13
Рядовой
Сообщений: 6
Репутация: 0
Социальная репутация:

Статус: Offline
Я ставил вконтакте кнопку, всё вышло,но когда "лайкаешь" оно не берёт с собой картинку...

 
SleepWalkerДата: Пятница, 02.03.2012, 18:51 | Сообщение # 14
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
а ты вот эти теги между <head></head> писал?
Quote (SleepWalker)
<meta property="og:image" content="ссылка на картинку (для фейсбука)" /> <link rel="image_src" href="ссылка на картинку" />

туда нужно вписать ссылки на картинки, которые ты хочешь, что бы выводил вконтакте (если не использовать эти теги, вк попробует найти картинки сам, на свое усмотрение)

Time Waits For No One
 
SashalifeДата: Воскресенье, 05.08.2012, 22:54 | Сообщение # 15
Рядовой
Сообщений: 1
Репутация: -1
Социальная репутация:

Статус: Offline
А как сделать зелёный вид твитера как тут
 
Форум о uCoz и Web » Интернет » Раскрутка/Оптимизация » Кнопки социальных сетей
Страница 1 из 3123»
Поиск: