Как изменить количество подписчиков через код страницы

Цель: научиться вставлять форму подписки от канала ютуб к себе на блог или сайт.

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

Что влечет за собой большее количество просмотров, комментариев, лайков. К тому же — это «очень удобно для пользователя», он заходит на сайт, видит эту форму и может подписаться, не переходя на сайт.

Как по мне, то такая форма будет полезна только в том случае, если вы уже знаете человека и видите у него форму подписки, можно и подписаться не глядя. А в основном, не знаю, как вы, но я сначала перехожу на канал и просматриваю его, какие видео есть, как он оформлен, что автор вписал в поле «о канале» и только если он мне понравился – подписываюсь.

Даже интуитивно, если видишь значок YouTube, с надписью «Наш канал на ЮТУБ», то возникает желание перейти и посмотреть, что же это за канал и что там есть. В отличие от формы подписки. Поэтому, я и отказался от самой формы. А там решать вам, что ставить, форму подписки или значок Ютуб.

Форма подписки на канал youtube

Если у вас еще нет своего канала, то ознакомьтесь со статьей, как зарегистрироваться на ютуб и создать свой первый канал. Если он у вас уже есть, то заходите на него и кидайте взгляд на адресную строку. Как видите, там очень длинный и не понятный адрес такого вида: 52CfGR2KU8k2HYpMi0hxTg. Его можно поменять, а можно и не менять. Но я рекомендую сменить, так как пользователям легче будет запомнить ваш адрес. Но здесь ютуб в последнее время ввел некоторые правила.

Примечание!

Чтобы поменять адрес канала, нужно иметь не менее 500 подписчиков, канал должен существовать более 30 дней, в качестве аватарки должно стоять ваше фото и канал должен быть оформлен. Если ваш канал соответствует всем этим правилам, то заходите в настройки ютуб, в раздел дополнительно.

И здесь есть идентификатор пользователя, а напротив его должна быть кнопочка «Создать пользовательский URL», введите желаемое имя канала.

У меня получился следующий адрес.

После того, как адрес настроен, вам нужен код формы, вот он:

<iframe id="fr" style="overflow: hidden; height: 105px; width: 270px; border: 0pt none;" src="www.youtube.com/subscribe_widget?p=mikhed1991" width="300" height="150" frameborder="0" scrolling="no"></iframe>

Данный код можно подстраивать под свой шаблон. Можно указывать высоту, ширину (height: 105px; width: 270px;), задать рамку, за рамку отвечает параметр Border.

И самое главное, что нужно сделать в этой форме, так это сменить адрес канала, мой адрес выглядит так: http://www.youtube.com/subscribe_widget?p=mikhed1991. Вам нужно сменить значение после равно (=). Код вставляйте туда, где хотите видеть форму подписки для канала ютуб.

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

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

К этой статье рекомендую прочесть еще это:

Что такое ютуб, каков его потенциал?

Как легко и быстро вставить видео с YouTube к себе на сайт при помощи плагина?

Как скачать видио с ютуб к себе на компьютер и вытянуть музыку с видео?

P.S Если у вас возникли трудности со вставкой формы на сайт — описывайте свои проблемы в комментариях, будем решать. Если нужно дополнительно видео-урок, так же отписывайте в комментариях — сделаем.

С Уважением, Михед Александр.

Как вывести количество подписчиков (участников) группы, страницы или события из вконтакте

Что мне очень понравилось, так это то, что для вывода количества подписчиков не требуется использовать PHP и cURL, потому что такие вещи обычно значительно снижают скорость загрузки страницы.

Вот готовый код. Если вы хорошо разбираетесь в jQuery, то статью можете дальше не читать.

jQuery(function($){
	$.ajax({  
		url: 'http://api.vk.com/method/groups.getById?gid=27541941&fields=members_count',  
		dataType: "jsonp",  
		success:function(e){ 
			$('#vkontakte_count').html(e.response[0].members_count) 
		}  
	}); 
});

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

