Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится " от социальной сети без лишних плагинов.
Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к 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 перед релизом страницы.
Документация к виджету
Я отмечал важность SMO (Social Media Optimization) в продвижение сайта. Теперь поговорим непосредственно о том, как сделать социальную оптимизацию на своем сайте, а точнее как добавить социальные кнопки популярных сетей на сайт.
Для начала покажу как это собственно говоря должно выглядеть на сайте. На многих блогах и новостных сайтах внизу после любой статьи можно увидеть нечто подобное:
Это и есть социальные кнопки, благодаря которым достигается SMO , а далее и социальная активность. Эта статья посвящена вопросу где взять код этих соц. кнопок и как правильно установить их к себе на сайте. Рассмотрим для начала установку Google+.
1. Добавляем на сайт кнопку Google+ 2. Добавляем на сайт кнопку "Мне нравится" от Вконтакте и Facebook 2.1. Мне нравится от FaceBookНачнем с получения кода кнопки для Facebook. Для этого зайдите на эту страницу: https://developers.facebook.com/docs/plugins/like-button . Вы должны увидеть следующую картину:
Справа вверху отображается как будет выглядеть кнопка у Вас на сайте. Разберемся с параметрами, которые можно задать:
1. URL to Like
Это необязательный параметр. Если оставить поле пустым, то у каждой страницы будет свой индивидуальный счетчик лайков. Если вписать туда какой-то конкретный адрес URLa , то счетчик будет единым (лайки суммируются со всех страниц этого сайта).
2. Send Button
Добавить или убрать кнопку для отправки сообщений. Я рекомендую убрать эту кнопку, т.к. наша цель поставить просто кнопку "мне нравится", хотя возможно у вас совсем другие цели.
3. Layout Style
Стиль отображения кнопки. Лично мне больше всего нравится standard.
4. Width
Ширина кнопки в пикселях. Я ставлю обычно не больше 100 пикселей.
5. Verb to display
Что будет отображено на кнопке: "мне нравится" или "я рекомендую". Обычно я выбираю первый вариант (стоит по умолчанию), поскольку это более действенный способ замотивировать пользователя поставить лайк.
6. Color Scheme
Цветовая гамма: либо белая, либо черная.
7. Font
Просто задание шрифта для надписи "мне нравится".
После задания настроек наживаем на кнопку "get code" и размещаем на сайте. Обычный код кнопки для facebook:
(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") ); 2.2. Мне нравится от ВКонтактеТеперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: https://vk.com/dev . У Вас должна открыться следующая страница:
Сначала нужно будет добавить новый сайт. Для этого выберите из выпадающего меню "сайт/приложение" пункт подключить новый сайт:
После добавления нового сайта сохраните его. Теперь выберите из выпадающего меню нужный сайт. Далее следуют небольшое число параметров: "вариант кнопки", "высота", "название кнопки" - это все настраивается под Ваш вкус. В конце будет код для кнопки:
VK.init ({apiId: 2872188, onlyWidgets: true }); VK.Widgets.Like ("vk_like", {type: "button"} ); 3. Добавляем на сайт кнопку tweetКак и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки.
Как добавить кнопку Контакта «Мне нравится» на свой блогИтак, чтобы установить себе на блог вот такую кнопочку
создаем , затем переходим по , подключаем новый сайт и выбираем нужный вариант кнопки:
Вот этот код нужно вставить внутри тега (в файле header.php):
VK.init({apiId: #######, onlyWidgets: true});
Не забудьте вместо знаков ###### вставить свои индивидуальные номера!
А вот этот код вставьте в то место, где Вы хотите разместить свою кнопку:
VK.Widgets.Like("vk_like", {type: "button"});
Как видите, я разместил эту кнопку после каждой статьи на блоге (файл single.php).
Как добавить кнопку Facebook Like ButtonС виджетом для Вконтакте.ру мы разобрались, теперь нужно установить виджет для фейсбука.
Переходим на , видим вот такое окно:
URL to Like – оставляем это поле пустым
Layout Style – стиль счетчика (я выбрал стандартный).
Width – ширина кнопки. Подберите её под свой дизайн (я выбрал 450рх).
Verb to display – какое слово будет отображаться на кнопке: Like (Нравится) или Recommend (Рекомендовать). Я остановился на первом варианте.
Font (шрифт) и Color Scheme (Цветовая схема) выбирайте на свой вкус.
После того, как Вы сделали нужные настройки, нажимаем на кнопку Get Code:
Появится вот такое окно:
Нас интересует код из верхнего поля iframe . Копируем этот код в то место, где Вы хотите видеть кнопку «I like».
Теперь очень важный момент! Если у Вас блог на WordPress, то после
http://www.facebook.com/plugins/like.php?href=
нужно вставить
У меня этот код выглядит вот так: