Ваша группа ВКонтакте на вашем сайте

Опубликовано: 05.09.2018

Так называемая «социальная оплата» – полный контент открывается только после нажатия на любую из установленных кнопок социальных сетей. Достоинства метода: если материал действительно интересный, а начало статьи – интригующее, то CTR будет достаточно высоким. Недостатки: много отказов и реальная навязчивость вроде бы и хочется прочитать статью, но (может быть и такое в случае программных недоработок) окно медленно открывается или пользователь просто не зарегистрирован на этом социальном сервисе.

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

Как добавить ссылку на группу вконтакте на ваш канал youtube

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

Бесплатный БОТ для анализа вашей группы ВКонтакте

Вы уже знакомы со стандартными всплывающими окнами – их довольно часто используют сайты самых разных тематик. Но окно, которое я предлагаю к реализации, имеет больше привлекательных сторон – мы рассмотрим их по ходу пояснений. Как организовать подобный pop-up на группе ВК и что для этого потребуется – читайте дальше:

Сайт (блог) с естественным трафиком, и желательно – от 200-300 человек в сутки, иначе вы не заметите сколько-нибудь значимого эффекта. Группа ВКонтакте, которая имеет схожую с сайтом тематику. Хотя бы поверхностные знания программирования и работы с WordPress. Следовать этой инструкции.

Этот небольшой скрипт, который вы видите ниже на странице, имеет следующие преимущества:

Может быть установлен на любую CMS — WordPress, Joomla или DLE, или самописный сайт на HTML. Ненавязчивое действие и влияние на посетителя – pop-up показывается, исходя из пользовательских cookies, поэтому вы сами можете его настроить — частоту показов пользователю, реакцию на его действия. Этот pop-up не «падает» сразу на голову посетителю при открытии страницы, как это часто бывает, а показывается после некоторой задержки. Это очень важный момент – посетитель начинает читать статью и, если она интересная, хочет дочитать ее до конца, поэтому его реакция на появляющееся после 10-15 секундной задержки окно имеет только два решение – или закрыть его и продолжать читать, или нажать «Нравится» или «Вступить в группу», и тоже продолжать читать материал. То есть, pop-up показывается не всем пользователям, а только тем, кто задержался на странице для ознакомления со статьей, поэтому и вероятность социального отзыва существенно повышается.

Если вы сможете реализовать тот код, который видите ниже, то у вас на сайте появится вот такой pop-up:

Работаем с подключением скрипта

Чтобы наш попандер выглядел красиво, необходимо подключить к сайту парочку библиотек. Это библиотека JQuery и несколько расширений для нее, а также библиотека API ВКонтакте. Это не так сложно, как вы подумали, и сейчас я вам все подробно объясню. Чтобы подключить JQuery, в файле header.php между тэгами <head> и </head> нужно вставить эти строчки:

А чтобы все эти закорючки заработали, в корневом каталоге сайта (это там, где .htaccess и robots.txt) создайте новую папку с названием «js», и в нее положите два файла – «jquery.bpopup.min.js» и «jquery.cookie.js». Вот содержимое этих файлов:

Файл jquery.bpopup.min.js:

/*================================================================================ * @name: bPopup - if you can't get it up, use bPopup * @author: (c)Bjoern Klinggaard (twitter@bklinggaard) * @demo: http://dinbror.dk/bpopup * @version: 0.9.4.min ================================================================================*/ (function(b){b.fn.bPopup=function(z,F){function K(){a.contentContainer=b(a.contentContainer||c);switch(a.content){case "iframe":var h=b('<iframe class="b-iframe" '+a.iframeAttr+"></iframe>");h.appendTo(a.contentContainer);r=c.outerHeight(!0);s=c.outerWidth(!0);A();h.attr("src",a.loadUrl);k(a.loadCallback);break;case "image":A();b("<img />").load(function(){k(a.loadCallback);G(b(this))}).attr("src",a.loadUrl).hide().appendTo(a.contentContainer);break;default:A(),b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl,a.loadData,function(){k(a.loadCallback);G(b(this))}).hide().appendTo(a.contentContainer)}}function A(){a.modal&&b('<div class="b-modal '+e+'"></div>').css({backgroundColor:a.modalColor,position:"fixed",top:0,right:0,bottom:0,left:0,opacity:0,zIndex:a.zIndex+t}).appendTo(a.appendTo).fadeTo(a.speed,a.opacity);D();c.data("bPopup",a).data("id",e).css({left:"slideIn"==a.transition||"slideBack"==a.transition?"slideBack"==a.transition?g.scrollLeft()+u:-1*(v+s):l(!(!a.follow[0]&&m||f)),position:a.positionStyle||"absolute",top:"slideDown"==a.transition||"slideUp"==a.transition?"slideUp"==a.transition?g.scrollTop()+w:x+-1*r:n(!(!a.follow[1]&&p||f)),"z-index":a.zIndex+t+1}).each(function(){a.appending&&b(this).appendTo(a.appendTo)});H(!0)}function q(){a.modal&&b(".b-modal."+c.data("id")).fadeTo(a.speed,0,function(){b(this).remove()});a.scrollBar||b("html").css("overflow","auto");b(".b-modal."+e).unbind("click");g.unbind("keydown."+e);d.unbind("."+e).data("bPopup",0<d.data("bPopup")-1?d.data("bPopup")-1:null);c.undelegate(".bClose, ."+a.closeClass,"click."+e,q).data("bPopup",null);H();return!1}function G(h){var b=h.width(),e=h.height(),d={};a.contentContainer.css({height:e,width:b});e>=c.height()&&(d.height=c.height());b>=c.width()&&(d.width=c.width());r=c.outerHeight(!0);s=c.outerWidth(!0);D();a.contentContainer.css({height:"auto",width:"auto"});d.left=l(!(!a.follow[0]&&m||f));d.top=n(!(!a.follow[1]&&p||f));c.animate(d,250,function(){h.show();B=E()})}function L(){d.data("bPopup",t);c.delegate(".bClose, ."+a.closeClass,"click."+e,q);a.modalClose&&b(".b-modal."+e).css("cursor","pointer").bind("click",q);M||!a.follow[0]&&!a.follow[1]||d.bind("scroll."+e,function(){B&&c.dequeue().animate({left:a.follow[0]?l(!f):"auto",top:a.follow[1]?n(!f):"auto"},a.followSpeed,a.followEasing)}).bind("resize."+e,function(){w=y.innerHeight||d.height();u=y.innerWidth||d.width();if(B=E())clearTimeout(I),I=setTimeout(function(){D();c.dequeue().each(function(){f?b(this).css({left:v,top:x}):b(this).animate({left:a.follow[0]?l(!0):"auto",top:a.follow[1]?n(!0):"auto"},a.followSpeed,a.followEasing)})},50)});a.escClose&&g.bind("keydown."+e,function(a){27==a.which&&q()})}function H(b){function d(e){c.css({display:"block",opacity:1}).animate(e,a.speed,a.easing,function(){J(b)})}switch(b?a.transition:a.transitionClose||a.transition){case "slideIn":d({left:b?l(!(!a.follow[0]&&m||f)):g.scrollLeft()-(s||c.outerWidth(!0))-C});break;case "slideBack":d({left:b?l(!(!a.follow[0]&&m||f)):g.scrollLeft()+u+C});break;case "slideDown":d({top:b?n(!(!a.follow[1]&&p||f)):g.scrollTop()-(r||c.outerHeight(!0))-C});break;case "slideUp":d({top:b?n(!(!a.follow[1]&&p||f)):g.scrollTop()+w+C});break;default:c.stop().fadeTo(a.speed,b?1:0,function(){J(b)})}}function J(b){b?(L(),k(F),a.autoClose&&setTimeout(q,a.autoClose)):(c.hide(),k(a.onClose),a.loadUrl&&(a.contentContainer.empty(),c.css({height:"auto",width:"auto"})))}function l(a){return a?v+g.scrollLeft():v}function n(a){return a?x+g.scrollTop():x}function k(a){b.isFunction(a)&&a.call(c)}function D(){x=p?a.position[1]:Math.max(0,(w-c.outerHeight(!0))/2-a.amsl);v=m?a.position[0]:(u-c.outerWidth(!0))/2;B=E()}function E(){return w>c.outerHeight(!0)&&u>c.outerWidth(!0)}b.isFunction(z)&&(F=z,z=null);var a=b.extend({},b.fn.bPopup.defaults,z);a.scrollBar||b("html").css("overflow","hidden");var c=this,g=b(document),y=window,d=b(y),w=y.innerHeight||d.height(),u=y.innerWidth||d.width(),M=/OS 6(_\d)+/i.test(navigator.userAgent),C=200,t=0,e,B,p,m,f,x,v,r,s,I;c.close=function(){a=this.data("bPopup");e="__b-popup"+d.data("bPopup")+"__";q()};return c.each(function(){b(this).data("bPopup")||(k(a.onOpen),t=(d.data("bPopup")||0)+1,e="__b-popup"+t+"__",p="auto"!==a.position[1],m="auto"!==a.position[0],f="fixed"===a.positionStyle,r=c.outerHeight(!0),s=c.outerWidth(!0),a.loadUrl?K():A())})};b.fn.bPopup.defaults={amsl:50,appending:!0,appendTo:"body",autoClose:!1,closeClass:"b-close",content:"ajax",contentContainer:!1,easing:"swing",escClose:!0,follow:[!0,!0],followEasing:"swing",followSpeed:500,iframeAttr:'scrolling="no" frameborder="0"',loadCallback:!1,loadData:!1,loadUrl:!1,modal:!0,modalClose:!0,modalColor:"#000",onClose:!1,onOpen:!1,opacity:0.7,position:["auto","auto"],positionStyle:"absolute",scrollBar:!0,speed:250,transition:"fadeIn",transitionClose:!1,zIndex:9997}})(jQuery);

