[Blogger] Добавляем виджет сообщества Вконтакте/Facebook (с эффектом при наведении)

Добавляем виджет сообщества Вконтакте/Facebook (с эффектом при наведении)
Приветствую вас, дорогие друзья!
Сегодня мы установим на свой сайт крутой выдвижной виджет сообщества ВК/FB! Спешу заметить, что установка показана на примере блог-плафтормы Blogger, но виджет будет работоспособным и на других движках.

1. Демонастрация виджета (в новом окне)
2. Установка виджета для Blogger
3. Виджет сообщества 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("http://1.bp.blogspot.com/-fXC_m3j9qho/VKksk8KoaQI/AAAAAAAAI8o/HW8iH94FAyM/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&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;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

Виджет Вконтакте

Виджет сообщества для Вконтакте
Выдвижной виджет сообщества IPetrenko.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("http://1.bp.blogspot.com/-ir4NtlgyH0A/VKkslGQZEMI/AAAAAAAAI8s/d2dKdZI_MTg/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=2B2F33&color3=6287AE&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 зайдите на страницу сообщества и под аватаркой группы найдите вкладку Статистика и перейдите по ней. 
Как узнать gid группы ВК
 Теперь переведите взгляд на адресную строку браузера и там Вы увидите вот такой адрес:
Как узнать gid группы ВК
и вот цифры 44540797  - это ваш gid. У Вас эти цифры должны быть другие!

В конце немного новогоднего настроения в виде видео, о том как тайци запускают в небо свою пиротехнику.
На этом всё. Ваши вопросы пишите в комментариях. До новых встреч ;)


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

16 коммент. :

  1. Отличный виджет! Еще бы реализовать это для Твиттера и Google+

    ОтветитьУдалить
    Ответы
    1. Спасибо за отзыв!

      Я думаю в одном из ближайших материалов подниму этот вопрос и его реализацию.

      Удалить
  2. Очень ценная информация, но есть вопрос, у меня после вставки кода виджетов фб и вк, появляется либо одна либо вторая вкладка, одновременно обе не появляются, в чем мой косяк?

    ОтветитьУдалить
    Ответы
    1. А можно адрес сайта, где проблема?

      Удалить
    2. адрес кину, но это экспериментальная страница, я на ней практикуюсь )), не ругайтесь сильно: http://vinpdu.blogspot.com/ (здесь я ставила ваш код), а вот здесь мне надо поставить виджеты с эффектом наведения для фб и вк http://vmpdu.blogspot.com/. С блогами никогда дела не имела, тыкаюсь как слепой котенок, а начальство поставило задачу сделать блог и наполнить его за неделю....

      Удалить
    3. Постараюсь помочь. Давайте ускорим наше общение - заходите в чат http://www.ipetrenko.ru/p/chat-help.html прямо сейчас ;)

      Удалить
  3. За 5 лет пользования блоггером - вот этот лучший блог с полезностями,и единственный качественный и полезный для админа сайта.Спасибо огромное автору !!!

    ОтветитьУдалить
  4. За 5 лет пользования блоггером - вот этот лучший блог с полезностями,и единственный качественный и полезный для админа сайта.Спасибо огромное автору !!!

    ОтветитьУдалить
    Ответы
    1. Спасибо и вам, Павел, что читаете IPetrenko.ru!
      Так сказать, будем и дальше стараться ;)

      Удалить
  5. Анонимный09 июля, 2016 17:07

    Хорошая статейка, вот только для виджета ВК кнопка "Подписаться" не работает на iFrame

    ОтветитьУдалить
    Ответы
    1. Вверху есть сайт с демонстрацией - всё работает.

      Удалить
  6. а есть ли подобные виджеты для интаграмм и одноклассники?

    ОтветитьУдалить
    Ответы
    1. Давид, виджет Инстаграм можно сделать и это довольно просто. Если вам до сих пор это актуально, то я могу сделать его - напишите об этом в ответе.

      Что касается ОК, то здесь посложнее и 100% гарантии я не дам, что сделаю виджет.

      Удалить
  7. Спасибо огромное.

    ОтветитьУдалить
  8. Спасибо автору за труды ,Если можно тоже хотелось бы еще дополнительный виджет для одноклассников

    ОтветитьУдалить
    Ответы
    1. В ближайшее время сделаю инструкцию.
      Вам спасибо за отзыв!

      Удалить