Шаг 1. HTML-элемент, в котором будет выводиться количество подписчиков сообщества

Это будет примерно вот такой код:

<span id="vkontakte_count">3450</span>

Вставьте его в то место сайта, где хотите вывести количество подписчиков.

Причем, это может быть любой HTML-элемент, например <div>, <span> или какой-то другой, тут важен только ID элемента (атрибут id).

Внутри лучше указать примерную цифру количества подписчиков — она будет отображаться, если по каким-то причинам API вконтакте будет недоступно.

Шаг 2. Как узнать ID группы, страницы или события вконтакте?

Это раньше в качестве URL всегда использовались id — как для групп, так и для пользователей. Теперь же, когда администраторы могут сами задавать любой (свободный) URL, всё стало немного сложнее.

Для того, чтобы узнать ID, кликните по ссылке «Рекламировать сообщество» и у вас откроется страница, ссылка которой будет http://vk.com/adscreate?page_id=6301158, где page_id и есть ID вашей группы или страницы.

Если же сообщество вам не принадлежит, то его ID можно узнать в исходном коде страницы:

Вообще, в исходном HTML-коде он встречается много где, если поискать, то вы точно его найдете.

Шаг 3. jQuery

Подробнее про подключение jQuery на сайт написано здесь.

Шаг 4. Запрос к API вконтакте

Вы можете вставить этот код прямо в HTML страницы как есть, либо в какой-нибудь js-файл, предварительно удалив теги script (в обоих случаях обязательно уже после того, как подключится jQuery).

<script>
	jQuery(function($){
		$.ajax({  
			url: 'http://api.vk.com/method/groups.getById?gid=65762432&fields=members_count', // вместо 65762432 указываем свой ID 
			dataType: "jsonp", // тип получаемых данных
			success:function(e){ 
				$('#vkontakte_count').html(e.response[0].members_count) // выводим получаемый результат
			}  
		}); 
	});
</script>

И ещё кое-что.

Используя данный запрос к API, вы также можете получить и другую информацию о сообществе, для этого в параметре запроса fields надо указать:

city

ID города сообщества. Возвращается 0, если город в информации о сообществе не указан.

country

ID страны сообщества.

description

Описание сообщества.

counters

Возвращает количество фотографий в альбомах (photos), альбомов (albums), аудиозаписей (audios), видеозаписей (videos), тем (topics), документов (docs).

start_date и end_date

Время начала и окончания встречи (для групп и страниц не используется) в формате unixtime.

can_post

Если пользователь может писать на стене, возвращает 1, иначе 0.

В запросе можно указывать несколько значений параметра fields через запятую.

Ранее я предлагал вашему вниманию статьи о том, как с помощью небольших функций, не прибегая к плагинам, вывести на WordPress-сайте текстом количество RSS-подписчиков по данным сервиса FeedBurner и количество Twitter-фолловеров.

В сегодняшнем посте я дополню данные статьи информацией о том, как красиво оформить эти счетчики с помощью технологии CSS.

Примеры

• Живой пример счетчиков вы можете наблюдать прямо на моем блоге в сайдбаре.
• Я подготовил примеры на отдельной странице с разными вариантами оформления счетчика.

HTML + PHP код

Код, который необходимо вставить в WordPress-шаблон в место вывода счетчика:

• для RSS-счетчика:

  <div class="counter"><?php feedburner_counter('название_вашего_фида'); ?></div>

• для Twitter-счетчика:

  <div class="counter"><?php twitter_followers('имя_вашего_аккаунта'); ?></div>

CSS-код

Теперь займемся непосредственно оформлением с помощью CSS. Его я делал по подобию стандартного счетчика FeedBurner, который отображается в виде картинки.

Рассмотрим код на примере коричневого счетчика (.brown). Основные стили выглядят следующим образом:

