Виджет мне нравится вконтакте. Свой текст кнопки “Мне нравится” Вконтакте. Динамический контент

24.04.2019

С пятницей, господа! Завтра у обычных людей начинаются заслуженные выходные. А я, как всегда, буду занят: в этот раз надо поприсутствовать на собственном Дне Рождения. Ну а вчера появился повод вспомнить про кнопку . Она сейчас почти также популярна как Tweet от Twitter, так что встретить её можно почти на каждом сайте или блоге. В том числе и на моём, сразу после статьи, жмите - мне будет очень приятно.

Что касается причин побудивших меня о ней заговорить - кнопка "Мне нравится" получила обновление, небольшое, но приятное. Заодно напомню, как её настроить и установить на свой сайт.

В новости, пришедшей из ВКонтакте, говорится, что был слегка изменён дизайн кнопки "Мне нравится", счётчик нажатий стал кликабельным, то есть частью кнопки, а, главное, появилась возможность задавать кнопке "Мне нравится" высоту.

Установка кнопки "Мне нравится"

Так вот, из всех перечисленных кнопок вариант от ВКонтакте отличался самой большой высотой, из-за чего в один ряд с прочими никак не вписывался. Теперь высоту можно указать на странице настроек кнопки, где мы и получаем её код для своего блога. Для этого нужно выполнить В Контакте вход и перейти на страницу виджета "Мне нравится" . Это можно сделать, кликнув по пункту "Разработчикам" в самом низу страницы, затем "Виджеты и сторонние сайты" и, наконец, "Виджет "Мне нравится"". Можно сразу по этой ссылке перейти - Мне нравится .

Самое интересное тут - код для вставки. Часть кода до слов надо вставить между тегами и вашего сайта. Если у вас блог, сделанный на CMS WordPress, то эти теги находятся в файле header.php. А вторую часть кода вставляем туда, где вы хотите видеть кнопку "Мне нравится".

Настройка кнопки "Мне нравится"

Кроме указанных явно в настройках у кнопки есть ещё несколько интересных параметров. Это width - ширина кнопки, pageTitle - название страницы для отображения на стене ВКонтакте, pageDescription - для отображения там же на стене, pageImage - адрес картинки-миниатюры для отображения на стене, и, наконец, новый параметр text - задаёт текст, который появится не при наведении мышки на ссылку, как с предыдущими параметрами, а прямо в записи на стене. Соответственно, может быть не длиннее 140 символов, по умолчанию выводится название страницы.

Как эти параметры задать

Они уазываются в строчке VK.Widgets.Like("vk_like", {type: "full"}); через запятую после атрибута type:"full" или на том месте, где он есть в моём примере (в зависимости от настроек кнопки там могут быть и пустые кнопки). Вот как может выглядеть результат:

VK.Widgets.Like("vk_like", {type: "full", width: 100, height: 20, pageTitle: "Мне нравится ВКонтакте", pageDescription: "Об установке и настройке кнопки на своём блоге", text: "Очень полезный материал!"});

Ну вот и всё на сегодня. Теперь я тут всплыву только через несколько дней. Не забывайте, до новых встреч!

Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится " от социальной сети без лишних плагинов.

Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к API ВКонтакте, в результате чего я получал надпись "Open API security breach " и бесконечно бегающий прогресс-бар. Как оказалось, все дело было в банальном написании адреса сайта в настройках "Open API " в самом ВКонтакте (об этом я напишу чуть ниже).

Итак, давайте прикрутим кнопку "Мне нравится ".

Для начала зайдем через свой профиль в ВК (обязательно через свой, так как нам нужно будет создавать приложение). Далее переходим на страничку создания виджета и видим подобную форму:

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

Создание и настройка приложения

Так что лучше сделаем лишние телодвижения и идем на страницу создания приложения , вписываем любое название в соответствующее поле, далее выбираем тип: "Веб-сайт ", и заполняем поле с описанием, но это не обязательно. Далее жмем "Перейти к загрузке приложения " и вводим каптчу.

Все! Приложение создано и перед нами форма с его настройкой:

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

Следующая вкладка "Настройки ", она самая важная ! Обратите внимание, в самом верху жирным выделен ID номер Вашего приложения (он и будет коннектить Вашу кнопку), далее идет "Защищенный ключ ", его не трогайте.

Адрес сайта: http://yoursite.com/ (адрес к которому Вы подключаете Open API. Если использовать это приложение на другом сайте или на локалхосте, работать не будет. Приложение полностью привязывается к адресу сайта, который тут указан.)

Лишний слэш в настройках адресов и Ваша кнопка не законнектится, будет выводить ошибку "Open API security breach ".

Все, сохраняете изменения, остальные вкладки можете не настраивать.

Настройка и вставка кнопки

Возвращаемся к форме создания кнопки и вот тут уже в поле "Сайт/приложение " в выпадающем списке должно появится Ваше приложение, выбираем его.

Следующий пункт "Варианты кнопки " - выбираем, какая Вам больше подходит под дизайн, внизу под формой сразу приводится наглядный пример кнопки. На данный момент существует 4 вида кнопки:

Кнопка с текстовым счётчиком
Кнопка с миниатюрным счётчиком
Миниатюрная кнопка
Миниатюрная кнопка, счётчик сверху

Тип кнопки выбрали, теперь пункт "Название кнопки ", пока что есть 2 варианта (выбирайте любой понравившийся):

Мне нравится
Это интересно

Ну и, наконец-то, мы пришли к полю "Код для вставки ". Когда Вы выбрали в первом поле свое приложение, его ID автоматически вставляется в код. Этот код нужно вставить в двух местах Вашего сайта, разработчики специально его прокомментировали, но я на всякий случай также объясню.

Первый кусок кода:

VK.init({apiId: ID__ВАШЕГО_ПРИЛОЖЕНИЯ, onlyWidgets: true});

нужно вставить внутри тега:

А второй кусок:

VK.Widgets.Like("vk_like", {type: "button"});

нужно вставить в том месте сайта, где должна отображаться кнопка.

Мой код не вставляйте, я его привел, как пример, тем более у меня не те настройки кнопки и не указан ID.

А так все, Ваша кнопка готова!

Обтекание кнопки

Как Вы заметили, кнопка помещается в div с айдишиником "vk_like ", где прописан стиль её отображения. И в этом стиле разработчики втулили правило:

Clear: both;

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

Так мы отменяем отмену (:-D) обтекания элемента, а "!important " повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.

Ну, вроде бы все сказал, что хотел)))) Надеюсь, что Вы все поняли и у Вас получилось вставить кнопку!

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

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

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

VK.init({apiId: YOUR_APP_ID, onlyWidgets: true}); VK.Widgets.Like("vk_like", {type: "full", pageTitle: "TEST_TITLE", pageDescription: "TEST_DESC"});

Нужно вставить этот код в страницу, которая будет в домене приложения ВК. Например, для приложения выбран базовый домен example.com, тогда страницу нужно разместить в этом домене или одном из его поддоменов: example.com/vktest.html, local.example.com/vktest.html, и пр.

После нажатия на кнопку, авторизации и нажатия на «Рассказать друзьям», на вашей стене ВКонтакте появится соотвествующая запись. Теперь вернемся на нашу страницу и снова нажмем на «Мне нравится» – счетчик обнулится, запись со стены пропадет. Проблема решена? Можно проверить, меняем параметры виджета на другие.

VK.Widgets.Like("vk_like", {type: "full", pageTitle: "REAL_TITLE", pageDescription: "REAL_DESC"});

Обновляем страницу, снова жмем на «Мне нравится» и «Рассказать друзьям». Во всех моих тестах я видел старые TEST_TITLE и TEST_DESC.

Этот пример, конечно, не слишком точен. Возможно, достаточно подождать какое-то время и кэш для виджета с нулем использований сбросится сам. Однако это отличная демонстрация проблемы. Если вы настроили виджет с тестовыми данными и счетчик больше нуля, вы уже не сможете поменять параметры виджета. К параметрам виджета относятся заголовок, описание, изображение.

Единственный способ обновить эти параметры – сбросить счетчик. Об этом мне сообщили в тех. поддержке ВК:

Сбросить счетчик можно либо указав третьим параметром page_id, или поменяв URL страницы. Очевидно, это не подходит для страницы, где уже больше 500 «лайков».

Я разрабатывал интеграцию для нескольких социальных сетей. Должен сказать, с подобной неприятностью сталкиваюсь впервые. Да уже и не помню когда в последний раз видел что нельзя сбросить кэш в системе. Более того, об этой особенности в документации ВКонтакте не сказано ни слова.

Разработчикам интеграций совет – тестируйте виджет на фальшивых URL, например example.com/fake.html. Или же меняйте page_id перед релизом страницы.

Документация к виджету

Как добавить кнопку Контакта «Мне нравится» на свой блог

Итак, чтобы установить себе на блог вот такую кнопочку