Настройка и установка кнопки "мне нравится" от вконтакте. Свой текст кнопки “Мне нравится” Вконтакте

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

Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к 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 " повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.

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

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

Убил несколько дней, пока разобрался до конца со всеми наворотами кнопок “мне нравится” от вконтакте и facebook. Как быть с динамическим контентом? Как изменять текст поста на стену?
Про фейсбук в другой статье подробно напишу, принципы там другие. Пока хочу остановиться на популярной кнопке “Мне нравится” от Вконтакте .

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

В настоящее время кнопка “мне нравится” является частью АПИ вконтакте, просто подключается с пометкой only widgets, если не ошибаюсь, и является виджетом, использующим основное API Vkontakte.

Значит, мы можем смело использовать все возможности этого Апи, зчастую убрав ограничение “только виджеты” при подключении. Что интересно, до недавнего времени, не было информации по возможностям функции VK.Widgets.Like() , поэтому приходилось мучаться самому. Но теперь нам все поясняют на специальной странице документации по виджету-кнопке “мне нравится”.

Итак, чтобы подключить кнопку мне нравится необходимо перейти на сайте ВК “разработчикам”->”Виджеты и сторонние сайты”->”«Мне нравится»”. При необходимости подключить сайт и выбрать параметры кнопки.

VK.init({apiId: 2887573, onlyWidgets: true});

Мы подключили скрипты АПИ и инициализацию приложения для работы с самим API вконтакте и конкретно с жанном случае – виджетом “мне нравится”.
В нужном месте страницы мы вставляем код кнопки виджета:

Затем, в нужный момент, например по document ready, мы отображаем кнопку:

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

Все, теперь у нас есть кнопка со счетчиком. Но нам этого мало, да?

Как сделать кнопку “мне нравится” Вконтакте для сайта с динамическим контентом , где меняется урл страницы , или просто несколько кнопок с разными ссылками? Принцип один, доработаем код:

VK.Widgets.Like("profprogru_vk_like", {type: "button", pageTitle: "Произвольный текст", pageDescription: "Всплывающий текст",pageUrl:"тут ссылка на страницу"},666);

Теперь объясняю, мы обновляем кнопку. В фигурных скобках параметры виджета “мне нравится”, тип: кнопка со счетчиком, текст поста вконтакте, текст всплывающего окошка, ссылка на страницу и 666 – это уникальный идентификатор ссылки для подсчета лайков. Т.е. мы можем установить несколько кнопок “мне нравится” с разными идентификаторами и одной ссылкой, или вообще несколько абсолютно разным кнопок “мне нравится” с разными ссылками и отображением .

Надеюсь, информация не была бесполезной.




Всем привет, друзья! Несколько недель назад я писал, и . Сегодня ми продолжим использовать социальные сети для продвижения сайта. В этом посте я напишу, как устанавливается на сайт кнопка мне нравится вконтакте и кнопка мне нравится facebook.

Как установить кнопку «Мне нравится» от Вконтакте

