Одной из самых популярных кнопок, которые пользователи Интернета устанавливают себе на сайт или блог является кнопка «Мне нравится» от социальной сети Вконтакте. Именно о ней сегодня пойдёт речь. Я расскажу Вам как устанавливать данную кнопку себе на сайт либо блог.
В чем преимущество кнопки «Мне нравится» от ВКонтакте?
В социальной сети ВКонтакте зарегистрированы десятки миллионов человек. Многие из них интересуются и хотят зарабатывать с помощь Интернета. И вот кто-то зашел на Ваш сайт либо блог, прочитал статью и порекомендовал её своему другу в ВКонтакте, тот ещё кому-то и т. д. Таким образом у Вас появятся новые посетители, а пользователи Контакта найдут то, что им нужно и все останутся довольными. Надеюсь понятно.
Теперь давайте перейдем к установке кнопки «Мне нравится» от ВКонтакте.
Устанавливаем кнопку «Мне нравится» на сайт
Сайт/приложение : выбираем «Подключить новый сайт» Название сайта : здесь прописываем название своего сайта (блога) Адрес сайта : пишем адрес своего сайта (блога) Основной домен сайта : указываем основной домен сайта (блога)
Варианты кнопки — выбираем тип кнопки из предложенных вариантов:
Виджет ВКонтакте. Виджет Мне Нравится ВКонтакте! Галина Петрова.
Высота кнопки — выбираем размер кнопки в пикселях
Название кнопки — по своему усмотрению «Мне нравится» либо «Это интересно»
Источник: www.tariferix.ru
Html кнопка вконтакте. Вставляем кнопку “Мне нравится” от ВКонтакте. Делай свой контент разнообразным
Процедура создания кнопки Вконтакте проста, но для того, чтобы виджет лайков ВК работал правильно, необходимо выполнить все требования. Все дальнейшие инструкции будем выполнять исходя из того, что у вас есть учетная запись ВК, и вход в нее выполнен.
Для начала перейдем по ссылке «Разработчикам» (находится внизу интерфейса) и выберем вкладку «Мои приложения». Если ранее вы не создавали виджеты ВК, список приложений будет пуст. Вам необходимо создать новое. Сделать это можно, кликнув по ссылке «Создать приложение».
После создания приложения необходимо подтвердить право на управление им. Это можно сделать через пятизначный СМС-код или через привязанное к учетной записи устройство. Выполнив подтверждение, зайдем в настройки приложения и включим его. На этом манипуляции с приложением закончены.
Кнопка мне нравится вконтакте — виджеты вконтакте для сайта — установить кнопку вконтакте
Откроем вкладку «Документация» и выберем подраздел «Сайты и виджеты». В блоке «Виджеты для сайта» выберем необходимый виджет – «Мне нравится».
В открывшейся форме выберем наше приложение, вариант кнопки и ее оформление. Из текстового блока заберем код для вставки.
Размещение виджета в шаблоне Котонти
Откроем шаблон header.tpl и в блоке head разместим код, который примерно выглядит так:
Там, где необходимо разместить непосредственно саму кнопку лайков, например в шаблоне page.tpl, добавим код:
Здравствуйте, уважаемые читатели блога сайт! Продолжаем изучение соцсетей как объектов SMO и CMM продвижения. Сейчас на очереди серия статей, в которых я постараюсь раскрыть все подробности установки кнопок социальных сетей. Прошлый материал был посвящен тому, как добавить от и Facebook ( о регистрации и основных настройках, а о Моей странице в Фейсбуке подробнейшие сведения).
Сегодня же поговорим о кнопках от Твиттера, ВКонтакте и остальных крупнейших социалок. Причем, как я уже упоминал, в статье о social buttons Гугл плюс и Фейсбука, ссылка на которую дана чуть выше по тексту, кнопки можно установить двумя способами. Во-первых, получив код при помощи конструктора, который имеется в распоряжении всех популярных сервисов. Во-вторых, создав социальные кнопки самостоятельно. И тот, и другой метод имеет свои плюсы и минусы, поэтому рассмотрим оба.
Получение кода и установка кнопки от ВКонтакте и от сервиса микроблоггинга Твиттер
А теперь непосредственно переходим к получению кнопки для расшаривания от Твитера. Для этого нужно оказаться на и произвести соответствующие настройки:
Как видите, здесь есть возможность сгенерировать код для четырех кнопок с различным функционалом. Пока рассмотрим первый вариант, поскольку именно он обеспечивает создание кнопки «Твитнуть», с помощью которой пользователи будут делиться интересным материалом вашего сайта со своими друзьями.
Именно этот вариант подходит для стандартного блога Вордпресс, если вы желаете выводить кнопочки расшаривания после каждой публикуемой статьи, то есть для динамических страниц записей. Первая часть результирующего кода будет примерно такой:
Только не забудьте прописать для тега A, который определяет ссылку в HTML, атрибут rel=“nofollow” с тем, чтобы не допустить утечки веса страницы. И обязательно замените значение атрибута data-via, поставив свое имя пользователя в Твиттере, проще говоря, свой логин, который используете для авторизации в этой социалке.
Для оптимизации скорости загрузки страницы вашего сайта эту первую часть нужно вставить на то место, где бы вы хотели видеть социальную кнопку от Twitter. Если после каждой публикации, то открываете шаблон SINGLE.PHP (для большинства тем WordPress) и находите такую строку:
Вставляете первую часть после этого фрагмента PHP кода, который отвечает за вывод постов. Обращаю ваше внимание на то, что названия шаблонов, где присутствует данная функция, могут быть разными, однако в большинстве из них присутствует составляющая SINGLE. Поскольку обычно кнопки соцсетей располагают для удобства в одном месте в одну строку, то ниже я приведу скриншот шаблона SINGLE.PHP, где у меня находится блок кнопочек. Вторая часть (скрипт):
остается неизменной и вставляется для ускорения загрузки страницы обычно перед закрывающим тегом BODY в шаблон FOOTER.PHP. Опять же, чуть ниже увидите соответствующую картинку.
Теперь попробуем получить кнопку для добавления ваших материалов пользователями в социальную сеть ВКонтакте ( — регистрация ВК и вход в Контакт и настройка профиля). С этой целью идем на страницу генератора кода и выполняем необходимые настройки:
Здесь, по-моему, совсем и всем все понятно. Настройки стандартной кнопки даны по умолчанию. Вы можете, в зависимости от своих пристрастий, поменять форму button, отказаться от скругления углов, а также ввести любой текст, который будет отображаться на кнопке (по умолчанию — «Сохранить»).
Первую часть полученного кода (выделена красным) рекомендуется вставить между открывающим и закрывающим тегами HEAD. Для обычной следует открыть файл HEADER.PHP и (можно перед закрывающим тегом) вставить этот фрагмент:
Снова приведу пример для наглядности (замечу, что скрипт можно поместить и перед закрывающим BODY, как в других случаях, но для разнообразия надо рассмотреть и этот вариант):
Ну, а второй фрагмент опять же помещаете туда, где хотите видеть кнопку. Для динамических страниц блога Вордпресс это шаблон SINGLE. Повторюсь, что возможны исключения, об этом я подробно писал в материале о получении кнопочек от Гугл+ и Фейсбука, ссылка на этот пост в самом начале публикации. Кстати, как и обещал, начинаем разбирать действия, которые помогут понять до конца не только алгоритм вставки необходимых кодов, но и настройку кнопок для их адаптации к дизайну вашего сайта.
Определение свойств CSS для блока кнопок (на примере Google plus, Facebook, Twitter, VKontakte)
Итак, надеюсь, вы поняли, как и куда вставлять полученные коды для кнопок соцсетей. Для закрепления, как и обещал приведу пример, как размещены части кодов четырех кнопок самых популярных социальных сетей у меня на блоге. Для начала скриптовые части кодов кнопок в шаблоне FOOTER (для VKontakte, по рекомендации, если помните, мы поместили скрипт между тегами HEAD, обратите внимание на скриншот выше):
А вот участки, отвечающие собственно за месторасположение социальных кнопочек (SINGLE.PHP):
Каждую из кнопок я заключил в и прописал соответствующие стили CSS, чтобы они выглядели красиво и соответствовали дизайну страниц сайта. С этой целью определил для каждого DIV, дав им названия и назначив свойства с определенными параметрами:
Попробуйте скопировать предложенный мной вариант и вставить в файл style.css своей темы WordPress (можно в самый конец, чтобы не путаться). Уверен, что многим такие стили окажутся подходящими. Если же в какой-то теме кнопки будут выглядеть некорректно, можно поиграть с числовыми значениями каждого из свойств. Если это покажется вам непосильной задачей, обратитесь к разделу блога , в котором познаете основы каскадных таблиц стилей. Вот как после этого примерно будет выглядеть набор кнопочек:
Официальные кнопки от сайтов Одноклассники и Surfingbird
На примере четырех популярных в рунете и в мире социальных сервисов (Твиттер и ВКонтакте довольно подробно рассмотрены в этой статье, а Гугл+ и Фейсбук в предыдущей) мы разобрали алгоритм вставки кодов кнопочек на сайт Вордпресс. Теперь быстро пробежимся по остальным важнейшим сетям, пользователями которых вполне вероятно могут оказаться ваши читатели.
Думаю, вы уже на автомате сориентируетесь, куда вставить первый отрывок (выделенный зеленым):
а куда скриптовый фрагмент:
Возможно, кто-то захочет установить Share Button от сервиса Surfingbird. В таком случае настроить получение кода можно на его официальной странице :
Ежели желаете получить кнопку со счетчиком, вверху нажимаете «With counters». В конструкторе выбираете понравившуюся кнопку, просто щелкнув по ней. В результате снова получаем два куска code. Скрипт (выделен красным):
снова размещаем перед закрывающим BODY, а непосредственно кнопку (предварительно прописав nofollow):
В нужное место страницы.
Создание кнопок для социальных сетей самостоятельно (без скриптов и плагинов)
В заключение рассмотрим, как можно сделать кнопки расшаривания для своего сайта самому. Я уже говорил о том, что каждый метод производства соцкнопок обладает своими преимуществами и недостатками. Данный вариант не исключение.
К плюсам можно отнести отсутствие скрипта в коде (который все-таки оказывает определенную нагрузку на сервер и негативно влияет на скорость загрузки сайта), возможность легко прописать для каждой из кнопок атрибут rel nofollow, поскольку ссылка на ресурс указана в явном виде (хотя значение нофоллоу уже не так, как раньше, влияет на распределение веса страницы).
В общем, использование такой возможности во многих случаях небесполезно, особенно для молодых сайтов в свете необходимости завоевания ими авторитета. А в таких условиях мелочей быть не может, так что отсутствие скриптов, если этого можно избежать, может сыграть только на руку.
Перед тем, как начать, необходимо подготовить картинку, которую можно предварительно создать самому. Вот в этом открывается главное преимущество данного метода создания социальных кнопок. Картинку можно сделать какого угодно вида, цвета и формы, такой выбор просто невозможен при получении кодов от конструктора. Сконструировать изображения кнопочки можно, например, в , сохранить его на компьютере, а затем загрузить его в папку IMG, которая находится по адресу:
Еще одно преимущество самостоятельного создания картинок для кнопочек состоит в том, что подгрузка каждый раз происходит не со стороннего ресурса, а прямо с сервера вашего хостинга, это тоже уменьшает скорость загрузки. Для наглядности предлагаю скриншот с расположением папки IMG в иерархии директорий сайта:
Только обязательно обратите внимание на то, какое название имеет папка с изображениями (для некоторых тем она называется IMAGES). Впрочем, для social buttons вы можете создать свою папку, только нужно будет прописать для нее правильный путь. Ниже даю коды для каждого из сервисов при создании своих соцкнопок на сайте WordPress.
Как я уже сказал, атрибут REl=“NOFOLLOW” предназначен для того, чтобы закрыть от индексации поисковыми системами ссылку, а атрибут TARGET=“_BLANK” я проставил, чтобы обеспечить открытие Контакта в другой вкладке, это очень удобно для пользователей, поскольку страница сайта остается открытой.
Однако, с помощью атрибута ONCLICK для тега A, в качестве значения которого используется функция WINDOW.OPEN() от JAVASCRIPT можно сделать так, что будет открываться не новая вкладка, а именно новое окно добавления анонса статьи, причем можно прописать для него фиксированные размеры с помощью атрибутов WIDTH (600) и HEIGHT (400):
Впрочем, некоторые параметры, определяющие элементы управления окном (в том числе его размеры HEIGHT и WIDTH), могут быть уже установлены в конфигурации того или иного браузера, поэтому указанные значения могут не исполняться. Открытие нового окна небольших размеров, на мой взгляд, более удобно при расшаривании. В любом случае, для каждого сервиса приведу два варианта собственных кнопок (стандартный и с открытием нового окна).
Источник: tcso-video.ru
Что дают лайки вконтакте. Вставляем кнопку “Мне нравится” от ВКонтакте Мне нравится от ВКонтакте
Кнопка от В Контакте “Мне нравится” появилась уже на многих сайтах, блогах. Читатели блога также спрашивали у меня, как поставить ту самую заветную кнопку. Сегодня я решил Вам показать, как это делается.
Чтобы поставить “Мне нравится” от В Контакте, нужно конечно зарегистрироваться в данной социальной сети (хотя, наверное, тех, кого нет Вконтакте, осталось единицы). Из-за того, что в данной социальной сети очень много людей, кнопка от В Контакте может принести огромную пользу – привлечь дополнительных посетителей.
Далее выбираете тип кнопки, как будет выглядеть кнопка Вы сразу же увидите на той же странице, только чуть ниже:
Лично я предпочел выбрать пункт “Кнопка с текстовым счётчиком”. А название кнопки оставил “Мне нравится ”, можно также поставить “Это интересно”.
Дальше нам нужно вставить код в блог. Как я считаю, кнопка “Мне нравится” от Вконтакте должна стоять в конце статьи, чтобы читатель прочитал статью и, если ему понравилось, нажал на кнопку.
Чтобы кнопка была в конце статьи нам для начала нужно:
1) Скопировать часть кода, который дает нам Вконтакте от начала до (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 (); VK.Widgets.Like («vk_like», ); 3. Добавляем на сайт кнопку tweet Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки. Если у вас есть сайт или блог, почему тогда не использовать данные социальные сети, чтобы , наращивать , делая проект все популярнее и популярнее.
В этом нам помогут кнопки «мне нравится» от Вконтакте, Facebook, а также кнопки Твитнуть и Google +1, которые будут расположены в конце статьи. Работают они очень просто! Когда посетитель вашего сайта прочитал статью и она ему понравилась, тогда скорее всего он захочет высказать свое мнение о ней. Но многих затрудняет оставлять комментарий, это надо ввести «Имя», «Почту», «Сайт» и «Антикапчу», а тут они видят кнопку «мне нравится» нажимают на нее и дело сделано, ссылка на ваш пост отобразится в социальной ленте посетителя и ее смогут увидеть все его подписчики и друзья. А это уже новые бесплатные посетители, плюс поисковые системы любят социальные сигналы и запросто могут такую страницу начать выше ранжировать в ТОП выдаче. В прошлом уроке я рассказывал, в виде значков, расположенных вертикально или горизонтально в любом месте сайта — прочтите статью обязательно. Кнопка «мне нравится» от Вконтакте Для того, чтобы добавить кнопку «мне нравится» на сайт, первым дело переходим на страницу регистрации кнопки vkontakte и заполняем поля с названием вашего сайта. Теперь необходимо скопировать «1 Часть кода » и добавить ее в файл header.php перед закрывающим тегом .
| 1 2 3 4 | VK. init( < apiId: 2970045 , onlyWidgets: true >) ; |
VK.init(); Так как я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .
| 1 2 3 4 | VK. Widgets. Like(«vk_like» , < type: «button» , height: 18 >) ; |
VK.Widgets.Like(«vk_like», ); Перезагружаем страницу и смотрим результат. Кнопка от Google +1 Для того, чтобы добавить кнопку «google +1» на сайт или блог переходите по этой ссылке и попадает на страницу простого конструктора. Выбираете размер кнопки (маленькая, средняя, большая). Не забудьте выбрать русский язык. Затем вставляете «1 Часть кода » в то место, где планируете установить кнопку «google +1». Я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .
| 1 2 3 4 5 6 7 8 9 | 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» ) [ 0 ] ; s. parentNode. insertBefore(po, s) ; >) () ; |
window.___gcfg = ; (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); >)(); Перезагружаем страницу и смотрим полученный результат. Если кнопка не нравится можно поменять настройки ее в конструкторе. Кнопка «Твитнуть» Если вы хотите установить кнопку «твитнуть» от соц сети микроблогов twitter переходите по этой ссылке и попадаете на страницу конструктора. Выбираете из предложенных кнопочек самую подходящую для вас. Мне понравился вариант «Отправить ссылку» . Выбираете в настройках русский язык и копируете код в то место, где планируете сделать показ кнопки «твитнуть». В моем варианте это файл single.php . Перезагружаете страницу и наслаждаетесь полученным результатом. Кнопка «мне нравится» от Facebook Для того, чтобы добавить кнопку мне нравится от фейсбук нужно перейти по этой ссылке и произвести необходимые для вас настройки. URL to Like – данное поле не заполняем. Send Button (XFBML Only) — я убрал галочку Send Button, чтобы не было дополнительной кнопки «Отправить» . Layout Style – формат кнопки. Мне понравился botton_count, но на вкус и цвет сами знаете, как бывает с приятелями. Show Faces – ставим галочку, чтобы видеть аватарки тех, кому понравилась статья. WIdth – указывает ширину. Я оставил все без изменений. Verb to display – выбираете, какая надпись будет расположена на кнопке facebook. Здесь только два варианта: «like» – мне нравится или «recommend» – я рекомендую. Color Scheme — выбираете цветовую схему оформления. Для темного (dark ) или светлого (light ) сайта. Font – можете указать определенный шрифт названия кнопки (arial , verdana и другие). Первую часть кода устанавливаем перед закрывающим тегом в файле footer.php .
| 1 2 3 4 5 6 7 8 | (function (d, s, id) < var js, fjs = d. getElementsByTagName(s) [ 0 ] ; if (d. getElementById(id) ) return ; js = d. createElement(s) ; js. js. src = «//connect.facebook.net/ru_RU/all.js#xfbml=1» ; fjs. parentNode. insertBefore(js, fjs) ; >(document, «script» , «facebook-jssdk» ) ) ; |
(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 добавляем в то место, где будет показываться кнопка. У меня под текстом, значит файл single.php . Перезагружаем и смотрим полученный результат. После некоторой настройки расположения кнопок «мне нравится» Вконтакте, Facebook, а также «Твитнуть» и «Google+» у меня получился вот такой результат. На этом все! Надеюсь, моя статья поможет вам в настройке и установке кнопок социальных сетей. Не пропускайте следующие посты, подписывайтесь обновлений блога. Если что-то не получается или у вас есть вопросы по теме пишите в службу поддержки или оставляйте комментарий, помогу обязательно! Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для share чем для like, но плагин отличный), но если все же требуется установить стандартные лайки, тогда накидаю небольшую инструкцию (в первую очередь для себя;)). Виджет “Мне нравится” – Лайки ВКонтакте для сайта Для создания лайков Вконтакте заходим на эту страницу http://vk.com/dev/Like, далее настраиваем внешний вид самой кнопки, вводим Название, Адрес, Основной домен и Тематику, или же выбираем нужный сайт из выпадающего списка. Выбираем вариант кнопки, при выборе внизу будет показан пример будущей кнопки, выбираем высоту кнопки и ее название.
Нажимаем сохранить и получаем код для размещения на сайте такого вида:
Затем код, который выглядит примерно так: VK.init(); вставляем в код своего сайта перед закрывающимся тегом , для сайтов на CMS WordPress этот код нужно добавить в файл header.php . Важно! Если вы до этого добавляли на сайт комментарии Вконтакте или какие-то другие виджеты Вконтакте, то этот код у Вас уже будет размещен на сайте, дважды его добавлять не нужно. Вторую часть кода, которая выглядит примерно так: VK.Widgets.Like(«vk_like», ); вставляем в код своего сайта в то место, в котором кнопка “Мне нравится” должна выводиться, для сайтов на CMS WordPress этот код чаще всего добавляется в файл single.php . Like Button для Facebook Нажимаем “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/sdk.js#xfbml=1version=v2.0»; fjs.parentNode.insertBefore(js, fjs); >(document, «script», «facebook-jssdk»)); Размещаем в код своего сайта после открывающегося тега . Важно! Если вы до этого уже размещали на сайте виджет комментариев Facebook или другие виджеты Facebook, тогда этот код у вас уже размещен на сайте и дважды его ставить не нужно. Вторую часть кода, которая имеет примерно такой вид: копируем на свой сайт в то место, в котором кнопка Like будет выводиться. Важный момент! При копировании кода в файлы какой-либо CMS – нужно заменить параметр data-href во втором блоке (адрес сайта): на код для постоянных ссылок своего сайта, для CMS WordPress это , и получим такой код для второго блока, который нужно вставить в место вывода кнопки Like:
Источник: periscopes.ru