У разных сетей есть свои возможности по обмену опытом, но в целом они схожи – это код для вставки в нужную часть своего сайта. Но многие из кодов работают по принципу – наш код берётся с наших ресурсов. То есть, пользователь заходит на ваш сайт, происходит его загрузка и параллельно идёт подгрузка кодов с ресурсов той или иной социальной сети. В результате некоторые кнопки загружаются после того, как загружается вся страница. Для создания кнопок можно использовать определённые ссылки с социальных сетей и свои собственные изображения кнопок социальных сетей. Такой способ удобен, если вы "построили" свой сайт не при помощи какой-либо из известный панелей управления (например, 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&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% к кнопке при наведении на неё указателя "мышки", что придаст уникальность оформления кнопок на Вашем сайте!