Приветствую вас, дорогие друзья!
Сегодня мы установим на свой сайт крутой выдвижной виджет сообщества ВК/FB! Спешу заметить, что установка показана на примере блог-плафтормы Blogger, но виджет будет работоспособным
и на других движках.
1. Демонастрация виджета (в новом окне) 2. Установка виджета ддя Blogger3. Виджет сообщества Facebook 4. Виджет сообщества Вконтакте5. Как узнать gid сообщества ВКУстановка виджета для Blogger
1. Заходим в
Панель управления и выбираем нужны блог.
2. В сайдбаре слева выбираете вкладку
Шаблона затем на обновившейся странице нажимаете на кнопку
Изменить HTML.
3. Кликните левой кнопкой мыши по коду в текстовом поле и нажмите
CTRL+F и в том же поле с кодом должно появиться поле
Search, как на картинке. В поле поиска вводим
</head> и проверяем, подключен ли у Вас
jQuery. Если нету строчки, похожей на эту:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
то нужно ее добавить.
4. Теперь вводим
</body> в поел для поиска и вставляем перед ним код виджета сообщества ВК или Фейсбука. Код нужно скопировать ниже ;)
Виджет сообщества Facebook
 |
| Выдвижной виджет сообщества Nike на Фейсбук |
<style type="text/css">
#fbplikebox {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.fbplbadge {
background-color: #3B5998;
display: block;
height: 150px;
top: 50%;
margin-top: -75px;
position: absolute;
left: -47px;
width: 47px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE4tt_nKpD2Bf61iBjl6ZdBaCD3iid7xN0831z_p0LK3AdbP_8kvx9vp8G3igAxaY_oFrw972D_1lJ0AGUzKtPokaI77HXj42ST1lZlslAiU7s2JmQg7Gjr1x93AC6v5JLn1mCQvBJU3Y/s1600/vertical-right-fb.png");
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({right: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnike&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>
Вместо адреса
http%3A%2F%2Fwww.facebook.com%2Fnike вставьте линк своего сообщества. Например, для моего сообщества на Фейсбук этот адрес будет выглядеть так:
http%3A%2F%2Fwww.facebook.com%2Fipetrenko.ruВиджет Вконтакте
<style type="text/css">
#vkcommip {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.vkbadgeip {
background-color: #5b7fa6;
display: block;
height: 160px;
top: 50%;
margin-top: -75px;
position: absolute;
left: -47px;
width: 47px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif4uLKOO9DSCc4huQ0abz6cd2DhEOAWyEEHdW-MHxO_e5G9kllhh89KdYwhS8j_xmnvI4qYfqo9wTlZZMR0AZQKeAZsO9pbMSG-opa7kfi0yie6cCMDh47EgZ_l0F2ouaPOiC9jxZbB3g/s160/vertical-right-vk.png");
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#vkcommip").css({right: -250, "top" : 100 })
w2b("#vkcommip").hover(function () {
w2b(this).stop().animate({
right: 0}, $dur); },
function () {
w2b(this).stop().animate({
right: -250 }, $dur); });
w2b("#vkcommip").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="vkcommip" style="display:none;">
<div class="vkbadgeip"></div>
<iframe src="https://vk.com/widget_community.php?app=0&width=250px&_ver=1&gid=44540797&mode=0&color1=FFFFFF&color2=2B587A&color3=5B7FA6&class_name=&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>
Вместо group id моего сообщества
44540797, вставьте gid своего сообщества.
Как узнать gid сообщества Вконтакте?
Чтобы узнать gid зайдите на страницу сообщества и под аватаркой группы найдите вкладку
Статистика и перейдите по ней.
Теперь переведите взгляд на адресную строку браузера и там Вы увидите вот такой адрес:
и вот цифры
44540797 - это ваш gid. У Вас эти цифры должны быть другие!
В конце немного новогоднего настроения в виде видео, о том как тайци запускают в небо свою пиротехнику.
На этом всё. Ваши вопросы пишите в комментариях. До новых встреч ;)