.counter {
	display: inline-block;
	overflow: hidden;
	padding: 0 5px 0 0;
	margin: 0 15px 15px 0;
	font: bold 11px/22px Arial, Tahoma, sans-serif;
	*display: inline; /* IE6, IE7 */
	*zoom: 1; /* IE6, IE7 */

	color: #FFF;
	background: #CA0000;
  border: 1px solid #B90000;
}
.counter .count {
	float: left;
	padding: 0 3px;
	margin: 1px 6px 0 1px;
  font-size: 13px;
	height: 17px;
	line-height: 18px;

	background: #E37979;
  border: 1px solid #B90000;
  border-right-color: #ECC0BD;
  border-bottom-color: #ECC0BD;
}

Пустой строкой я отделил стили, который отвечают за цветового оформление счетчика. У нас получается вот такой счетчик:

Для придания счетчику красивости и объемности добавим легкую тень и закругления углов с помощью соответствующих CSS3-свойств:

.counter {
	border-radius: 3px;
	box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
}

И конечный результат будет выглядеть следующим образом:

Как видите, мы написали совсем немного CSS-стилей и получили приятный глазу счетчик.

Что на счет браузеров?

Конечно же, всю гламурность, т.е. закругления и тень, можно будет увидеть только в современных браузерах, в список которых не попадают версии Internet Explorer ниже 9-й. В них вы увидите лишь плоский прямоугольник.

* * *

Вам нужно провести полный анализ сайта, проанализировать его внутренние и внешние ссылки, посмотреть на сайта глазами поискового робота? Эти и множество других полезных инструментов доступны бесплатно на сайте для веб-мастеров WebMasta.org.

столкнулась с проблемой. Не получатся динамически обновлять количество подписчиков (без перезагрузки страницы). Я только учусь, если есть другой вариант проще, можете подсказать пожалуйста

Так же есть кнопка, надпись которой меняется в зависимости от статуса (подписан/отписан)

    <div class="row justify-content-center">
      <div class="col-3 text-center numb">{{$followCount}}</div>
      <div class="col-3 text-center numb">{{$followingCount}}</div>
    </div>

    <example-component follow-count="{{$followCount}}" user-id='{{ $user->id }}' follow='{{ $follow }}'></example-component>

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

class ProfileController extends Controller
{
  public function index(User $user)
  {
      $followCount=$user->profile->followers->count();
      $followingCount=$user->following->count();
      return view('profiles.index', compact('user', 'follow', 'postCount', 'followCount', 'followingCount'));
  }
}

vue

<template>
    <div class="container">
          <div class="col-12 text-center"><button class="btn btn-primary" @click="follows" v-text="buttonText"></button></div>
    </div>
</template>

<script>
    export default {
        props: ['userId', 'follow'],
        data: function () {
            return {
                status: this.follow,


            }
        },
        methods: {
            follows() {
                axios.post('/follow/' + this.userId)
                    .then(response => {
                        this.status =! this.status;
                    });
            }
        },
        computed: {
            buttonText() {
                return (this.status) ? 'Folgen' : 'Abonniert';
            },
        }
    }
</script>

так, у меня получаются следующие файлы в resources/js/components
ExampleComponent.vue

<template>
    <div class="container">
          <div class="col-12 text-center"><button class="btn btn-primary" @click="follows" v-text="buttonText"></button></div>
    </div>
</template>

<script>
    import FollowBus from 'FollowBus'
    export default {
        props: ['userId', 'follow', 'followCount'],
        data: function () {
            return {
                status: this.follow,

            }
        },
        mounded: function() {
         // отслеживаем status
         this.$watch('status', (newStatus, oldStatus) => {
            FollowBus.$emit('follow_change', newStatus)
         })
        },
        methods: {
            follows() {
                axios.post('/follow/' + this.userId)
                    .then(response => {
                        this.status =! this.status;
                        console.log(this.followCount);
                    });


            }
        },
        computed: {
            buttonText() {
                return (this.status) ? 'Abonniert' : 'Folgen';
            },
        }
    }
