Как создать виджет для канала YouTube

Виджет YouTube для сайта. Как это сделать.


28.06.2015 | ПлагиныРубрика: СкриптыРубрика: Создание блога | Теги: , , комментариев 9 | 39854 просмотров | Автор статьи: Александр Рус


Всем привет!

Сегодняшняя статья посвящается тем, кто ищет способ установки виджета канала Youtube  на своем сайте или блоге. Не давно меня тоже интересовал данный вопрос. В интернете я нашел целых 3 способа, как это сделать. Правда два из них некорректно работали, походу вся проблема была в шаблоне моего блоге. Но слава богам, третий способ оказался рабочим. Но если бы и третий способ не заработал, я наверняка придумал бы что-нибудь ещё, ну допустим четвертый способ 🙂

Все варианты описанные в статье — рабочие, проверенно лично мною!

Начну перечислять по порядку.

Способ №1. Как добавить виджет для подписки на канал Youtube при помощи кода.

Примечание. После установки кода, незабудьте сменить ID_канала.

Код виджета выглядит так:

<iframe id="»fr»" hidden="" src="»http://www.youtube.com/subscribe_widget?p=ID_канала″" width="300" height="150" frameborder="»0″" scrolling="»no»"></iframe>

В самом коде, вы можете в ручную отрегулировать высоту виджета (height) и ширину (width). Можно для пущей наглядности, сделать рамку потолще поменяв значение параметра border.

В данном коде, вместо ID_канала, укажите ваше имя канала. Как узнать ID своего канала, я описал чуть ниже -> вот тут.

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

Способ №2. Добавляем виджет через плагин.

На плагин я наткнулся на офф. сайте wordpress. Его можете скачать здесь.
Использование плагина чрезвычайно простое. После установки и активации, он полностью рабочий, настраивать ничего не надо.
Для того, что бы появился виджет на Ваш канал Youtube, необходимо зайти в админ панель -> Виджеты. Там перетаскиваем виджет, он так и называется Youtube в ваш сайдбар. Останется его только настроить по ширине вашего сайдбара и все готово.

Youtube виджет для сайта

Youtube виджет для сайта

В строке Имя пользователя обязательно введите ID вашего канала на Ютубе.

ID можно узнать следующим образом. Щелкаете по своему имени, смотрите скриншот ниже:

Как узнать ID канала Youtube?

Как узнать ID канала Youtube?

Далее в открывшимся окне, в ссылке, будет прописан Ваш ID канала:

Как узнать ID канала на Youtube

Как узнать ID канала на Youtube

Так, разбираемся дальше с виджетом. Вторая строчка «Заголовок«. Здесь пишем все что угодно, так будет называться ваш виджет. Хочу заметить, если вы поставите галочку в настройках «Link Title«, то Ваш загаловок, станет кликабельным, т.е. при клике на него, откроется окно в новой вкладке с вашим каналом Youtube. Рекомендую ставить галочку 🙂

Ну а параметры width и height я думаю все знают, они соответственно отвечают за ширину и высоту виджета.

Способ №3. Устанавливаем виджет с официального  сайта Youtube.

На сайте YOUTUBE прокручиваем страницу в самый низ. Там будем ссылка -> Разработчикам, переходите по ней:

Виджет с офф. сайта.

Виджет с офф. сайта.

В новом окне кликаете по вкладке «Документация и материала«, а там нажимаете «Кнопка подписаться«:

Виджет Youtube с оффициального сайта

Виджет Youtube с оффициального сайта

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

Создаем виджет на офф. сайте Youtube

Создаем кнопку на офф. сайте Youtube

Из всех перечисленных выше способов, рекомендую вариант №2. Лично меня он полностью устроил и заморочек с ним меньше всего 🙂

Материалы по теме:

Как разместить флэш-баннер на сайте
Флэш-баннер установить на свой сайт достаточно просто – он ставится так же, как и простой графический баннер. Требуется выполнить пару несложных действий, с которыми ...
Как добавить форму комментариев Vkontakte
Всем привет! Недавно, мне поступил заказ от клиента, он хотел, что бы я на его блоге разместил другую форму комментариев. От предложенного мною плагина ...
Что такое баннерная слепота и чем она так опасна?
Этот термин появился всего несколько десятилетий назад. С развитием интернета появилось огромное количество новых рекламных форматов, которые поначалу работали весьма эффективно. Однако с течением ...
Как сделать кнопку «Вверх» на WordPress. Плагин Dynamic «To Top».
Добрый вечер! Развитие моего блога продолжается. И сегодня, он был дополнен не только очередным постом, но и довольно интересной примочкой в виде кнопки "Наверх". Раньше я ...
2. Регистрация домена.
Итак, в прошлом уроке я описывал, с чего надо начинать создание сайта. Если вы читаете эту статью, значит у вас уже есть хостинг и ...

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.
1
Максад Исаев http://www.zarabotokvseti.net/

Этот коммент можно удалить! Дружеский совет: Уменьшите ваши кнопки соцсетей или вставьте их горизонтально после поста, они закрывают часть контента и поэтому очень не удобно читать!

Автор2
Александр Рус http://myworkpro.ru/

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

3
Максад Исаев http://www.zarabotokvseti.net/

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

Автор4
Александр Рус http://myworkpro.ru/

Канала как такового у меня нет, но есть на форуме БКС)

5
Хребтов Александр http://my-big-family.com/

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

Как дойдут руки, буду знать где искать!

Автор6
Александр Рус (участник БКС) http://myworkpro.ru

Здравствуйте Роман! У меня такая же беда была. Я там повозился, плагины попробовал устанавливал для корректной работы кодов в сайдбаре, потом пробовал другие способы из перечисленных в статье. Так вот не помню точно, что я сделал, но стоило просто немного покопаться, по настраивать, как всё стало работать. А вот на другом сайт зашел, там такая же беда, работал только 1 способ из перечисленных, но там уже возиться не стал.

Автор7
Александр Рус http://myworkpro.ru/

У всех по разному, попробуйте Роман.

8
Роман Рей http://tryomera.ru

Надо кстати будет способ 3 попробовать, ютубовское то родное должно хорошо работать)

9
Роман Рей http://tryomera.ru

У меня шаблон не первый не второй способ не поддерживает. Выводится какая-то абракадабра вместо окна Ютуб

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.