Кнопка подписки на 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="https://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. Разницу между ними Вы можете увидеть на скриншотах:
На них же я продемонстрировала, что работают и имя канала (у меня ninazhuperina), и его ID.
Theme: здесь также на выбор две темы, по умолчанию – светлая, и dark – темная. Правда, темный вариант Вы увидите только если Layout= full.
Subscriber count: здесь выбираете, показывать или не показывать счетчик подписавшихся на Ваш канал. По умолчанию счетчик показывается, hidden – скрыт.
Галочку ниже ставить необязательно. Если она стоит, то при подписке ниже кнопки Вы увидите сообщение о подписке, а при отписке – об этом событии.
Итак, мы получили готовый код, который установим на блог (в виджет блога на WordPress или гаджет блога на Blogger):
1 2 |
<script src="http://apis.google.com/js/platform.js"></script> <div class="g-ytsubscribe" data-channelid="UCdxCXERNkeOlSrRpkBlwItA" data-layout="full" data-count="default"></div> |
Если Вы забыли, как установить виджет (или гаджет), то посмотрите соответствующие статьи (ссылки даны выше).
В мой сайдбар виджет встал вот так, не слишком красиво:
Сейчас мы это исправим.
Окончательный код у меня получился такой:
1 2 3 4 |
<script src="http://apis.google.com/js/platform.js"></script> <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 готова, что нам и требовалось.
Комментарии
Нина, спасибо за очередные подсказки!
Но у меня до Ютуба руки все не доходят. А вообще тема интересная.
Дмитрий, у меня самой не доходят. Совсем забросила свой канал. Но вообще-то для бизнеса – сервис очень полезный!
Что ж, от чего-то приходится отказываться, иначе со временем никакой бизнес в радость не будет
Да согласен, время было хватало на все, Как только создам нормальный канал обязательно поставлю себе кнопочку
Вот раскручу свой канал немного, потом сделаю подписку на блоге!) Будет здорово))
А пока добавлю статью в закладки))
Ютуб это золотая жилка, только к ней тоже подход нужен правильный . Я уже начала с ним работать, подписчиков набираю, но до монетизации еще не дошло дело, не хватает подписчиков и просмотров. Радуйте нас новыми интересными статьями по Ютубу.
Всё чётко и понятно – как установить кнопку подписки на канал YouTube. Сама форма мне понравилась, надо попробовать)
Нина, если честно, то сама не знаю, нужна ли мне кнопка подписки на канал в Ютубе. Дело в том, что видео я делаю от случая к случаю. Все собираюсь попробовать делать видео по продуктам компании, партнером которой я являюсь…., но, как говорится, руки не доходят. В любом случае, если будет необходимость в такой кнопке, буду знать, что есть виртуальная подруга, которая поможет с этим вопросом.
С наступающим Рождеством! Душевного равновесия, здоровья и всего, чего самой хочется пусть исполняется.
Лена, я и сама эту кнопку поставила просто, чтобы описать, как сделать подписку (был такой вопрос). Видео у меня все старые, а новые делать нет ни времени, ни желания.
Тебя тоже с наступающим Рождеством! Главное, здоровья, а все остальное приложится
А в Испании сегодня День королей, как они называют, а вообще-то крещенье. У них это праздничный, выходной день и празднуют его наравне с Рождеством.
Нина, спасибо, с твоей помощью только что установила подписку, никак не могла совладать с этим кодом, а статьи в поиске все устаревшие. Кстати, может знаешь как заменить этот кривой ID на красивое имя канала. Пыталась, пыталась, никак не выходит.
Люда, как заменить эту абракадабру на что-то нормальное, пока не знаю, не задавалась этим вопросом. Если узнаю, поделюсь
Для тех, кому необходима кнопка на канал хороший понятный материал, сама пока видео не занимаюсь.
С Рождеством, Нина, здоровья, счастья,успеха, прекрасного настроения!
Нина, спасибо за информацию, хотя канал у меня есть и даже не один, но в последнее время заниматься им просто некогда.
Поздравляю всех гостей Вашего блога с Рождеством, желаю всего самого доброго в жизни!
У меня получилось. Теперь и у меня на блоге стоит данный виджет.
Нина, спасибо и себе поставила данный виджет
Спасибо. Все очень доступно изложено. Получилось установить кнопку на сайт. Только почему-то на главной странице она не отображается, а на следующих есть, но разберусь, спасибо.