Ссылка подписаться на Ютуб в виде кнопки

Здравствуйте, друзья! В этой статье вы найдете ответы на вопросы: Как сделать ссылку подписаться на ютуб и как делается кнопка подписаться на Ютуб. После прочтения Вы будете уметь делать три оригинальных варианта ссылок и кнопок. Так что читайте!

ссылка подписаться на видеоканал

Сразу скажу, что статья получилась довольно большая. Так что наберитесь терпения. Даже в оглавлении к статье видно, что вопросов будет довольно много, но я постарался максимально просто осветить каждый.

Итак, поехали!

Простое оформление ссылкой

Это действительно самый простой способ, для реализации которого потребуется дополнить адрес вашего видеоканала «секретной добавкой»:

?sub_confirmation=1

Итоговая ссылка при этом будет выглядеть вот так

адрес_канала?sub_confirmation=1

Простая ссылка подписаться на видеоканал
Синим подсвечено дополнение к адресу видеоканала

Вы можете размещать эту ссылку в социальных сетях, делать ее на сайте анкорной (скрытой за надписью или визуальным элементом). И в любом случае при клике по ней пользователь будет переходить на страницу вашего видеоканала.

При этом ему сразу будет предложена подписка на канал.

Окно видеоканала с предложением подписаться
Окно видеоканала с предложением подписаться

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

Кнопка Подписаться в конструкторе YouTube

Работа с конструктором кнопки

Ютубовский конструктор кнопки Подписаться Вы сможете найти здесь. Он очень простой для понимания:

Конструктор кнопки подписаться

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

Название или ID канала — это цифровое окончание в ссылке его адреса.

Идентификатор видео канала

Если вы вставите в это окно ссылку целиком или предварительно не удалите в окне надпись GoogleDevelopers, то конструктор выдаст ошибку!

В строке Макет выбирают вид представления будущей кнопки:

Макет кнопки подписаться

Строку Фон можно не трогать.

фон кнопки подписаться на видеоканал

По умолчанию кнопка генерируется на прозрачном фоне, но, если выбрать вкладку темный, то получится белая кнопка на темно сером фоне. Бр-р-р, как некрасиво! Впрочем, сами потом посмотрите.

Зачем нужна строка Число подписчиков объяснять не буду. Понятно, что цифирка или видна, или нет.

Собственно в показе количества подписчиков и кроется изюминка всей привлекательность кнопки.
Лично я не вижу других преимуществ этого способа даже перед обычной картинкой или кнопкой.

Максимальное количество отображаемых подписчиков — 999.
А дальше просто добавляется плюсик и наберите на своем канале хоть тясячу и одного, хоть миллион фанатов, на кнопке все-равно будет отображаться значение 999+.

После того, как Вы пробежитесь по всем составляющим конструктора нужно скопировать полученный код из одноименного окна.

Готовый код кнопки подписаться

Можете сохранить его в Блокноте, а можете сразу пройти на свой сайт и вставить в нужное место. Он будет работать в любой статье и в любом месте сайдбара.


Вставка кнопки на сайт

Соответственно для вставки в сайдбар нужно использовать HTML виджет, а при вставке в статью — блок HTML-код из арсенала редактора Gutenberg или режим вставки кода в редакторе TinyMCE.

html-блок редактор Гутенберг

Учтите, что после вставки кода изображение кнопки в итоге будет расположено слева.

Так и должно быть!
Потому что по умолчанию HTML выравнивает всё содержимое по левому верхнему углу блока. Поэтому для выравнивания кнопки посередине заключите код в теги <center></center>.

простое выравнивание кнопки посередине

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

Чтобы не парится всякий раз с генерацией кода и не искать его по документам на своем компьютере, самое оптимальное — добавить полученный код в Мои блоки редактора Gutenberg.

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

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

Оформление виджета

Стилизованное оформление

Общие знания

Оформление начнем с понимания его конструкции.

структура
Структура виджета

Наш виджет будет состоять из трех основных блоков:

  • блок призыва (подписаться или смотреть другие видео)
  • блок черты (необязательный элемент красивости)
  • блок непосредственно кнопки

Все три блока упакованы в один общий (внешний) блок.

Внимание!
В конце этой части статьи Вы сможете скопировать готовый код.

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

Каждый из них для простоты понимания и последующей настройки мы можем поместить в универсальные контейнеры <div> и тогда их можно прописывать таком виде:

<div>определенный блок</div>

Контейнеры <div> хороши тем, что могут становится блоками, если им задавать определенные параметры (ширину, высоту, границы…).

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

<div>начало внешнего блока

<div>текст призыва</div>

<div>черта</div>

<div>кнопка</div>

окончание внешнего блока</div>

На деле все внутренние блоки разные по типу. Так, текст призыва — это текстовый блок, черта — сама по себе черта, а кнопка — вообще составной элемент. И из них по большому счету только кнопка требует, чтобы ее поместили в контейнер <div>.

Остальные блоки можно представить в коде в соответствии с их спецификацией. И тогда итоговая структура будет выглядеть так:

<div>начало внешнего блока

<p>текст призыва</p>

<hr>черта

<div>кнопка</div>

окончание внешнего блока</div>

Обратите внимание, что для черты прописывается только один тег <hr>.

Эти обозначения будут для вас компасом для редактирования кода виджета.

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


Позиционирование будем делать путем выравнивания по центру и определения внешних (margin) и внутренних (padding) отступов:

виды отступов
Виды отступов и границ
  • Выравнивание по центру непосредственно в коде блоки кнопки прописывается выражением margin-left:auto; margin-right:auto; Его удалять нельзя.
  • Расстояние по вертикали между блоками задается значениями внешних отступов margin-top и margin-bottom.
  • Специфичные настройки (могут потребоваться для позиционирования текста призыва) задаем через padding-top и padding-bottom.
  • Отступы margin-top и margin-bottom у внешнего блока позволяют выровнять весь блок виджета относительно других блоков на странице.

Оформление призыва

Для призыва будем использовать текстовый блок, который обозначается тегами <p></p>

<p>Текст призыва</p>

Выравнивать текст по центру будем параметром text-align:center;
Но это выравнивание будем прописывать непосредственно для стилей внешнего блока. Тем самым мы сэкономим немного места и минимизируем код виджета в целом.

Оформление текста, как и других блоков, мы будем производить через стили тега <p>, прописывая его свойства через точку с запятой:

<p style=»свойство1;свойство2;…;свойство…;«>Призыв</p>

Первым свойством в стилях зададим параметры самого текста:

Ссылка подписаться на Ютуб в виде кнопки
Описание свойств шрифта надписи с призывом

В записи свойств шрифта Вы можете менять все параметры, обязательно оставляя фразу sans-serif, прописанную через запятую после названия шрифта .

К сожалению цвет придется задать отдельно через атрибут color, например: color: #f80f30;

Его вы также можете выбрать исходя из своего дизайна.

Текстовому блоку также можно задавать границы (border).

При задании границы не стоит использовать черту.
Вы должны выбрать что-то одно.
В конце вы сможете скопировать 2 варианта кода виджета: только с границей или только с чертой.

В данном случае используется нижняя граница с перечислением параметров один за другим:

border-bottom: тип_линии толщина_линии цвет;

Типы линии выбираете на свой вкус, но в моем коде будет показана сплошная:
dotted — линия из набора точек
dashed — пунктирная линия
solid — сплошная линия.
double — двойная линия
groove — вдавленная линия
ridge — рельефная линии.

Толщину линии указываете в пикселях (px), например, 1px. Цвет просто указываете в виде #f80f30 (атрибут color в данном случае не используется).

Итоговая запись фрагмента границы в общем коде призыва будет выглядеть, например, так:

border-bottom: solid 1px #f80f30;

Поскольку речь идет об отступе нижней границы, то отступ границы будем задавать через cвойство padding-bottom. Его величину задаем через пиксели:

padding-bottom: 18px;

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

Черта в виджете отображается с заданной шириной, а нижняя граница, если ею дополнить код призыва, будет отображаться на всю допустимую ширину блока (экрана в мобильном).
В этом их принципиальное отличие!

Код текстового призыва в варианте без границы будет примерно таким:

<p style="font:italic 700 20px/30px ruda,sans-serif; color:#f80f30; ">Призыв подписаться</p>

Запись кода текстового призыва с границей:

<p style="font:italic 700 20px/30px ruda,sans-serif; color:#f80f30; border-bottom: solid 1px #f80f30; padding-bottom: 18px; ">Призыв подписаться</p>

Данный способ оформления текста позволяет с легкостью сделать текст разным цветом. Для этого достаточно заключить изменяемую часть текста в теги <span></span> с назначением другого цвета.

Схематично задание разных цветов можно представить так:

<p style=»…;цвет1;…;»>Текст <span styleцвет2;«>призыва</span></p>

Полная запись варианта кода без обозначения нижней границы выглядит вот так:

<p style="font:italic 700 20px/30px ruda,sans-serif; color:#2c2c2c; ">Призыв <span style="color:#f80f30;">подписаться</p>

Черта

Её исполнение разберем сразу на готовом коде. Так будет проще!

<hr style="display: block; border: solid 1px #f80f30; margin-top:10px; margin-bottom:10px; width:200px;">

Из незнакомых элементов в коде появляется свойство display: block;, предписывающее браузеру рассматривать нашу черту, как блочный элемент. Это обязательный элемент, не подлежащий изменению.

Также новым элементом является атрибут ширины width, значение которого в примере выше показано чуть большим, чем будет задана ширина кнопки. Вы можете изменять ширину на свое усмотрение.

Непосредственное представление черты задано через свойство border, в котором вы можете вносить аналогичные изменения, которые мы разбирали для border-bottom, при оформлении текста призыва.

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


Блок кнопки Подписаться

Высота и ширина кнопки, а также предустановленные значения внутренних отступов заданы самим конструктором. В варианте полного отображения (с логотипом и названием) мы также не сможем никак повлиять на взаимное расположение всех элементов между собой.

Давайте сразу определимся какими параметрами мы будем модернизировать штатную кнопку.

