Добавить кнопку мне нравится. Добавляем виджет «Мне нравится» (Вконтакте) и Facebook Like Button (Фейсбук) на свой блог. Лучшие шаблоны blogger, выбор пользователей

Убил несколько дней, пока разобрался до конца со всеми наворотами кнопок “мне нравится” от вконтакте и 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 – это уникальный идентификатор ссылки для подсчета лайков. Т.е. мы можем установить несколько кнопок “мне нравится” с разными идентификаторами и одной ссылкой, или вообще несколько абсолютно разным кнопок “мне нравится” с разными ссылками и отображением .

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

Здесь вы можете скачать уникальные шаблоны для Blogger . Темы данной подборки отличаются более продвинутой SEO оптимизацией .

Языки : Английский, Русский.

Типы : Новостные, Журнальные, Блог, Минимализм, Портфолио, Одностраничные, Галерея, Grid "сетка", Интернет магазин, Визитки, Корпоративные сайты.

Тематики : Спорт, Фотографии, Игры, Кулинария, Стиль и мода, Женские, Детские, Автомобили, Здоровье, Путешествия, Туризм, Дизайн, Ремонт домов, Интерьер, Природа, Животные, Танцы, Видео, Музыка, Политика, Экономика, Бизнес, Форекс, Искусство, Картинки, Обои, Заработок, Недвижимость, Рыбалка, Охота, Софт, Программное обеспечение, Игровые приложения Android.

Технологии : Jquery, AMP, Bootstrap, Ajax, Javascript, Адаптивный дизайн.

UberSpot отличное решение для тех, кому важен красивый дизайн, SEO оптимизация и эффективный функционал. В этой теме вы найдете ряд крутых и продуктивных новинок, например новый виджет Инстаграма, Карты сайта, Публикаций, Комментариев и др.. Так же вы сможете воспользоваться двумя разными типами макетов.

Unstoppable "Покоритель ниш". Это идеальное решение для однотематических сайтов и блогов. Задумка при создании темы была в том, чтобы реализовать бесконечную навигацию, передвижение по которой смогут отслеживать поисковые системы. Таким образом новая система навигации в отличии от предыдущих не просто увеличит поведенческий фактор, но и в полной мере отобразит его, что повлечет за собой рост позиций сайта в поиске. Но это еще не все, Unstoppable идеально подойдет для ресурсов трафик которых в основном с мобильных устройств. Почему? Потому что с появлением СЕО тренда mobile first index, Гугл стал ценить не только скорость загрузки страниц, но и удобство использования сайта на мобильных устройствах. И Unstoppable полностью соответствует этому критерию.

Сконструирован на базе новых Тем Блоггер из серии (СNES). Способен решать много поставленных задач. Можете использовать его со всеми виджетами, или частично, как персональный информационный блог. Скорость загрузки страниц приятно удивит.

BlogBoard один из лучших гридеров в 2018 году. Совмещает сразу несколько стилей. Можно использовать под блог-интернет магазин. Он отлично справится с презентацией ваших навыков и услуг так что подойдет и для портфолио.

Dionis обладает упрощенным типом подачи сообщений. Подойдет для любых ниш и историй. Из фишек можно выделить красивый preloader (анимационная картинка перед загрузкой главной страницы), рекомендуемые сообщения всплывают с правой стороны при скроллинге страницы.

Это быстрая и гибкая модель, которая впитала в себя несколько дополнений из социальных сетей. Отличный вариант для тех кто ценит свое время. Переведен на русский язык.

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

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

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

Потрясающая тема с классическим стилем, предназначенная для женских сайтов и блогов. Avicia это профессиональная тема с элегантным и современным дизайном, которая способна вдохновлять и передавать читателям только положительными эмоциями.

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

Единственное, что вам нужно знать об ExGPress это то, что он обладает самым удобным функционалом, под стать социальной сети, что обеспечит вашему сайту большой процент возвращений. Ко всему можно добавить SEO оптимизацию, высокую скорость загрузки и большой запас места для гаджетов и рекламы. ExGPress прорабатывался специально для комфортного просмотра контента и наилучшего взаимодействия с поисковыми системами, именно это делает его одним из лучших шаблонов для blogger на сегодняшний день. На днях добавили ему новую функцию, плавающие сайдбары, при прокрутке страницы вниз или вверх сайдбары с виджетами перемещаются вслед за скроллингом.

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

Узнаем, как ставить лайки ВКонтакте под записями и под картинками. Смотрим список всех людей, поставивших сердечки под определенной записью. Пользуемся приложением «Лайкомер», позволяющим смотреть, какие посты на стене набирают большее количество сердечек. Узнаем, как получать лайки на свои записи.

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

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

Как поставить сердечко в Контакте? Очень просто.

Теперь вы знаете, как делать сердечки. Можете лайкать любой пост, который вам понравится. В пабликах и группах обычно сердечек много, так как делать лайки любят многие пользователи. Посты в популярных пабликах за пару минут набирают сотни лайков. Завораживающее зрелище: вы заходите в "Новости " и видите, как под определенным постом постепенно набирается множество лайков. Пользователи одновременно лайкают свеженький пост, едва завидев его в ленте.

Давайте еще рассмотрим, как ставить сердечки напротив картинки. Это тоже легко.

Таким образом, мы дали знать, что картинка нам нравится.

Некоторые люди не понимают, зачем нужны лайки в Контакте. Ответ прост: для того, чтобы человек мог продемонстрировать, что пост ему нравится, а автор поста – увидеть, что запись вызвала у пользователей положительные эмоции. Зачем автору знать, скольким пользователям понравился пост? Для того чтобы быть в курсе пользовательских предпочтений и знать, какого рода информацию стоит размещать в группе или паблике.

Что дают лайки ВКонтакте? Люди видят, что пост собрал много лайков, и понимают, что он заслуживает внимания. Мимо такой записи VK люди уже не пройдут просто так. Они обязательно прочитают ее и задумаются над изложенной в ней информацией.

Многие интересуются, когда появились лайки в Контакте. Это случилось относительно недавно. Кнопка появилась 12 октября 2010 года . Прошло всего лишь чуть больше трех лет. А тем, кто зарегистрирован давно, кажется, будто эта функция существует уже очень долгое время. И не удивительно, ведь сейчас уже сложно представить свою деятельность в социальной сети без этой кнопочки.

Самое большое количество лайков собрал пост в паблике «Музыка ». Их насчитывалось 1500000.

Если вы хотите узнать, как посмотреть лайки ВК, просто наведите курсор на сердечко. Вы сразу же увидите список людей, которым понравился пост.

Можно еще нажать по открывшемуся окну, и тогда перед вами предстанет полный список лайкнувших.

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

ВКонтакте есть интересная программа, позволяющая пользователю смотреть, какие записи на его стене получают больше всего лайков и кто наиболее активно лайкает. Называется программа «Лайкомер ». Скачать лайкомер ВКонтакте не нужно, достаточно просто запустить приложение по этому адресу.

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

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

Как видите, устанавливается кнопка мне нравится на сайт очень быстро. А теперь обо всем по порядку.

1. Перейдите сначала вот сюда и подключите свой сайт, если его там нет. Для этого заполните несколько полей. Вот, как это сделано у меня:

2. Теперь вам нужно настроить внешний вид кнопки. Внизу вы всегда можете посмотреть, что у вас получилось. Я, например, выбрал кнопку с миниатюрным счетчиком. Названия кнопки «мне нравится». А высоту так и оставил 22 px.

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

и вставьте его в header.php перед тегом /head (если сайт на движке wordpress). После этого скопируйте вторую часть кода

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

Для начала перейдите вод сюда . Если вы не авторизованы, то сделайте это. Теперь на этой страницы нам нужно сначала заполнить некоторые поля. Хотя они на английском языке, но ничего страшного, разберемся: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 перед тегом /body . А вторую часть в то место, где вы хотите видеть кнопку «Мне нравится» от Facebook на своем сайте. Можете разместить после кода кнопки «Мне нравится» от Вконтакте в файл single.php.
На этом у меня все. Как вам статья? 😉

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

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

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

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