- Справочники
- Параметры кнопки «Подписаться»
- Обязательные параметры
- Необязательные параметры
- Динамическое отображение
- Как отображать кнопку с помощью gapi.ytsubscribe.go
- Как отображать кнопку с помощью gapi.ytsubscribe.render
- Красивые кнопки в стиле YouTube
- Как добавить на сайт кнопку подписки на YouTube канал
- Так какие же существуют варианты создания кнопки подписки на канал Ютуб?
- Первый вариант создания кнопки Подписаться с помощью генератора на странице для разработчиков YouTube
- Теперь я более подробно объясню вам, что означает каждая из опций этого генератора кнопки
- Второй (автоматический) вариант создания кнопки Подписаться на YouTube с помощью плагина WP YouTube Subscribe Button
- Третий вариант создания кнопки Подписаться на YouTube с помощью скрипта
Справочники
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Параметры кнопки «Подписаться»
Обязательные параметры
В этом разделе мы объясним, как создать элемент для кнопки «Подписаться». Ниже приведены обязательные и необязательные параметры. С помощью необязательных параметров можно задать макет и фон кнопки, отображение числа подписчиков, а также указать прослушиватель событий для отслеживания нажатий кнопки.
- class – задайте значение g-ytsubscribe . Данный класс определяет элемент как контейнер кнопки подписки и позволяет YouTube динамически изменять ее размер (см. следующий раздел).
- Вы должны указать значение для одного из следующих параметров:
- data-channel – название канала, связанного с кнопкой. Пример значения: GoogleDevelopers .
- data-channelid – идентификатор канала, связанного с кнопкой. Пример значения: UC_x5XG1OV2P6uZZ5FSM9Ttw . Идентификатор канала можно посмотреть в настройках аккаунта YouTube или с помощью APIs Explorer (см. в конце этого документа). Подробнее о работе с идентификаторами каналов.
Необязательные параметры
- data-layout – макет кнопки. Допустимые значения:
- default – на кнопке показывается значок воспроизведения и слово «Подписаться» на языке, который определяется по настройкам аккаунта или местонахождению пользователя.
- full – к стандартному макету добавляется значок и название канала.
Динамическое отображение
В качестве альтернативы стандартному коду из инструмента для конфигурации кнопки можно использовать динамическое отображение Subscribe Button . При этом API JavaScript не обрабатывает для обнаружения кнопок всю иерархию DOM и время на их обновление сокращается.
Как часть Google+ JavaScript API, Subscribe Button поддерживает стандартные методы go и render . Это можно использовать для динамического отображения кнопок. В частности, эти методы можно использовать для отображения кнопки, которая отсутствует на момент запуска события DOM ready , например, на странице, обновляемой с помощью AJAX .
Метод Описание gapi.ytsubscribe.go(
opt_container
)Отображает все кнопки подписки в указанном контейнере. Используйте этот метод, если элементы кнопки «Подписаться», которые вы хотите отобразить, уже существуют. Например, если при отправке запроса AJAX в вашем приложении для Subscribe Button возвращается полный элемент , то отображать кнопку лучше с помощью метода go() . opt_container Элемент HTML, который содержит те кнопки подписки, которые нужно отобразить. Укажите либо идентификатор элемента, либо сам элемент DOM. Если этот параметр не указан, отображаются все кнопки подписки на странице. gapi.ytsubscribe.render(
container ,
parameters
)Отображает Subscribe Button в указанном контейнере. Используйте этот метод, если элемент, который должен содержать Subscribe Button , ещё не существует. container Определяет пустой элемент HTML, в котором будет отображаться Subscribe Button . Укажите либо идентификатор элемента, либо сам элемент DOM. parameters Объект, содержащий параметры кнопки «Подписаться» в виде пар key:value , например, . Как отображать кнопку с помощью gapi.ytsubscribe.go
Ниже дан пример кода с вызовом метода gapi.ytsubscribe.go , который позволяет динамически отобразить кнопку при нажатии на ссылку.
Примечание. Инструмент конфигурации кнопки тоже использует метод go , чтобы отобразить новую кнопку, когда вы меняете параметры или код кнопки.
Как отображать кнопку с помощью gapi.ytsubscribe.render
В приведенном ниже примере показано, как вызвать метод gapi.ytsubscribe.render , чтобы динамически отобразить кнопку при нажатии на ссылку.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2022-11-04 UTC.
Красивые кнопки в стиле YouTube
Всем известен youtube, весьма популярный сервис для просмотра и размещения созданного пользователями видео со всего мира в интернете. Недавно был обновлен интерфейс данного сервиса, в котором появилось много чего нового и интересного. В данном уроке мы рассмотрим как создать идентичные кнопки как на youtube. Такой дизайн кнопок очень выразителен и отлично работает. Состояние по умолчанию не бросается в глаза посетителя, соревнуясь за его внимание с другими достойными элементами интерфейса. Данные кнопки выражают функционал, в отличие от ссылок..
Такие кнопки отрывают выпадающие панели для выбора установок сайта. Для начала мы создаем HTML-разметку кнопок, которая выглядит следующим образом:
Затем ты рассмотри стили для всех вариантов кнопки.
.button < border: 1px solid #DDD; border-radius: 3px; text-shadow: 0 1px 1px white; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 0 1px 1px #fff; font: bold 11px Sans-Serif; padding: 6px 10px; white-space: nowrap; vertical-align: middle; color: #666; background: transparent; cursor: pointer; >.button:hover, .button:focus < border-color: #999; background: -webkit-linear-gradient(top, white, #E0E0E0); background: -moz-linear-gradient(top, white, #E0E0E0); background: -ms-linear-gradient(top, white, #E0E0E0); background: -o-linear-gradient(top, white, #E0E0E0); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; >.button:active
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Как добавить на сайт кнопку подписки на YouTube канал
Приветствую вас!
Этот пост будет очень полезен любому блоггеру, так как я расскажу в нем о том, как добавить на сайт кнопку подписки на YouTube канал . Ваш блог будет продвигаться и развиваться намного лучше, если вы разместите у себя в сайдбаре кнопочку с подпиской. А ваш канал в свою очередь также будет получать дополнительных подписчиков с вашего сайта и помогать ему лучше развиваться. Так что польза с двух сторон очевидна. Сейчас вы узнаете сразу три способа добавления на свой сайт или блог симпатичной кнопочки подписки на ваш канал YouTube.Так какие же существуют варианты создания кнопки подписки на канал Ютуб?
- Вручную, путем генерации html-кода и вставки его в блок ТЕКСТ в разделе ВИДЖЕТЫ . Этот способ подойдет для сайтов на движке WordPress. Если ваш сайт создан на Блоггере или Блогспоте, то в этом случае код вставляется в html-страницу (этот способ самый популярный);
- Автоматический с помощью плагина WordPress « YouTube Subscribe Button»;
- С помощью специального скрипта.
Теперь подробнее о каждом из этих трех способов.
Первый вариант создания кнопки Подписаться с помощью генератора на странице для разработчиков YouTube
Заходите на страницу Инструментов разработчика youtube вот сюда: developers.google.com/youtube/youtube_subscribe_button и прокручиваете страницу вниз до пункта Configure a button, что в переводе на русский язык означает — Создайте кнопку.
Ваша кнопка может быть у вас маленькая (по умолчанию), без фото и счетчика с числом подписчиков.
А если вы настроите себе более функциональную кнопку, ваши читатели сайта будут видеть ваше фото, количество подписчиков и нарядную кнопку на белом или черном фоне.
Все зависит от настроек, какие вы сами зададите для своей будущей кнопки для подписки на ваш канал Ютуб.
Теперь я более подробно объясню вам, что означает каждая из опций этого генератора кнопки
В поле Channel (канал) удаляете надпись GoogleDevelopers и вводите ID своего ютуб канала или имя пользователя.
Если это пользовательский канал с префиксом на конце в виде вашего имени или названия вашей компании, то вводите именно свое имя или название фирмы или компании.
А если у вас обычный адрес (url) канал на Ютуб, но на «хвостике» его будет аббревиатура из 24 знаков латинских букв и цифр. Вот его и вставляйте в первое поле генератора кнопки.
Не вводите ссылку из браузера вашего ютуб канала целиком вместе с «http». В этом случае код кнопки у вас будет работать некорректно и выдавать ошибку! Вводите только ID или имя канала.
Переходим к настройке второй опции, которая называется Layout (расположение или внешний вид).
Из выпадающего списка выбираем вид кнопки. Она может иметь вид по умолчанию, то есть маленького размера, без фото и без счетчика с числом подписчиков со значением default.
Либо превью вашей будущей кнопки может иметь вот такой вид с фото и счетчиком подписчиков на канале:
После этого вы можете выбрать себе два варианта цвета фона кнопки: светлый или темный, воспользовавшись функцией Theme.
Следующая настройка генератора кнопки Subscriber count отвечает за то, будет ли отображать ваша кнопка число ваших подписчиков на канале Ютуб или нет. Это вы уже решайте сами и настраивайте свою кнопку так, как вам нравится.
После того, как вы сделали все настройки вашей будущей кнопки, скопируйте из блока Code (код) справа сгенерированный вами html-код.
А затем вставьте его в текстовый блок в разделе ВИДЖЕТЫ на вашем блоге WordPress.
Разместите свою новую кнопочку для подписки на канал Ютуб в удобном месте в сайдбаре вашего блога.
Не забудьте также написать Заголовок для вашей кнопки.
Хочу заострить ваше внимание еще на одном моменте. Перед тем, как вы будете вставлять код кнопки в виджет в админке своего блога, не забудьте отключить (деактивировать) все плагины безопасности, на время конечно, не навсегда.
У меня в первый раз тоже кнопка сразу не встала, а упорно выдавала ОШИБКУ или invalid.
Потому что мой плагин безопасности WordPress Firewall 2 был включен и не давал мне внедрить в код моего сайта новый код кнопки. Не забывайте об этом!
Второй (автоматический) вариант создания кнопки Подписаться на YouTube с помощью плагина WP YouTube Subscribe Button
Заходите в свою админку блога ВордПресс в раздел ПЛАГИНЫ, затем нажимаете на ДОБАВИТЬ НОВЫЙ
и на странице установки плагинов в поле поиска вводите название этого плагина — YouTube Subscribe Button.
Закачиваете этот плагин себе на сервер, активируете его в Консоли своего блога.
И затем в разделе ВИДЖЕТЫ вставляете в сайдбар уже готовый блок виджета, предварительно его под себя настроив.
Этот способ больше подходит ленивым блоггерам, которые не хотят тратить свое время на генерацию кода для кнопки подписки. А предпочитают просто закачать себе на сервер плагин WordPress, который и создаст им автоматически готовый виджет.
Но такой способ, на мой взгляд, имеет ряд недостатков. Он дает нам меньше функций для создания кнопки подписки на Ютуб.
Так как в готовом блоке YouTube Subscribe Button нет возможности выбора вставки или отключения счетчика подписчиков. А это один из важных элементов виджета.
И еще невозможно отцентровать свой виджет, т.е. разместить кнопку в блоке сайдбара блога по центру.
Третьим недостатком такого способа является дополнительная нагрузка на ваш блог. Так как лишний плагин будет притормаживать работу вашего сайта.
Третий вариант создания кнопки Подписаться на YouTube с помощью скрипта
Этот способ самый легкий, так как кнопка генерируется с помощью специального скрипта.
Все просто, вы копируете из своего например, текстового редактора вот этот код:
В нем вместо моего ID канала Ютуб ElenaKontievskaya вставляете свой.
Затем созданный под вас html-код добавляете в нужное место на вашем сайте или любой вашей вебстраничке.
Не забудьте подписаться на обновления этого блога. А также подписывайтесь на мой бизнес канал и будете всегда в курсе всех видео новинок. 🙂
Более подробно о способах создания кнопки подписки на канал YouTube смотрите в моем видео уроке:
Понравилось мое видео? Не стесняйтесь- ставьте под роликом ЛАЙК (пальчик вверх!) и подписывайтесь на мой канал. Буду вам очень благодарна! 🙂