Для того, чтобы вы на своем сайте увидели красивую кнопочку от вконтакте нужно сделать всего три шага:

  • Добавить сайт в соц. сеть вконтакте;
  • Настроить внешний вид кнопки;
  • Скопировать код и вставить на свой сайт.

    • После вставки второй части кода, вы должны увидеть на своем сайте кнопку от вконтакте «мне нравится». Если возникли какие-то проблемы, то пишите в комментариях, постараюсь помочь:smile:.

    Как установить кнопку «Мне нравится» от Facebook

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

    • URL to Like – . Оставляем это поле пустим, поскольку ми хотим установить кнопку на все страницы;
    • Height – высота. Можно ничего не ставить, по умолчанию высота кнопки нормальная;
    • Layout – здесь нам нужно указать внешний вид кнопки. Я выбрал последний вариант button_count, на мой взгляд, он самый лучший. Можете попробовать выбрать другой вариант и посмотреть, как он выглядит. Если box_count или standard вам нравится больше, то, пожалуйста, ставьте тот, который нравится.
    • Show Friends" Faces – показывать . Я убрал галочку, поскольку не хочу показывать аватари.
    • Width – ширина. Я ничего не ставил, если ширина кнопки вас не устраивает, то можете ее указать.
    • Color Scheme – цветовая схема. Оставил по умолчанию light (светлый).
    • Action Type. Если выбрать like, то надпись на кнопке будет «нравится». А если recommend, то «я рекомендую». Я выбрал первый вариант like (нравится).
    • Include Send Button — Включить кнопку «Отправить». Мне она не нужна, поэтому я галочку убрал.

    После заполнения всех полей у меня получилось вод так:



    Теперь нажмите на кнопку «Get code» для того, чтобы получить код.



    Первою часть кода вам нужно разместить в файл footer.php перед тегом . А вторую часть в то место, где вы хотите видеть кнопку «Мне нравится» от Facebook на своем сайте. Можете разместить после кода кнопки «Мне нравится» от Вконтакте в файл single.php.
    На этом у меня все. Как вам статья?

    Здравствуйте, дорогие читатели блога. Сегодня мы будем учиться вставлять на наш сайт кнопки со счётчиками от популярных социальных сетей таких как Google+, Facebook, вКонтакте и Twitter.

    А вот оформлять мы их будем как на блоге сайт. Мне кажется что очень просто, и ничего лишнего. Я думаю, что Вам понравится.

    Ну а теперь поехали.

    Кнопка на сайт Google+

    С самого начала нам нужно перейти вот на эту страницу . Затем откроется страница на которой мы сможем выбрать ту кнопку которая больше всего понравится и соответственно взять код к ней.

    Так как мы делаем по примеру мы выбрали стандартную кнопку от Google+ с счётчиком. В аннотации выбрали bubble, и язык, соответственно русский. Таким образом у нас получился вот такой код, который далее мы будем вставлять на свой сайт:

    Кнопка для сайта «Мне нравится» от вКонтакте.

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

    После всех этих не сложных шагов можно выбрать сам вид нашей кнопки вКонтакте. В нашем случае мы выбираем стандартную кнопку с текстовым счётчиком.

    Как видите, что высота кнопки равна 22 пикселя. А название кнопки — мне нравится. Все эти значения Вы можете изменить под себя.

    И теперь самое главное — это код для вставки кнопки на сайт. Для каждого сайта он будет не много изменяться из-за id номера о котором я говорил выше.

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

    Код в шапке сайта между и :

    VK.init({apiId: Ваш id номер, onlyWidgets: true});

    Код для отображения кнопки вКонтакте:

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

    Кнопка для сайта «Мне нравится» от Facebook.

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

    Теперь давайте рассмотрим что значат некоторые поля на странице настройки.

    Send Button (XFBML Only) — если делать по примеру как на сайт, то нужно убрать галочку напротив Send Button. Данная галочка убирает или добавляет дополнительное поле в кнопке «Отправить».

    Width — здесь выставляется ширина кнопки.

    Show Faces — тут мы можем выбрать отображать или не отображать аватарки пользователей.

    Verb to display — здесь мы можем выбрать текст в кнопке «Мне нравится» или «Я рекомендую».

    Color Scheme — Тут можно выбрать оформление кнопки для светлых или же тёмных сайтов.

    Font — выбираем шрифт надписей в кнопке.

    После того как мы выбрали настройки находим кнопку «Get Code» и нажимаем на неё. Далее высветится окно с кодом, его тоже нужно вставлять в два этапа:

    Вставляем код сразу после тега

    (function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

    Код для отображения кнопки

    Вставляем этот код туда где должна отображаться кнопка от facebook:

    Кнопка на сайт от Twitter

    Заходим . И вот открылось вот это окно;-)

    Здесь нам можно выбрать несколько различных кнопок, но в данном случае мы выбираем первую — Отправить ссылку.

    Справа будем находится поле с кодом который нужно скопировать и вставить на сайт куда Вам нужно. Вот как этот код выглядит:

    Вот и всё мы научились добавлять кнопки. Теперь нам нужно их выровнять и немного украсить..

    Выравнивание кнопок как на сайт.

    Для начала я придумал простой класс для стилей CSS — «sochknop». А вот как выглядят сами стили CSS с этим классом:

    #sochknop { opacity: 0.7; margin-bottom:20px; margin-left:55px; margin-top:45px; -moz-transition: opacity 0.3s 0.05s ease; -o-transition: opacity 0.3s 0.05s ease; -webkit-transition: opacity 0.3s 0.05s ease; } #sochknop:hover { margin-top:45px; opacity: 1; } #sochknop span { -o-margin-top:40px; padding:0px 0px; line-height:10px; float:left; }

    Как видите, что для переменной sochknop я добавил : и . Это добавляет плавную прозрачность для кнопок. Если Вам этот не нравится просто удалите строчку opacity:

    Теперь давайте посмотрим как это будет выглядеть в HTML.

    Пример кода без кодов кнопок (чтобы было понятнее)

    Кнопка от Гугл+ Кнопка от вКонтакте Кнопка от Твиттера Кнопка от Фейсбука

    Пример кода с кодами кнопок:

    window.___gcfg = {lang: "ru"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script"); s.parentNode.insertBefore(po, s); })(); VK.Widgets.Like("vk_like", {type: "button"}); !function(d,s,id){var js,fjs=d.getElementsByTagName(s);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    Друзья расположение кнопок Вы можете менять как Вам удобно.

    Несколько лет назад были очень популярны сервисы закладок. Сейчас их практически полностью заменили "лайки " социальных сетей. Я долгое время не хотел устанавливать эти кнопки на свой сайт, но, в конце концов, сдался и поставил – сейчас эти кнопки чуть ли не единственный способ получить "социальный" трафик, так как сервисы закладок уже давно никому не интересны. Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 4 сервиса. По понятной причине – Вконтакте мало кому известен за пределами России и его поддержку игнорируют. Впрочем, оно и к лучшему – зачем грузить WordPress лишними плагинами, когда установку этих кнопок можно легко сделать вручную?

    1 Установка кнопки Вконтакте

    Виджет "Мне нравится " от Вконтакте можно получить .

    Будьте внимательны! Кнопка Вконтакте единственная кнопка, в коде которой указывается ID подключаемого сайта. На приведенном скриншоте код будет нерабочим до тех пор, пока вы не нажмете на кнопку "Сохранить" – только тогда в коде API_ID будет заменен на ID вашего сайта и код станет рабочим.

    Устанавливать кнопку надо в 2 этапа, сначала откройте файл header.php вашего шаблона и вставьте вызов скриптов в head секцию. Примерно так:

    ... ...

    ... VK.init({apiId: API_ID, onlyWidgets: true}); ...

    Понятное дело, что вместо API_ID у вас должен будет указан ID вашего сайта.

    Саму кнопку надо устанавливать кодом:

    Не удивляйтесь, если на локальном сервере вместо кнопки вы увидите надпись "Please specify correct base domain name in app":

    Это просто глюк, которого не будет, когда вы перенесете сайт к хостеру. Впрочем, чтобы увидеть эту кнопку на локальном сервере достаточно открыть сайт в браузере Opera. Как ни странно, именно в Опере кнопка будет отображена даже на локальном сервере.

    2 Установка кнопки Facebook

    Виджет "Мне нравится " от Facebook можно получить .
    Вы увидите вот такую страницу:

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

    3 Установка кнопки Twitter

    Кнопку "Твитнуть " от Twitter можно получить .
    Вы увидите вот такую страницу:

    Здесь вообще все просто – выбирайте опции и копируйте указанный код туда, где вы хотите вывести кнопку.

    4 Установка кнопки G+

    Кнопку "G+ " от Google можно получить .
    Вы увидите вот такую страницу:

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

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

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

    VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20});

    VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); !function(d,s,id){var js,fjs=d.getElementsByTagName(s);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); window.___gcfg = {lang: "ru"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script"); s.parentNode.insertBefore(po, s); })();

    То есть вызов кнопок у меня обернут дивом post-meta-social , который определен в styles.css таким образом:

    .post-meta-social{ padding : 0px ; margin : 0px ; margin-top : 10px ; margin-bottom : 10px ; display : inline ; } .post-meta-social #vk_like { float : left ; width : 170px !important; } .post-meta-social .fb-like{ float : left ; width : 150px !important; } .post-meta-social #tweet_like { float : left ; width : 120px !important; } .post-meta-social .g-plusone{ float : left ; }

    Post-meta-social{ padding: 0px; margin: 0px; margin-top: 10px; margin-bottom: 10px; display: inline; } .post-meta-social #vk_like{ float:left; width:170px!important; } .post-meta-social .fb-like{ float:left; width:150px!important; } .post-meta-social #tweet_like{ float:left; width:120px!important; } .post-meta-social .g-plusone{ float:left; }

    Примерка © 2024 Компьютеры. Безопасность. Звуки и карты. Обзоры