Файл jquery.cookie.js:

/*! * jQuery Cookie Plugin v1.4.0 * https://github.com/carhartl/jquery-cookie * * Copyright 2013 Klaus Hartl * Released under the MIT license */ (function (factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // CommonJS factory(require('jquery')); } else { // Browser globals factory(jQuery); } }(function ($) { var pluses = /\+/g; function encode(s) { return config.raw ? s : encodeURIComponent(s); } function decode(s) { return config.raw ? s : decodeURIComponent(s); } function stringifyCookieValue(value) { return encode(config.json ? JSON.stringify(value) : String(value)); } function parseCookieValue(s) { if (s.indexOf('"') === 0) { // This is a quoted cookie as according to RFC2068, unescape... s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); } try { // Replace server-side written pluses with spaces. // If we can't decode the cookie, ignore it, it's unusable. // If we can't parse the cookie, ignore it, it's unusable. s = decodeURIComponent(s.replace(pluses, ' ')); return config.json ? JSON.parse(s) : s; } catch(e) {} } function read(s, converter) { var value = config.raw ? s : parseCookieValue(s); return $.isFunction(converter) ? converter(value) : value; } var config = $.cookie = function (key, value, options) { // Write if (value !== undefined && !$.isFunction(value)) { options = $.extend({}, config.defaults, options); if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setTime(+t + days * 864e+5); } return (document.cookie = [ encode(key), '=', stringifyCookieValue(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // Read var result = key ? undefined : {}; // To prevent the for loop in the first place assign an empty array // in case there are no cookies at all. Also prevents odd result when // calling $.cookie(). var cookies = document.cookie ? document.cookie.split('; ') : []; for (var i = 0, l = cookies.length; i < l; i++) { var parts = cookies[i].split('='); var name = decode(parts.shift()); var cookie = parts.join('='); if (key && key === name) { // If second argument (value) is a function it's a converter... result = read(cookie, value); break; } // Prevent storing a cookie that we couldn't decode. if (!key && (cookie = read(cookie)) !== undefined) { result[name] = cookie; } } return result; }; config.defaults = {}; $.removeCookie = function (key, options) { if ($.cookie(key) === undefined) { return false; } // Must not alter options, thus extending a fresh object... $.cookie(key, '', $.extend({}, options, { expires: -1 })); return !$.cookie(key); }; }));

Теперь немного пояснений. Первая строка подключает библиотеку JQuery, на которой и будет работать скрипт. Вторая строка подключает pop-up для JQuery, третя строка подключает скрипт для работы с cookies, и наконец, четвертая строка подключает API ВКонтакте. Вирусов нет — только надежные сервисы VK, Github и Google.

Как подключить скрипты к сайту

В том же файле header.php после тэга <body> нужно вставить вот этот код:

<!-- init VK API + some javascript –> <script type="text/javascript"> VK.init({ // инициализируем API вконтакте apiId: 4166758 // тут должен стоять ваш apiId, об этом ниже }); //----------------- function setcookie(name, value, expires, path, domain, secure) // функция установки кукисов { document.cookie = name + "=" + escape(value) + ((expires) ? "; expires=" + (new Date(expires)) : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } // конец функции установки кукисов </script> <!-- popup jQuery—>// секция JQuery скрипта <script> (function($) { function Nya(){ // сама функция обработки события готовности страницы в браузере, она делает основную работу var date = new Date(); var minutes = 1440; // 1440 – число минут, которое будет жить кукис-отметка, что пользователь выидел поп-ап, показываем попап человеку не чаще 1 раза в сутки date.setTime(date.getTime() + (minutes * 60 * 1000)); // готовми дату истечения кукиса-отметки $.cookie("isawNya", "1", { expires: date, path: "/", domain: "mylect.ru" }); // устанавливаем кукис-отметку, пользователь видел поп-ап! $('#element_to_pop_up').bPopup(); // показываем поп-ап } // DOM Ready $(function() { // эта функция исполняется автоматически по готовности html страницы у пользователя if(!$.cookie("isawNya")) // проверяем, видел ли пользователь куку? setTimeout(Nya, 120000); // если нет, то через 2 (120 000 миллисекунд) минуты запускаем вышеописанную функцию function Nya() }); })(jQuery); </script>

В чем смысл этого фрагмента? Он проверяет cookies пользователя и, если он уже видел попандер, то ему окно не будет показываться, а если нет, то через 2 минуты (или время, которое вы сами можете установить – смотрите комментарии в коде) он увидит всплывающее окно группы или сообщества VK.

В этом фрагменте кода можно изменять 2 числа. Первое значение 1440 – количество минут, которые пользователь наблюдал pop-up. Эта функция не позволяет окну многократно появляться для одного и того же пользователя. То есть, за эти 1440 минут пользователь не увидит pop-up, если окно ему уже показывалось. Второе число в 120 000 миллисекунд – это время, по истечении которого пользователь увидит pop-up.

Например, если изменить его на 30 000, то посетитель увидит всплывшее окно через 30 секунд. Мой совет – устанавливайте это значение немного больше, чем среднее время нахождения посетителя на сайте (я пользовался статистикой LI). То есть, при таких настройках окно будут видеть только те пользователи, кому сайт понравился и они на нем задержались.

Как получить API ID ВКонтакте

Что касается получения API ID вашей группы или сообщества – это тоже просто. Чтобы скрипт работал корректно, нужен правильный ID. В коде самого pop-up вы должны будете определить, нажал посетитель лайк в виджете и вступил в группу или нет? Для ответа на этот вопрос скрипт обращается к серверу VK, а сервер проверяет, зарегистрировано приложение или нет, и проверяет по API ID. Получить этот волшебный набор цифр просто — заходите на страницу http://vk.com/dev/Like , и в выпадающем списке выбираете функцию «Подключить новый сайт».

Дальше вам нужно без ошибок заполнить все поля и нажать «Сохранить». После этого в нижнем окне с кодом вы увидите свой API ID – в коде он обозначается как apiId. Теперь ваш блог может работать с API вашей группы или сообщества VK.

Теперь готовим к работе блок <div> содержащий сам pop-up. Этот код нужно будет вставить в файл index.php или home.php (у кого как) вашего шаблона темы. Я оформил свой <div> таким образом:

<div id="element_to_pop_up" style="display: none; border: black 1px solid; margin: 10px; background-color: white; padding: 20px; text-align: center; box-shadow: 0 0 20px 5px;"> <b>Некоторый текст</b>, для привлечения внимание пользователя к кнопе лайк <br> <div style="margin: 0 auto;" id="vk_like"></div><br> а тут для привлечения внимания к группе!<br><br> <!-- VK Widget –> <div style="margin: 0 auto;" id="vk_groups_popup"></div> <script type="text/javascript">// это виджет группы как его получить см. ниже VK.Widgets.Group("vk_groups_popup", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 45211301); </script> <!-- VK Vidgets –> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button"}); //это виджет кнопки лайк, как его получить смотри ниже VK.Observer.subscribe("widgets.like.liked", function f() // это подписка на событие – пользователь нажал лайк {// month cookie setcookie('isawNya', '1', (new Date).getTime() + (30 * 24 * 60 * 60 * 1000),'/'); // если пользователь нажал лайк, мы ставим ему кукис-метку на месяц }); VK.Observer.subscribe("widgets.groups.joined", function f() // это подписка на событие – пользователь вступил в группу {// 5 years cookie setcookie('isawNya', '1', (new Date).getTime() + (5 * 365 * 24 * 60 * 60 * 1000), '/'); // если вступил в группу он получает кукис-метку на 5 лет }); </script> </div>

Как это работает? В этом блоке мы отображается виджет кнопки «Мне нравится» и виджет сообщества или группы, а также отслеживается поведение конкретного посетителя по тому самому API ВКонтакте. Если посетитель нажал на кнопку «Нравится» – он помечается cookies на 30 дней, и в течение этого времени окно ему больше показываться не будет. Если это новый пользователь, и он вступил в сообщество или группу – он помечается cookies на 5 лет. То есть, такой пользователь увидит окно практически один раз за все время.

Для получения кода виджета группы перейдите по адресу: http://vk.com/dev/Community , укажите в нужном поле URL группы VK, настройте дизайн виджета и скопируйте код. Для получения кода виджета кнопки «Мне нравится» лайк перейдите по адресу: http://vk.com/dev/Like . Выберите нужное зарегистрированное приложение, настройте дизайн и размеры кнопки, и скопируйте код.

Из кода виджетов, который вы скопировали, удалите следующий фрагмент:

Так как он уже подключен в файле header.php между тэгами <head> … </head> вашего сайта. А коды виджетов вставьте в первый код вместо аналогичных – смотрите внимательно, чтобы не зацепить лишнего.

Оформление блока

Сохраняйте id=»element_to_pop_up» блока или, если хотите изменить id, меняйте его везде, где он встречается, потому что библиотека JQuery тлоько по этому id и может определить, какой элемент отображать на сайте. Несоответствие id приведет к тому, что виджет вообще не будет отображаться.

Я оформлял <div> стилем inline. То есть, в коде <div> прописал «style=»display: none; border…» и т.д. Это совсем не обязательно делать – лучше всего стиль CSS положить в CSS файл вашего шаблона. Вот таким образом, имея совсем не глобальные познания в JS, CSS и JQuery, вы можете увеличить посещаемость и функциональность своего блога. А кроме этого, ваша группа тоже будет продвигаться, что вам совсем не помешает.

Я думаю, что этот код можно как-то оптимизировать и привести в более человеческий вид, но я тоже не профессиональный программист, поэтому написал то, что написал. Главное для меня, что это работает. Кстати, коды тех файлов, которые вам нужно создать в директории сайта, тоже можно оптимизировать – они станут намного легче и, соответственно, быстрее будут загружаться. Но может быть и такой вариант – у вас уже подключены эти библиотеки для реализации какой-то другой функции – в таком случае не подключайте их еще раз, не нужно. А теперь я прощаюсь с вами до следующих публикаций!