</script>

FollowCounter.vue

<template>
 <div class="col-3 text-center numb">{{followCount}}</div>
</template>
<script>
   import FollowBus from 'FollowBus'

   export default {
      data: function () {
         return {
            count: 0
         }
      },
      mounted: function () {
        // подписываемся на событие
        FollowBus.$on('follow_change', (status) => {
           // подгрузка при возникновении события
           this.loadCounters()
        })

        // подгрузка при монтировании
        this.loadCounters()
      },
      methods: {
         loadCounters: function () {
            axios.get(url).then((response) => {
              // извлекаем данные из response.data
              // this.count =
            })
         }
      }
  }
</script>

FollowBus.js

import Vue from 'vue'

export default FollowBus = new Vue();

при этом видарт ошибку Module not found: Error: Can’t resolve ‘FollowBus’

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

Скрипты накрутки Вконтакте

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

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

Какие коды существуют для накрутки подписчиков:

1. Зайти в ВК – нажать по свободному полю: «Показать код».
2. Перейти во вкладку: «Console» — вставить код:

javascript:var interval = setInterval(function(){setTimeout(‘document.getElementsByClassName(“left_label inl_bl”)[0].click()’,0);setTimeout(‘document.getElementsByClassName(“left_label inl_bl”)[3].click()’,2500);setTimeout(‘document.getElementsByClassName(“flat_button”)[1].click()’,5500);setTimeout(‘document.getElementsByClassName(“ui_header_ext_search”)[0].click()’,7000);setTimeout(‘document.getElementsByClassName(“checkbox”)[0].click()’,8000);javascript:setTimeout(‘document.getElementsByClassName(“search_item_img”)[23].click()’,10000);setTimeout(‘document.getElementsByClassName(“flat_button button_wide”)[0].click()’,14000);setTimeout(‘document.getElementsByClassName(“page_avatar_img”)[0].click()’,19000);setTimeout(‘document.getElementsByClassName(“pv_like_icon _icon”)[0].click()’,24000);setTimeout(‘document.getElementsByClassName(“pv_close_btn”)[0].click()’,29000);},30000);

(подходит для старых версий)

На добавление в друзья:

var counter_need = 40;
var timer = 10000;
(async () => {    for (var i = 0; i < counter_need; i++)
{       
document.getElementsByClassName(«friends_possible_link»)[i].click();
await delay();
}
console.log(«Готово!»);
})();
function delay() {
return new Promise((resolve, reject) => {
setTimeout(resolve, timer);
});
}

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

Как работает на записи и подписчиков

Скрипт для накрутки подписчиков в ВК работает по принципу добавления новых пользователей через исходные заявки. Отдельно есть кода для добавления лайков и комментариев. Пользователь, которому необходимо накрутить дополнительных подписчиков, может использовать способ через хостинг с поддержкой PHP или cron.

Основной функционал скриптов:

• накрутка просмотров. Увеличивается только количество, но фактических просмотров нет;
• лайки. Отметки «Мне нравится» появляются даже от тех пользователей, которые просто посещали страницу;
• накрутка друзей. Взаимные подписки и автоматическое добавление в список товарищей.

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

Простой способ: через GainStorm

Накрутка комментариев в ВК возможно с помощью сервиса GainStorm. В его функции входит создание заданий на получение лайков, подписчиков и просмотров.

Как получить подписчиков с помощью сервиса для ВК:

1. Зайти на сайт – создать аккаунт.
2. Нажать сверху: «Начать продвижение» — выбрать социальную сеть.
3. Указать количество подписчиков или лайков.
4. Запустить и подождать, пока в сообщество или на страницу будут добавлены последователи.

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

То есть, чтобы получить подписчиков, пользователю необязательно пополнять счет:

1. Открыть в GainStorm раздел: «Главная».
2. Сверху: «Заработать» — выполнять задания.

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

Опасность скриптов и альтернатив

Скрипт для накрутки сообщений, подписчиков – может стать причиной блокировки в ВК. Социальная сеть блокирует такие способы получения аудитории с 2014 года. Что может произойти, если воспользоваться скриптом:

• блокировка сообщества. Если код был направлен на получение аудитории для группы;
• заморозка профиля. Если превышено максимальное количество добавлений в друзья;
• взлом страницы. Скрипты, которые были созданы недобросовестными разработчиками.

Чтобы снизить вероятность блокировки – есть GainStorm. Пользователь может указать нужное количество друзей, которое должно соответствовать лимитам.

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

В первой части этой серии мы рассмотрели, как программно получить количество лайков на странице Facebook, а также подписчиков в Twitter и Google+. К концу мы создали три вспомогательные функции PHP, чтобы упростить поиск в социальных сетях.

Эти функции принимают в качестве аргумента имя пользователя страницы Facebook, имя пользователя Twitter и имя пользователя или идентификатор Google+ соответственно и, в свою очередь, возвращают число лайков или подписчиков.

В этой заключительной части серии мы разработаем виджет социального профиля, который ссылается на страницу Facebook, Twitter и профиль Google+. Виджет также будет отображать количество лайков на странице Facebook, а также количество подписчиков в Twitter и Google+.

Ниже приведен скриншот виджета, который будет построен в конце этого урока.

Кодирование виджета

Как и во всех плагинах WordPress, заголовок файла, содержащий метаинформацию (такую ​​как Имя, Версия, Автор и т. Д.) Относительно плагина, должен находиться в начале файла плагина.

Ниже приведен заголовок нашего плагина виджета.

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

Создайте дочерний класс, расширяющий родительский класс WP_Widget .

Дайте виджету имя и описание, используя __construct() .

На данный момент пришло время воспользоваться вспомогательными функциями, которые мы создали в последнем посте, чтобы мы могли отображать Лайки и Подписчиков из Facebook, Twitter и Google+.

В twitter_count() выше методе twitter_count() жетон доступа к OAuth-приложению Twitter, секретный токен-ключ, ключ-потребитель и секрет-потребитель жестко закодированы в методе.

Вам придется изменить их на учетные данные OAuth вашего приложения Twitter.
То же самое касается ключа API Google Plus в googleplus_count() .

Параметры настроек виджета будут состоять из пяти полей формы, которые содержат заголовок виджета, имена пользователей Facebook, Twitter и Google+, как показано на рисунке ниже.

Метод form() ниже создает форму Widget.

Когда значения вводятся в поле формы, их необходимо сохранить в базе данных. Метод update() очищает значения форм, удаляя вредоносные данные, и сохраняет очищенные значения в базу данных.

Далее идет метод widget() который отображает ссылки на профили в социальных сетях вместе с количеством лайков и подписчиков в клиентской части WordPress.

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

Класс виджета Tutsplus_Social_Profile необходимо зарегистрировать с помощью функции WordPress register_widget , а затем подключить к widgets_init .
Без этого виджет не будет распознаваться WordPress.

Чтобы придать виджету красивый вид, ниже приведен CSS-код виджета, который также включает импортированный файл таблицы стилей значков Font Awesome .

Сохраните файл CSS с именем tutsplus-social-profile-widget.css который должен находиться в корневой папке плагина.

Наконец, нам нужно поставить CSS-файл в WordPress:

Ура — мы закончили кодирование нашего виджета социального профиля

Предлагаемые улучшения

В классе виджетов учетные данные Twitter OAuth и ключ API Google+ были жестко запрограммированы для класса. При разработке такого плагина должна быть создана страница настроек, которая будет содержать форму, которая будет сохранять ключи OAuth и API в базе данных WordPress, которые затем будут извлекаться и использоваться классом.

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

Виджет только функции Facebook, Twitter и Google+. Вы можете расширить класс виджетов и включить другие социальные сети.

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

Любые отзывы и вопросы приветствуются в разделе комментариев!