Добавляем виджет Google Plus и YouTube (с эффектом при наведении)

Добавляем виджет Google Plus и YouTube (с эффектом при наведении)
Приветствую вас, дорогие друзья!

Сегодня, спустя более чем один год, я представляю вашему вниманию вторую часть инструкции для установки крутого выдвижного виджета. В 2015 году вы ознакомились с туториалом для социальных сетей Вконтакте и Фейсбук, а сегодня пришла очередь Гугл+ и видехостинга Ютуб!

1. Демонастрация виджета (в новом окне - слева)
2. Установка виджета для Blogger
3. Виджет сообщества Google Plus
4. Виджет канала на YouTube

Установка виджета для 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> в поле для поиска и вставляем перед ним код виджета сообщества ВК или Фейсбука. Код нужно скопировать ниже ;)

Виджет сообщества Google+

Выдвижной виджет сообщества IPetrenko.ru в Google Plus
<style type="text/css">
#boxgpip {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.gpbadgeip {
border-color: #000;
background-color: #DB4437;
display: block;
height: 160px;
top: 50%;
margin-top: -75px;
position: absolute;
right: -47px;
width: 47px;
background-image: url(&quot;http://1.bp.blogspot.com/-9cEkyXq0yjQ/VqNm1QqKNBI/AAAAAAAALFA/forMgBj_R4c/s1600/vertical-right-gp.png&quot;);
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
</style>

<script type='text/javascript'>
/*<![CDATA[*/
    (function(w2b){
w2b(document).ready(function(){
 var $dur = "medium"; // Duration of Animation
 w2b("#boxgpip").css({left: -250, "top" : 300 })
w2b("#boxgpip").hover(function () {
w2b(this).stop().animate({
left: 0}, $dur); }, 
function () {
w2b(this).stop().animate({
left: -250 }, $dur); });
w2b("#boxgpip").show();
});
})(jQuery);
/*]]>*/
</script>

<div id='boxgpip' style='display:none;'>
<div class='gpbadgeip'/>
 &lt;iframe src=&quot;https://apis.google.com/u/0/_/widget/render/page?usegapi=1&amp;width=273&amp;href=%2F%2Fplus.google.com%2Fu%2F0%2F108535419717183244374&amp;layout=landscape&amp;showcoverphoto=1&amp;showtagline=1&amp;hl=ru&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; margin-top:50px; width:250px;&quot; allowtransparency=&quot;true&quot;&gt;&lt;/iframe&gt;
</div>

А теперь максимальная внимательность - в этом виджете недостаточно просто изменить цифровой идентификатор, который выделенный красным. Виджет сделан разработчиками таким образом, что снала он определяет какой тип идентифицированой страницы - личная или страница бренда.

То есть, для личной страницы нужно заменить выделенный курсивом участок кода сверху и заменить на следующий:
https://apis.google.com/u/0/_/widget/render/person?usegapi=1&href=%2F%2Fplus.google.com%2Fu%2F0%2F101980614701165291569&showcoverphoto=1&showtagline=1&width=300&hl=ru

Если у вас страница бренда (то есть, вашего сайта), то код будет такой:
https://apis.google.com/u/0/_/widget/render/page?usegapi=1&href=%2F%2Fplus.google.com%2Fu%2F0%2F108535419717183244374&showcoverphoto=1&showtagline=1&width=300&hl=ru

Не забудьте изменить идентификатор на свой! 

Кстати, о том  как получить виджет своей страницы в Гугл+ можно почитать в материале: Как добавить виджет Google Plus на свой сайт?.

Виджет подписки на канал в YouTube

Выдвижной виджет подписки на мой канал в Ютубе
<style type="text/css">
#boxytip {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.ytbadgeip {
border-color: #000;
background-color: #fff;
display: block;
height: 160px;
top: 50%;
margin-top: -75px;
position: absolute;
right: -47px;
width: 47px;
background-image: url('http://1.bp.blogspot.com/-JJDZhaEnwMQ/VqNc6UWTrSI/AAAAAAAALEs/i7G5pvKVJMw/s1600/vertical-left-yt.png');
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
</style>

<script type='text/javascript'>
/*<![CDATA[*/
    (function(w1b){
w1b(document).ready(function(){
 var $dur = "medium"; // Duration of Animation
 w1b("#boxytip").css({left: -200, "top" : 100 })
w1b("#boxytip").hover(function () {
w1b(this).stop().animate({
left: 0}, $dur); }, 
function () {
w1b(this).stop().animate({
left: -200 }, $dur); });
w1b("#boxytip").show();
});
})(jQuery);
/*]]>*/
</script>

<div id='boxytip' style='display:none;'>
<div class='ytbadgeip'/>
<p style='margin-top:50px; margin-left: 7px;'><b>Подпишись на наш канал!</b></p>
&lt;iframe src=&quot;https://www.youtube.com/subscribe_embed?usegapi=1&amp;count=default&amp;layout=full&amp;channel=ThePetruhin&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; width:200px; height:80px;  margin-left: 7px;&quot; allowtransparency=&quot;true&quot;&gt;&lt;/iframe&gt;
</div>

Здесь тоже нужно заменить мой идентификатор на ваш.

Нменого лирики. Называть свой канал на YouTube следует не очень длинным названием ибо если оно более 50 символов, то могу возникнуть вопросы с корректным отображением виджета. Будьте лаконичны!

На этом всё, если возникнут вопросы пишите в комментарии. До встречи  


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

2 коммент. :

  1. Игорь, у меня не получилось (((( . Код виджета канала вставлено перед /body - и ничего не отобрзилось.... Про переименование названия канала понятно что это для нас посыл, но в нашем случае "из песни слов не выкинешь"....

    ОтветитьУдалить
    Ответы
    1. Тогда нужно просто сделать картинку 150рх на 200рх (примерно), где будет надпись на подобии: "Наш канал в Ютубе". И эта картинка будет ссылаться на канал. По другому будет обрезаться текст.

      Удалить