Как вконтакте сделать кнопку помочь проекту. Кнопка вконтакте для wordpress блога — разные методы и лучшие плагины
Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится " от социальной сети без лишних плагинов.
Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к 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 " повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.
Ну, вроде бы все сказал, что хотел)))) Надеюсь, что Вы все поняли и у Вас получилось вставить кнопку!
А если Вам до вставки кнопки еще долго, так как своего сайта, пока что, нету, то, может быть, создание сайтов Чебоксары Вам в этом поможет.
Что не говорите, но в последнее время активность использования различных кнопок добавления постов блога в социальные сети возросла. Идея и доступность данного метода, как мне кажется, намного лучше различных сервисов социальных закладок из которых в рунете большая часть была просто «неживые». Пара-тройка топовых закладочных социалок еще как-то могла существовать и размещаться на страницах блога, но то множество кнопочек и вариантов, которые предоставляли разные сервисы было ни к чему. Сейчас это, пожалуй, можно сравнить с Google Buzz — новый сервис начали использовать многие, на данный момент он вроде как не работает (да и работал ли?), но соответствующая иконка все еще размещается на многих проектах. А вот если говорить о твиттере, фэйсбуке и вконтакте — тут совсем другая история.
Вообще для создание кнопки вконтакте (как и некоторых других) есть несколько вариантов решений, но недавно нашел еще парочку интересных wordpress плагинов, которыми с вами и поделюсь. Но для начала немного теории и «повторения пройденного материала».
1. Первый вариант для кнопки вконтакте — использование картинок и кода от сервиса. Для добавления используется простой стандартный код:
При изменении его «под себя» обратить внимание на ссылку на изображение vkontakte.gif, которое должно находится в папке шаблона, директории images. Стандартную кнопку, которую вы видите в самом конце статьи данного блога, можно менять на любую другую. Также не забывайте указать ее ширину и высоту через width и height. Плюс варианта в его элементарности, тут даже особо в коде не нужно разбираться, можно добавить «как есть.»
2.
Вариант два — добавление кнопки с помощью . Модуль достаточно прост в установке и позволяет отображаться количество воспользовавшихся им пользователей. В общем, небольшой интерактив, а также некоторые интересные возможности при настройке.
На данном этапе я использую именно этот вариант и мне нравится.
3. Плагины для обычной кнопки вконтакте и других социальных сетей. Некоторое время назад я опубликовал подборку , где к сожалению, не было вконтакте, но были представлены популярных забугорные сервисы и весьма оригинальная их подача в блоге.
Теоретически вы могли бы залезть в код плагина и с помощью знаний из первого варианта заменить какой-то ненужный буржуйский сервис на социальную сеть вконтакте. Но я решил поискать уже готовые варианты. Как на зло плагинов оказалось немало, но большая их часть совершенно бесполезные и унылые. В итоге выбрал лишь два достойный кандидата (притом, что мне нужно было еще одно дополнительное условие).
Social Share Buttons for WordPress
Плагин заточен чисто под рунет, так как содержится самые популярные у нас социальные сети — вконтакте, одноклассники, мой мир, livejournal, фэйсбук и твиттер. Если я правильно, то он чем-то аналогичен VK Share Button либо точнее будет сказать, включает в себя его функциональность. Вы можете выбирать разные варианты отображения кнопок, а также задавать некоторые настройки для каждой из них. Есть возможность сортировки кнопок, выбора некоторых из них.
Самый большой недостаток плагина, по сути, его ограниченность только популярными рунетовскими социальными сетями, что не всегда оправдано. А мне как раз нужно было добавить на сайте кроме вконтакта еще и LinkedIn. Перерыл, признаюсь, очень много плагинов пока не нашел супер крутой и полезный Share and Follow.
— это самый крутой плагин с кнопками социальных закладок, который я только встречал. Здесь очень много возможностей и столько же настроек. Установка и начало работы происходит достаточно быстро — скачайте плагин, активируйте в амдинке и укажите в разделе Share and Follow какие именно кнопки вам нужны. Они сразу же отобразятся на страницах блога.
После этого можно приступать к подробной настройке — можно выбрать размер кнопок, множество различных социальных сервисов, а также общие возможности (RSS, email, версия для печати). Этот же плагин добавлять элемент фолловинга сбоку от полосы прокрутки а также имеет множество других опций. Есть платные возможности, но бесплатных и без них хватает с головой. Предлагаю глянуть небольшое видео по использованию Share and Follow:
Возможно, в будущем рассмотрю модуль Share and Follow более подробно, но вы можете меня не ждать и сами исследовать его. Самое главное, что он идеально подходит как для рунета, так и англоязычных сайтов — список социальных сервисов более чем достаточен. Установка быстрая и простая, короче говоря, Share and Follow должен быть в архиве любого разработчика сайтов /блогов на wordpress.
P.S. Кстати, о социальных сетях возможно вам пригодятся статусы про жизнь для вконтакте, которые можно себе установить очень просто.
В жизни есть несколько основных психологических аспектов как например саморазвитие личности которые позволяют достигать больших успехов и результатов.
Вы можете немного подправить зрение без очков одев контактные линзы на работу или учебу, закажите их в интернете.
Как много интересных функций в социальной сети вконтакте, но мало кто их использует, сегодня остановим внимание на кнопке посмотреть, которая, органично смотрится в реализации контента в группах и публичных страниц. Кнопка посмотреть вконтакте — это, возможность красиво оформить, материал вашего сообщества, посредством wiki страницы либо, внешнего веб-сайта. Мы рассмотрим каждую модель, создания кнопки посмотреть вконтакте, в отдельности с пошаговой инструкцией по её созданию и реализации в сообществе.
Как сделать кнопку посмотреть вконтакте Начнём с простого, как сделать кнопку посмотреть вконтакте для своего сообщества. Одна из интерпретаций кнопки посмотреть вконтакте, реализуется с помощью wiki страницы. Давайте пошагово рассмотрим, как создать wiki страницу и опубликовать её в сообществе с красивым изображением и кнопкой посмотреть вконтакте.Создание wiki страницы Wiki страница — это, отдельная веб-страница, внутри социальной сети вк, которая будет привязана к вашему сообществу, создаётся она, следующим образом.В окне браузера вам нужно, создать и ввести, следующий адрес;
http://vk.com/pages?oid=-1111&p=Ваша_страницы
Где единицы 1111, заменить на id вашего сообщества, а словосочетание ваша страница, на название вашей будущей страницы, у которой будет кнопка посмотреть.
http://vk.com/pages?oid=-100619968&p=Кнопка посмотреть вконтакте
Мы вставили вместо единиц id нашей группы и назвали страницу, так же как статью, кнопка посмотреть вконтакте. Теперь вставляем ссылку в окно браузера, скопировать и вставить либо просто вставить и нажать enter. После этих действий, автоматически создаётся wiki страница, привязанная к вашему сообществу.
Страница кнопка вконтакте пуста, наполнить содержанием, именно такая надпись, будет у вас, при правильном создании страницы. Теперь нажимаем активную ссылку наполнить, содержанием.
После наполнения вы можете, посмотреть страницу с помощью кнопки предпросмотр, в правом нижнем углу есть ссылка, доступ к странице, нажмите на неё и установите, кто может просматривать страницу, а также у кого будет доступ к её редактированию. Смотреть могут все, а редактировать только редакторы и администраторы, незабываем нажать сохранить изменения.
Мы наполним страницу, минимальным количеством информации, вы можете сделать статью, фотообзор и так далее. Как видно у нас есть, заголовок — материал о том как сделать кнопку посмотреть вконтакте, далее текст, полностью доступен на странице нашего веб-сайта и ссылка с текстом, кнопка посмотреть вконтакте. Нажимаем сохранить.
Идём во вкладку просмотр, смотрим что получилось, если все устраивает, копируем ссылку этой страницы, в окне вашего браузера.
Кнопка посмотреть Переходим в сообщество и вставляем в активное поле, на вашей стене, после чего у вас появляется прикреплённая ссылка, вот такого вида, как показано на скриншоте ниже.
Вот и все, вот так легко и просто можно создать wiki страницу с последующей её публикацией на стену вашего сообщества и кнопкой посмотреть. Если остались вопросы либо возникли проблемы, пишем в комментариях, или находим меня вконтакте и решаем, её вместе.
Процедура создания кнопки Вконтакте проста, но для того, чтобы виджет лайков ВК работал правильно, необходимо выполнить все требования. Все дальнейшие инструкции будем выполнять исходя из того, что у вас есть учетная запись ВК, и вход в нее выполнен.
Создание приложенияДля начала перейдем по ссылке «Разработчикам» (находится внизу интерфейса) и выберем вкладку «Мои приложения». Если ранее вы не создавали виджеты ВК, список приложений будет пуст. Вам необходимо создать новое. Сделать это можно, кликнув по ссылке «Создать приложение».
После создания приложения необходимо подтвердить право на управление им. Это можно сделать через пятизначный СМС-код или через привязанное к учетной записи устройство. Выполнив подтверждение, зайдем в настройки приложения и включим его. На этом манипуляции с приложением закончены.
Откроем вкладку «Документация» и выберем подраздел «Сайты и виджеты». В блоке «Виджеты для сайта» выберем необходимый виджет – «Мне нравится».
В открывшейся форме выберем наше приложение, вариант кнопки и ее оформление. Из текстового блока заберем код для вставки.
Размещение виджета в шаблоне КотонтиОткроем шаблон header.tpl и в блоке head разместим код, который примерно выглядит так:
VK.init({apiId: 4752432, onlyWidgets: true});
Там, где необходимо разместить непосредственно саму кнопку лайков, например в шаблоне page.tpl, добавим код:
VK.Widgets.Like("vk_like", {type: "mini"});
Сегодня основатель Вконтакте Павел Дуров опубликовал новость о нововведениях в этой социальной сети, среди которых - кнопка «Мне нравится» и виджет друзей.
Для настройки и получения кода кнопки переходим по этой ссылке . Заполняем название сайта, адрес сайта и основной домен:
Ширину я оставил по умолчанию - 496 пикселей. Можете изменить ее при необходимости:
Для этого открываем файл header.php в папке с вашей темой (если у вас блог на WordPress) и помещаем выделенный участок кода в пределах тега . Для новичков поясню - найдите закрывающий тег и поместите этот код сразу перед ним, чтобы получилось вот так:
Кстати! Я планирую выпустить платный курс по продвижению англоязычных сайтов. Если интересует, можете подать заявку в ранний список через эту форму , чтобы первыми узнать о выходе курса и получить специальную скидку.Также приглашаю вас подписаться на мой канал в Telegram@shakinru , где я делюсь ссылками на самые полезные статьи о SEO. У канала есть чат @shakinchat для вопросов и обсуждений.
Далее нам нужно вставить кнопку «Мне нравится» Вконтакте в нужное место сайта. Об этом говорит фраза Put this div tag to the place, where the Like block will be
. Я предлагаю разместить ее в начале статьи. Если у Вас блог на WordPress, то нужно открыть в папке с вашей темой файл single.php
(в некоторых темах его нет, и тогда нужно открывать index.php
) и вставляем перед
