Кнопка подписки на YouTube для блогов на WordPress и Blogger
О том, как поставить форму подписки на канал YouTube, у меня была статья на блоге, посвященном платформе Blogger, и эта форма подходила также и к вордпрессовским блогам. Но, поскольку в интернете всё меняется достаточно быстро, она слегка устарела.
Получив от одной из читательниц вопрос, как быть в изменившихся реалиях, я посмотрела на эти реалии и решила, что надо писать новую статью.
Итак, если я вхожу на YouTube со своего аккаунта Гугла, то попадаю на свой канал, который имеет такой адрес:
Здесь ninazhuperina – имя (название) канала.
А если теперь в правом меню нажать на строчку «Мой канал», то адрес изменится и будет такой:
А здесь абракадабра UCdxCXERNkeOlSrRpkBlwItA означает ID канала.
Так вот, код старой формы подписки, которую Вы видите на блоге Blogger (в левом гаджете, сверху), работает только с первым адресом.
Этот код я повторю:
|
1
2
|
<iframe id="fr" style="overflow: hidden; height: 100px; width: 295px; border: 3px solid #49BB92;"
src="http://www.youtube.com/subscribe_widget?p=ninazhuperina" rel="nofollow" scrolling="no" frameborder="0"></iframe>
|
Значит, если Вы знаете название своего канала (логин, что то же самое), то меняйте в этом коде ninazhuperina на свое название, и форма подписки у Вас уже готова. Всякие слова и цифры в коде после style= означают некоторые тонкости оформления самой формы: высоту, ширину и рамку (немножко подробнее я написала в конце этого поста). Поэкспериментировав с этими атрибутами, Вы найдете тот вид, который устроит Вас.
Теперь для тех, кто не знает, как добраться до имени своего канала в старом варианте, а также для тех, кто любит минималистский стиль и возможность выбора.
Идем по этой ссылке. Открывшаяся страница «радует» читателей, не знающих английский язык, тем, что она именно на английском. Но общими усилиями сейчас разберемся.
Идем в раздел Configuration options и смотрим, какие варианты оформления кнопки подписки нам предлагаются. Скорее всего, Ваш канал бесплатный, значит, смотрим на левую колонку Standard channels. Полюбовались, выбрали тот вариант, который больше всех понравился, и двигаемся к следующему разделу Configure a button.
Выбираем нужные нам опции:
Channel Name or ID: Здесь мы вписываем в рамочку либо название канала, которое в адресе стоит после user/, либо ту абракадабру, которая является ID канала, она идет после channel/.
Работает и тот вариант, и другой. В этом можно убедиться, слегка подождав, когда кнопка подписки появится в поле предварительного просмотра
Layout: предлагается на выбор 2 варианта: default и full. Разницу между ними Вы можете увидеть на скриншотах:
[563x185]На них же я продемонстрировала, что работают и имя канала (у меня ninazhuperina), и его ID.
Theme: здесь также на выбор две темы, по умолчанию – светлая, и dark – темная. Правда, темный вариант Вы увидите только если Layout= full.
Subscriber count: здесь выбираете, показывать или не показывать счетчик подписавшихся на Ваш канал. По умолчанию счетчик показывается, hidden – скрыт.
Галочку ниже ставить необязательно. Если она стоит, то при подписке ниже кнопки Вы увидите сообщение о подписке, а при отписке – об этом событии.
Итак, мы получили готовый код, который установим на блог (в виджет блога на WordPress или гаджет блога на Blogger):
|
1
2
|
<div class="g-ytsubscribe" data-channelid="UCdxCXERNkeOlSrRpkBlwItA" data-layout="full" data-count="default"></div>
|
Если Вы забыли, как установить виджет (или гаджет), то посмотрите соответствующие статьи (ссылки даны выше).
В мой сайдбар виджет встал вот так, не слишком красиво:
Сейчас мы это исправим.
Окончательный код у меня получился такой:
|
1
2
3
4
|
<center style="height: 58px; width: 245px; border: 3px solid #49BB92; padding-top: 10px; margin: 0 auto;">
<div class="g-ytsubscribe" data-channelid="UCdxCXERNkeOlSrRpkBlwItA" data-layout="full" data-count="default"></div>
</center>
|
Исходный блок div я «одела» еще в один блок center и приписала ему стили таким образом, чтобы кнопочка располагалась по центру виджета и обрамлялась зеленой рамочкой. Поясняю значения атрибутов:
height – высота всего блока подписки
width – его ширина
border: 3px solid #49BB92; – означает сплошную рамку шириной 3 пикселя и цвета зеленого (код выбранного цвета можно определить небольшой программой Colormania)
padding-top – верхний отступ внутренней части кнопки от границы
margin: 0 auto; – размещает конструкцию в центре блока по горизонтали.
Теперь виджет выглядит так:
На момент написания статьи этот виджет можно увидеть в правом сайдбаре, но, вполне возможно, через некоторое время я его уберу.
Итак, кнопка подписки на видеоканал YouTube готова, что нам и требовалось.