Панель с ссылками на соц. сети

категория: jQuery
Сейчас довольно популярными стали социальные сети, микроблоги и тому подобное, и я стараюсь не отставать от моды, хотя, в основном, в них не нуждаюсь. Но просто кому как удобней общаться и обмениваться информацией - тот тем и пользуется. И чтоб все не остались без внимания)), я зарегистрировался в Vkontakte, Facebook и Twitter, но пользуюсь чаще всего Gmail + Pidgin. Теперь встал вопрос, куда кидать эти ссылки на блоге. И для удобства я решил сделать плавающую панель с ссылками. Оно в первую очередь удобно, так как не нужно лезть в адресную строку и набирать адрес сайта, а просто кликнуть на иконку и уже у себя в акаунте. Реализаций довольно много, я сделал это с помощью jQuery. Как устанавливать jQuery описывать не буду, так как описывал а предыдущей статье. 1. Качаем плагин jquery.socializer.js и размещаем его у себя в папке js. 2. Вставляем в <head></head> скрипт:
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.socializer.js">
</script>
3. Далее создаем сам плавающий блок с сылками:
<div class="soc_buttons" id="soc_buttons">
<a title="Asman на vkontakte" target="_blank" href="http://vk.com/id65634650"></a>
<a title="Asman на twitter" target="_blank" href="https://twitter.com/Asman_Uzh"></a>
<a title="Asman на facebook" target="_blank" href="http://www.facebook.com/accrewmat"></a>
</div>
4. Создаем стили:
.soc_buttons {
position: absolute;
right: 0;
top: 152px;
width: 70px;
}
.soc_buttons a {
display: block;
position: relative;
}
5. Вызываем плагин:
<script type="text/javascript">
$(function(){
$('#soc_buttons').socializer();
})
</script>
Но в конечном итоге мне не понравилось)), что все ездит и мозолит глаза, и я просто зафиксировал панель сверху с отступом от правого края и решил разнообразить с помощью CSS3.


blog comments powered by Disqus