Воскресенье, 27 Июль 2014 00:00

Коды кнопок для социальных сетей

Социальные сети – сервисы интернета, где пользователи обмениваются интересной информацией из того же интернета на своих страничках. Кроме того, социальные сети – отличный способ поделиться ссылкой на интересующий ресурс (для владельцев своих собственных сайтов такой способ хорош для привлечения посетителей). Но такие переходы не катировались среди поисковых машин. до недавнего времени. Не так давно, алгоритмы поиковых машин крупных гигантов Google и Yandex пересмотрели свои приоритеты и сделали выбор в пользу социальных сетей. точней количества перехода из соц. сетей на сайты.

У разных сетей есть свои возможности по обмену опытом, но в целом они схожи – это код для вставки в нужную часть своего сайта. Но многие из кодов работают по принципу – наш код берётся с наших ресурсов. То есть, пользователь заходит на ваш сайт, происходит его загрузка и параллельно идёт подгрузка кодов с ресурсов той или иной социальной сети. В результате некоторые кнопки загружаются после того, как загружается вся страница. Для создания кнопок можно использовать определённые ссылки с социальных сетей и свои собственные изображения кнопок социальных сетей. Такой способ удобен, если вы "построили" свой сайт не при помощи какой-либо из известный панелей управления (например, joomla).

В данной же статье приведём примеры кодов кнопок на самые распространённые социальные сети рунета и расскажем о том, как, пользуясь CSS, делаются кнопки для социальных сетей.

Итак, определяем место, где будет находится блок с кнопками для социальных сетей. Обычно кнопки размещаются блоком на сайтах, поэтому целесообразно под кнопки выделить отдельный div-блок, в котором будет располагаться следующий «скелет» кнопок:

<a href="/link_from_social_network.htm" title="в социальную сеть"><img src="/images/button_social.png" /></a>

Здесь:

link_from_social_network.htm - ссылка на ту социальную сеть, в которой будет отображаться информация с вашего сайта images/button_social.png - непосредственно то изображение кнопки, которое пользователь сочтёт нужным.

Ниже приведём примеры кнопок, которыми пользуются пользователи так называемого рунета. В зависимости от социальной сети, параметры тега <a> будет иметь следующие виды:

1. Для социальной сети Twitter

<a href="http://twitter.com/home?status=RT @ Название страницы: http://www.your-site.host/page.htm" title="Добавить в Twitter">Image</a>

Вместо "Название страницы" прописываем содержимое тега <title> данной страницы, т.е. непосредственно название той страницы, на которой находится данная кнопка – это и будет высвечиваться анкором в ленте новостей, а вместо http://www.your-site.host/page.htm пишу полный адрес страницы, где будет находиться данная кнопка.

2. Для социальной сети Facebook

<a href="http://www.facebook.com/sharer.php?u=http://www.your-site.host/page.htm">Image</a>

Вместо http://www.your-site.host/page.htm прописываем полный адрес страницы, где будет находиться данная кнопка.

3. Для социальной сети "Мой мир" на Mail.ru

<a href="http://connect.mail.ru/share?url=http://www.your-site.host/page.htm">Image</a>

Вместо http://www.your-site.host/page.htm прописываем полный адрес страницы, где будет находиться данная кнопка.

4. Для социальной сети ВКонтакте

<a href="http://vkontakte.ru/share.php?url=http://www.your-site.host/page.htm">Image</a>

Вместо http://www.your-site.host/page.htm прописываем полный адрес страницы, где будет находиться данная кнопка.

5. Для социальной сети Одноклассники

<a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=0&st._surl=http://www.your-site.host/page.htm" title="Название страницы">Image</a>

Вместо "Название страницы" прописываем содержимое тега <title> данной страницы, т.е. непосредственно название той страницы, на которой находится данная кнопка – это и будет высвечиваться анкором в ленте новостей, а вместо http://www.your-site.host/page.htm пишу полный адрес страницы, где будет находиться данная кнопка.

6. Для Livejournal

<a href="http://www.livejournal.com/update.bml?event=http://www.your-site.host/page.htm&amp;subject=Название страницы">Image</a>

Вместо "Название страницы" прописываем содержимое тега <title> данной страницы, т.е. непосредственно название той страницы, на которой находится данная кнопка – это и будет высвечиваться анкором в ленте новостей, а вместо http://www.your-site.host/page.htm пишу полный адрес страницы, где будет находиться данная кнопка.

Во всех примерах под Image подразумевается некое изображение, которое можно оформить либо самому, либо взять где-либо.

Так же, рекомендуется к каждому тегу <a> прописывать параметр rel="nofollow" - этот параметр позволяет не учитывать данные ссылки при формировании ТИЦ и PR.

Возможно настроить параметры отображения кнопок по средством вмешательства в CSS.

Так запись в CSS

a > img:hover
{filter : alpha(opacity=50); ..-opacity:0.5; opacity:0.5; -khtml-opacity:0.5;}

Добавляет прозрачность в 50% к кнопке при наведении на неё указателя "мышки", что придаст уникальность оформления кнопок на Вашем сайте! 

Спонсоры: