Кнопка подписки на YouTube для блогов на WordPress и Blogger

О том, как поставить форму подписки на канал YouTube, у меня была статья на блоге, посвященном платформе Blogger, и эта форма подходила также и к вордпрессовским блогам. Но, поскольку в интернете всё меняется достаточно быстро, она слегка устарела.

Получив от одной из читательниц вопрос, как быть в изменившихся реалиях, я посмотрела на эти реалии и решила, что надо писать новую статью.

Итак,  если я вхожу на YouTube со своего аккаунта Гугла, то попадаю на свой канал, который имеет такой адрес:

Здесь ninazhuperina – имя (название) канала.

А если теперь в правом меню нажать на строчку «Мой канал», то адрес изменится и будет такой:

А здесь абракадабра UCdxCXERNkeOlSrRpkBlwItA означает ID канала.

Так вот, код старой формы подписки, которую Вы видите на блоге Blogger (в левом гаджете, сверху), работает только с первым адресом.

Этот код я повторю:

Значит, если Вы знаете название своего канала (логин, что то же самое), то меняйте в этом коде ninazhuperina на свое название, и форма подписки у Вас уже готова. Всякие слова и цифры в коде после style= означают некоторые тонкости оформления самой формы: высоту, ширину и рамку (немножко подробнее я написала в конце этого поста). Поэкспериментировав с этими атрибутами, Вы найдете тот вид, который устроит Вас.

Теперь для тех, кто не знает, как добраться до имени своего канала в старом варианте, а также для тех, кто любит минималистский стиль и возможность выбора.

Идем по этой ссылке. Открывшаяся страница «радует» читателей, не знающих английский язык, тем, что она именно на английском. Но общими усилиями сейчас разберемся.

Идем в раздел Configuration options и смотрим, какие варианты оформления кнопки подписки нам предлагаются. Скорее всего, Ваш канал бесплатный, значит, смотрим на левую колонку Standard channels. Полюбовались, выбрали тот вариант, который больше всех понравился, и двигаемся к следующему разделу Configure a button.

Выбираем нужные нам опции:

Channel Name or ID: Здесь мы вписываем в рамочку либо название канала, которое в адресе стоит после user/, либо ту абракадабру, которая является ID канала, она идет после channel/.

Работает и тот вариант, и другой. В этом можно убедиться, слегка подождав, когда кнопка подписки появится в поле предварительного просмотра

Layout: предлагается на выбор 2 варианта: default и full. Разницу между ними Вы можете увидеть на скриншотах:

На них же я продемонстрировала, что работают и имя канала (у меня ninazhuperina), и его ID.

Theme: здесь также на выбор две темы, по умолчанию – светлая, и dark – темная. Правда, темный вариант Вы увидите только если Layout= full.

Subscriber count: здесь выбираете, показывать или не показывать счетчик подписавшихся на Ваш канал. По умолчанию счетчик показывается, hidden – скрыт.

Галочку ниже ставить необязательно. Если она стоит, то при подписке ниже кнопки Вы увидите сообщение о подписке, а при отписке – об этом событии.

Итак, мы получили готовый код, который установим на блог (в виджет блога на WordPress или гаджет блога на Blogger):

Если Вы забыли, как установить виджет (или гаджет), то посмотрите соответствующие статьи (ссылки даны выше).

В мой сайдбар виджет встал вот так, не слишком красиво:

Сейчас мы это исправим.

Окончательный код у меня получился такой:

Исходный блок div я «одела» еще в один блок center и приписала ему стили таким образом, чтобы кнопочка располагалась по центру виджета и обрамлялась зеленой рамочкой. Поясняю значения атрибутов:

height – высота всего блока подписки

width – его ширина

border: 3px solid #49BB92; – означает сплошную рамку шириной 3 пикселя и цвета зеленого (код выбранного цвета можно определить небольшой программой Colormania)

padding-top – верхний отступ внутренней части кнопки от границы

margin: 0 auto; – размещает конструкцию в центре блока по горизонтали.

Теперь виджет выглядит так:

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

Итак, кнопка подписки на видеоканал YouTube готова, что нам и требовалось.

Это тоже интересно: