Спонсоры:

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

xHTML - это не программирование, а разметка текста, но без HTML сайт - не сайт.

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

Сообщение DuM4uK » 04 фев 2012, 18:29

Социальные сети - сервисы интернета, где пользователи обмениваются интересной информацией из того же интернета на своих страничках. Кроме того, социальные сети - отличный способ поделиться ссылкой на интересующий ресурс (для владельцев своих собственных сайтов такой способ хорош для привлечения посетителей). Но такие переходы не катируются среди поисковых машин.
У разных сетей есть свои возможности по обмену опытом, но в целом они схожи – это код для вставки в нужную часть своего сайта. Но многие из кодов работают по принципу – наш код берётся с наших ресурсов. То есть, пользователь заходит на ваш сайт, происходит его загрузка и параллельно идёт подгрузка кодов с ресурсов той или иной социальной сети. В результате некоторые кнопки загружаются после того, как загружается вся страница. Я же для создания кнопок использую только определённые ссылки с социальных сетей и свои собственные изображения кнопок социальных сетей.
В данной же статье я приведу примеры кодов кнопок на самые распространённые социальные сети рунета и расскажу о том, как я, пользуясь CSS, делаю кнопки для социальных сетей (позже расскажу о том, как рисовать такие кнопки).
Владельцам сайтов на движке Joomla данная статья, возможно, будет не инстересна, поскольку в Joomla имеется специальный компонент.
Итак, определяем место, где будет находится блок с кнопками для социальных сетей. Обычно на своих сайтах я создаю отдельный div-блок, в который помещаю следующий «скелет» кнопок
<a href=”link_from_social_network.htm” title=”в социальную сеть”><img src=”images/button_social.png” /></a>

Здесь ”images/button_social.png” – путь к соответствующим изображениям соответствующих социальных сетей на вашем сайте.
Я приведу примеры кнопок, которыми пользуюсь я. В зависимости от социальной сети, параметры тег <a> будет иметь следующие виды:
1. для Twitter
Код: Выделить всё
<a href="http://twitter.com/home?status=RT @ Название страницы: http://www.your-site.host/page.htm" title="Добавить в Twitter">

где вместо Названия страницы я пишу содержимое тега <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">

где вместо 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">

где вместо http://www.your-site.host/page.htm пишу полный адрес страницы, где будет находиться данная кнопка
4. для «В контакте»
Код: Выделить всё
<a href="http://vkontakte.ru/share.php?url=http://www.your-site.host/page.htm">

где вместо http://www.your-site.host/page.htm пишу полный адрес страницы, где будет находиться данная кнопка
5. для блогов на my.ya.ru
Код: Выделить всё
<a href="http://my.ya.ru/posts_add_link.xml?URL=http://www.your-site.host/page.htm &amp;title=Название страницы">

где вместо Названия страницы я пишу содержимое тега <title> данной страницы – это и будет высвечиваться анкором в ленте новостей, а вместо http://www.your-site.host/page.htm пишу полный адрес страницы, где будет находиться данная кнопка
6. для Одноклассников
Код: Выделить всё
<a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=0&st._surl=http://www.your-site.host/page.htm" title="Название страницы">

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

Далее делаем такую запись в CSS

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


Данная запись говорит о том, что изображение, находящееся внутри тега ссылки, при наведении на него курсора мыши будет становиться прозрачным на 50%. Естественно такой стиль CSS у каждого будет свой. У меня, например, на одном сайте такие кнопки находятся внутри дивов

div.social > a img:hover


на другом сайте – внутри ячеек html-таблицы, которым принадлежит специальный слой с кнопками

td.button > div a img:hover
Изображение
Аватара пользователя
DuM4uK
 
Сообщения: 1080
Зарегистрирован: 29 ноя 2011, 17:10
Откуда: Град креста

Вернуться в xHTML

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

    Спонсоры:
   
cron