// codeart.ru / Работаем с кодом / Плагин социального замка для WordPress Форум

Плагин социального замка для WordPress rss подписка

Автор: Evgeniy Sergeev

Понадобился мне социальный замок для некоторых статей в блоге. Нашел несколько бесплатных версий, но все они основаны на основе PandaLocker от OnePress и не поддерживают ВКонтакте.
Я не стал покупать рускоязычную версию продукта, а доработал бесплатный плагин для jQuery, включив туда необходимый мне функционал. В этой статье расскажу как устроен PandaLocker и что нужно сделать, чтобы добавить поддержку ВК.
А так же дам ссылку на сайт, где можно скачать плагин для WordPress.

[social_lock]Скачать плагин можно с сайта: sociallocker.delokit.ru

ВКонтакте меня интересовал функционал «Подписаться на автора«. Кнопка, которая позволяет подписывать людей на себя любимого или группу в ВК. Данный функционал реализуется с помощью специального виджета-кнопки, который загружается во фрейм. И это доставляет немало неприятностей при попытке отловить нажатие на эту кнопку.

Есть два подхода, которые могут помочь решить данную проблему. Сложный вариант состоит в том, чтобы грузить во фрейм свою собственную страницу с кнопкой. Где реализовать весь функционал, связанный с OpenAPI ВКонтакте. Примерно таким путем пошли ребята, выпустившие платную версию плагина SocialWorker.

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

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

Теперь давайте немного о том как устроен PandaLocker. Как я уже сказал у OnePress есть бесплатный вариант для jQuery, который можно использовать для своих задач.

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

Локеры бывают двух типов «Share» и «Like», нетрудно догадаться, что первые позволяют распространять контент, а вторые ставить лайки. После всех операций в социальных сетях, чтобы снять блокировку нужно выполнить функцию:

self.unlock("button", self.name, self.url );

Далее идут обертки для кнопок социальных сетей. Здесь стоит отметить, что по своей сути все обертки — это контроллеры, которые выполняют основные задачи по отслеживанию выполненных действий. Они все собраны в группу «social-buttons» и реализуют три основных метода: prepareOptions, setupEvents, renderButton.

prepareOptions служит для предварительной инициализации параметров;
setupEvents служит для настройки обработчиков событий;
renderButton отвечает за внешний вид кнопки.

Есть один важный параметр «button.verification.container» — это селектор, который позволяет определить, что SDK социальных сетей загрузилось и кнопка отрисовалась. Например, если в результате работы SDK должен появиться iFrame, в button.verification.container будет строка «iframe», если нужно отследить, что пявилась кнопка с классом ‘.socialButton’, то в button.verification.container будет как раз эта строка.

В общем, PandaLocker переодически пытается найти container и если находит, то считает, что кнопка загружена.

После того, как отработал Render кнопки, запускается загрузка SDK. В SDK прописывается путь к JavaScript с API социальной сети. После загрузки SDK начинается процесс верификации, который заключается в поиске
button.verification.container.

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

/*!
* VK Like Button
* Copyright Evgeniy Sergeev
*/
(function ($) {
'use strict';

var button = $.pandalocker.tools.extend( $.pandalocker.entity.socialButton );

button.name = "vk-like";

button._defaults = {
type: "mini",
pageTitle: null,
pageDescription: null,
pageUrl: null,
pageImage: null,
pageId: null,
verb: 0,
requireSharing: 1
};

button.prepareOptions = function() {
this.url = this._extractUrl();

if ( "vertical" === this.groupOptions.layout ) {
this.options.layout = 'box_count';
} else {
if ( !this.groupOptions.counters ) {
this.options.layout = 'button';
}
}
};
button.setupEvents = function() {},

button.renderButton = function( $holder ) {
var self = this;
this.button = $("

").appendTo($holder);
this.widgetId = "onp-vk-like-widget-" + Math.floor(999999 * Math.random() + 1);
this.button.attr("id", this.widgetId);
$holder.addClass("onp-sl-iframe-button");
$holder.append('

').attr('id', 'vk_subscribe');

VK.Widgets.Subscribe("vk_subscribe", {soft: 1}, -148822001);
var overlay = $("

").appendTo( $holder );

overlay.click(function(){
var intentUrl = "https://vk.com/widget_community.php?act=a_subscribe_box&oid=-148822001&state=1&widget=4";
var width = 900;
var height = 620;

var x = screen.width ? (screen.width/2 - width/2 + $.pandalocker.tools.findLeftWindowBoundry()) : 0;
var y = screen.height ? (screen.height/2 - height/2 + $.pandalocker.tools.findTopWindowBoundry()) : 0;

$.pandalocker.data.__vkWindow = window.open(intentUrl, "VkInWindow", "width=" + width + ",height=" + height + ",left="

var vkWindowHandler = setInterval(function(){
if($.pandalocker.data.__vkWindow.closed){
clearInterval(vkWindowHandler);
self.unlock("button", self.name, self.url );
}

}, 1000);
});

}
$.pandalocker.controls["social-buttons"]["vk-like"] = button;
})(jQuery);;

/*!
* VK SDK Connector
* Evgeniy Sergeev
*/
(function ($) {
'use strict';

if (!$.onepress) $.onepress = {};
if (!$.pandalocker.sdk) $.pandalocker.sdk = {};

$.pandalocker.sdk.vk = $.pandalocker.sdk.vk || {
// a name of a social network
name: 'vk',
// a script to load
url: "//vk.com/js/api/openapi.js",
// a script id to set
scriptId: 'vk-jssdk',
hasParams: !0,
isRender: !0,
// a timeout to load
timeout: 10000,

/**
* Returns true if an sdk is currently loaded.
*.
* @since 1.5.5
* @returns boolean
*/
isLoaded: function () {
return window.VK && window.VK.Cookie && "object" == typeof window.VK.Cookie;
},

/**
* Creates callback for vk.
*.
* @since 1.5.5
* @returns void
*/
prepare: function () {
0 == $("#vk_api_transport").length && $('

').appendTo($("body"))
},

createEvents: function() {
var b = this,
isLoaded = this.isLoaded(),
load = function() {
$(document).trigger(b.name + "-init")
};
if (isLoaded) { load(); return; }

if (window.vkAsyncInit) var e = window.vkAsyncInit;
window.vkAsyncInit = function() {
load(); e && e(), window.vkAsyncInit = function() {}
}
}
}
})(jQuery);;


[/social_lock]

Leave a Reply

« »