параметры кнопки подписаться на видеоканал

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

Стандартная ширина кнопки близка к 190px, а в готовом коде она будет задана значением width:192px. Эта наиболее оптимальная ширина относительно которой будем строить внутренние отступы.

Посредством отступов мы зададим размер фоновому полю кнопки и в дальнейшем нарисуем рамку вокруг него.

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

Границы и отступы
Последовательность задания отступов

Проще запомнить эту последовательность сопоставив ее с часами: начало на 12 часах, далее 3 часа, 6 часов и 9 часов. Так вы точно не запутаетесь в коде отступов. Фрагмент с отступами будет таким:

padding:10px 2px 2px 2px;

Фон просто задается указанием цвета для свойства background-color:

background-color:#eaf3f6;

Рамка на кнопке задается также последовательной прописью значений:

border:1px solid #4d7d97;

Вы можете задать скругление углам кнопки через свойство border-radius, указав значение от 1 до 5px. Больше делать не стоит! В коде кнопки будет прописано значение border-radius:0px;

Если вы не будете задавать радиусы по углам, то этот участок кода можно смело удалить, потому что по умолчанию в html радиус итак равен нулю.

<div style="margin-left:auto; margin-right:auto; width:192px; background-color:#eaf3f6;padding:10px 2px 2px 2px; border:1px solid #4d7d97; border-radius:0px; box-shadow: 0 20px 20px -20px #333;">Код, скопированный из конструктора</div>

В этом коде также прописана тень через свойство box-shadow. Я не буду расписывать что и зачем стоит в значениях. В готовом коде они будут прописаны аналогичными, как и в моем виджете. А видоизменить параметры под себя вы с легкостью сможете, например, вот в этом онлайн-конструкторе теней.


Готовые для копирования коды кнопки

Наконец-то мы добрались до заключительного этапа!

Ниже приведены обещанные коды кнопок. Скопируйте нужный в текстовый документ и вставьте вместо надписи идентификатор_канала ID своего видеоканала. А уже после этого можете добавлять код на сайт.

Код кнопки со сплошным подчеркиванием

Подписаться на мой видеоканал

<div style="text-align:center;margin-top:35px;margin-bottom:30px;">

<p style="font:italic 700 20px/30px ruda,sans-serif;color:#e41d1a;padding-bottom:18px;border-bottom:2px solid #4d7d97;">Подписаться <span style="color:#444444;">на мой видеоканал</span></p>

<div style="margin-left:auto;margin-right:auto;margin-top:25px;width:192px;background-color:#eaf3f6;padding:10px 2px 2px 2px;border:1px solid #4d7d97;border-radius:0px;box-shadow: 0 20px 20px -20px #333333;">

<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="идентификатор_канала" data-layout="full" data-count="default"></div>
</div></div>

Код кнопки с чертой

Подписаться на мой видеоканал



<div style="text-align:center;margin-top:35px;margin-bottom:30px;">

<p style="font:italic 700 20px/30px ruda,sans-serif;color:#e41d1a;">Подписаться <span style="color:#444444;">на мой видеоканал</span></p>

<hr style="display: block;width:200px;border: solid 1px #4d7d97;margin-top:20px;margin-bottom:40px;">

<div style="margin-left:auto;margin-right:auto;margin-top:25px;width:192px;background-color:#eaf3f6;padding:10px 2px 2px 2px;border:1px solid #4d7d97;border-radius:0px; box-shadow: 0 20px 20px -20px #333333;">

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="идентификатор_канала" data-layout="full" data-count="default"></div>
</div></div>

Как я уже писал во второй части статьи, после всех настроек можно сохранить полученный код в Мои блоки редактора Гутенберг, чтобы потом при написании статей вставлять его одним движением в нужное место.


На посошок

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

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

Потом, когда на кнопке высветились 999+ я поймал себя на чувстве гордости за свой труд. И уверен, что кое-кого из моих зрителей привлекла интрига: сколько же на самом деле у меня подписчиков?

А теперь мне снова хочется, чтобы и у меня и у читателей моего сайта было представление о положении дел на моем видеоканале. Так может быть периодически уточнять эти данные?

Как вам, например, такое представление кнопки?

Подписаться на мой видеоканал


Перейти и подписаться

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

Если вы добавили код виджета в Мои блоки, то приятным бонусом будет то, что когда вы поменяете картинку в коде и снова пересохраните, то автоматически обновятся все вставленные на сайте виджеты подписок.

То есть посетитель в любой статье сможет увидеть реальные данные. Как вам такой финт?

Пишите в комментариях что вы думаете на эту тему. Насколько вообще доступна статья для понимания?

Сергей Почечуев

Оцените статью
Не стесняйтесь, черкните пару строк!

  1. Анна

    Спасибо! Для меня немного сложно с пояснениями, но готовый код все трудности оставляет позади 🙂

    Ответить
    1. Сергей Почечуев автор

      Согласен, что просто так в коде можно и не разобраться, но я постарался сделать всё как можно проще — через пояснения для дальнейшего апгрейда готового кода.

      Ответить
Примечание

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