Плавающая кнопка социальной сети BKонтакте для блога



Как установить в блог Blogspot плавающую кнопку соц сети ВКонтакте


Здравствуйте дорогие мои читатели и гости. Вы наверное заметили, что в инете много информации об установке плавающих кнопок Twitter, Facebook, Google+ и очень трудно найти хоть что-то о кнопке ВКонтакте. Мы имеем возможность установить в блог виджеты этой социальной сети: кнопку мне нравится, виджет комментариев (ссылка внизу), а вот чтобы кнопочка плавно следовала за нами по странице, информации очень мало.

Мне удалось найти в одном из блогов код нескольких кнопок в комплекте. При установке началось: то не выдвигается, то наоборот не закрывается виджет, и это сразу с несколькими кнопками.

Решила я удалить с кода наличие не нужных мне кнопок, оставила только то, что влияет на работу одной кнопки в контакте. Очень капризная оказалась кнопочка, в течение нескольких дней настраивала, очень по разному ведет в шаблонах блога.

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

Это код плавающей кнопки ВКонтакте

<style> img,a { border: 0;} #on { visibility: visible;} #off { visibility: hidden;} #facebook_div { width: 196px; height: 140px; overflow: hidden;} #knfeedburner_div { width: 300px; height: 97px; overflow: hidden; margin-top: 5px; margin-left: -4px;} #kakinetwork_div { width: 300px; height: 97px; overflow: hidden; }/* right side style */#facebook_right { z-index: 10005; border: 2px dotted #0e5198; background-color: #F8F8FF; width: 196px; height: 230px; position: fixed; right: -200px;} #facebook_right img { position: absolute; top: -2px; left: -35px;} #facebook_right iframe { border: 2px dotted #0e5198; overflow: hidden; position: static; height: 360px; left: -2px; top: -3px;}  #kakinetwork_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed;} #kakinetwork_right img { position: absolute; top: -2px; left: -101px; }/* left side style */#facebook_left { z-index: 10005; border: 2px dotted #0e5198; background-color: #fff; width: 196px; height: 353px; position: fixed; left: -200px;} #facebook_left img { position: absolute; top: -2px; right: -35px;} #facebook_left iframe { border: 2px dotted #0e5198; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px;}  #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed;} #kakinetwork_left img { position: absolute; top: -2px; right: -101px;} .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0;} .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px;} .submitbutton { background: #F2F2F2; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer;} </style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"> <div id="facebook_right" style="top: 58%;"> <div id="facebook_div"> <img src="http://img-fotki.yandex.ru/get/9833/61590320.2/0_e7a67_5c15c633_S.png" alt=""/><script type="text/javascript" src="//vk.com/js/api/openapi.js?113"></script>

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "200", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 69015389);
</script></div></div></div>


Настройки: выделенное красным-расстояние кнопки от края страницы право-лево; синим-расстояние на которое выдвигается и задвигается виджет, числовые значения должны быть одинаковы; лиловым-толщина, форма и цвет границы рамки; фиолетовым-положение кнопки верх-низ; голубым-URL адрес кнопки.

Как настроить и установить в блог Blogspot плавающую кнопку социальной сети ВКонтакте
На скриншоте еще один вариант кнопки в контакте (URL адрес кнопки http://i031.radikal.ru/1406/85/48d4691da225.jpg. Только края будут не закругленные, это у меня работа кода, автоматически закругляет все изображения в блоге.  Так же можно сделать свою кнопку самостоятельно; Оранжевым-перейдите по ссылке, настройте виджет своей странички, сообщества или группы ВК.

Вставьте вместо кода моего виджета; коричневым-фон виджета. На остальное не обращайте внимания, в коде много всего осталось, что необходимо для работы кнопки. Пример работы кнопки можно посмотреть в демо блоге
Как я уже написала выше, в этом блоге появились проблемы с работой кнопки. Поэтому я решила воспользоваться кодом плавающей кнопки Googl+. После установки проблема разрешилась.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-230"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("http://img-fotki.yandex.ru/get/9833/61590320.2/0_e7a67_5c15c633_S.png") no-repeat scroll left center transparent !important;
display: #0e5198;
float: right;
height: 250px;
padding: 0 10px 0 30px;
width: 220px;
z-index: 99999;
position:fixed;
right:-230px;
top:58%;
}
.gplusbox div{
background: #f8f8ff;
border: 1px dotted #0e5198;
border-radius: 3px;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="250" data-href="" data-source="blogger:blog:followers" data-width="220">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script><script type="text/javascript" src="//vk.com/js/api/openapi.js?113"></script>

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "200", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 69015389);
</script>
</div></div>



Настройки: синим-URL адрес кнопки; красным (10рх-положение кнопки к виджету, 30рх-положение кнопки к краю страницы); коричневым-положение кнопки на странице верх-низ; оранжевым-фон, толщина, форма, цвет и радиус закругления рамки виджета; голубым-вставьте размеры виджета в контакте; розовым-вставьте код виджета.

Почитайте по теме виджеты социальной сети ВКонтакте. На сегодня у меня все. Комментируйте, не забывайте делиться с друзьями в социальных сетях. Всем пока, до новых встреч.


Автор статьи ✎ Olga Protasova Выпуск ✹ 6/28/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *