Убил несколько дней, пока разобрался до конца со всеми наворотами кнопок “мне нравится” от вконтакте и 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 – это уникальный идентификатор ссылки для подсчета лайков. Т.е. мы можем установить несколько кнопок “мне нравится” с разными идентификаторами и одной ссылкой, или вообще несколько абсолютно разным кнопок “мне нравится” с разными ссылками и отображением .
Надеюсь, информация не была бесполезной.
Что дают лайки ВКонтакте
Узнаем, как ставить лайки ВКонтакте под записями и под картинками. Смотрим список всех людей, поставивших сердечки под определенной записью. Пользуемся приложением «Лайкомер», позволяющим смотреть, какие посты на стене набирают большее количество сердечек. Узнаем, как получать лайки на свои записи.
"Мне нравится " в ВК – это способ выразить согласие с автором поста, одобрить изложенную в нем информацию. Таким образом, каждый пользователь ВКонтакте может почувствовать себя причастным к тому или иному посту.
Кнопка "Мне нравится " ВКонтакте представлена в виде сердечка. Она имеет весьма эстетичный внешний вид. Виджет "Мне нравится " по достоинству оценили миллионы пользователей. Они регулярно нажимают на эту кнопку. Кнопка "Мне нравится " в VK расположена с правой стороны от поста. Она представляет собой сердечко светло-голубого цвета, а после нажатия на нее сердечко становится синим.
Как поставить лайк под записьюКак поставить сердечко в Контакте? Очень просто.
Теперь вы знаете, как делать сердечки. Можете лайкать любой пост, который вам понравится. В пабликах и группах обычно сердечек много, так как делать лайки любят многие пользователи. Посты в популярных пабликах за пару минут набирают сотни лайков. Завораживающее зрелище: вы заходите в "Новости " и видите, как под определенным постом постепенно набирается множество лайков. Пользователи одновременно лайкают свеженький пост, едва завидев его в ленте.
Как поставить лайк под картинкойДавайте еще рассмотрим, как ставить сердечки напротив картинки. Это тоже легко.
Таким образом, мы дали знать, что картинка нам нравится.
Зачем нужны лайки?Некоторые люди не понимают, зачем нужны лайки в Контакте. Ответ прост: для того, чтобы человек мог продемонстрировать, что пост ему нравится, а автор поста – увидеть, что запись вызвала у пользователей положительные эмоции. Зачем автору знать, скольким пользователям понравился пост? Для того чтобы быть в курсе пользовательских предпочтений и знать, какого рода информацию стоит размещать в группе или паблике.
Что дают лайки ВКонтакте? Люди видят, что пост собрал много лайков, и понимают, что он заслуживает внимания. Мимо такой записи VK люди уже не пройдут просто так. Они обязательно прочитают ее и задумаются над изложенной в ней информацией.
Когда появились лайки?Многие интересуются, когда появились лайки в Контакте. Это случилось относительно недавно. Кнопка появилась 12 октября 2010 года . Прошло всего лишь чуть больше трех лет. А тем, кто зарегистрирован давно, кажется, будто эта функция существует уже очень долгое время. И не удивительно, ведь сейчас уже сложно представить свою деятельность в социальной сети без этой кнопочки.
Самое большое количество лайков собрал пост в паблике «Музыка ». Их насчитывалось 1500000.
Как посмотреть лайкиЕсли вы хотите узнать, как посмотреть лайки ВК, просто наведите курсор на сердечко. Вы сразу же увидите список людей, которым понравился пост.
Можно еще нажать по открывшемуся окну, и тогда перед вами предстанет полный список лайкнувших.
Теперь вы знаете, как посмотреть чужие лайки. Это очень просто. Возможно, под впечатлением от огромного списка, вы тоже захотите нажать на сердечко. А как поставить лайк ВКонтакте, мы уже говорили.
«Лайкомер»ВКонтакте есть интересная программа, позволяющая пользователю смотреть, какие записи на его стене получают больше всего лайков и кто наиболее активно лайкает. Называется программа «Лайкомер ». Скачать лайкомер ВКонтакте не нужно, достаточно просто запустить приложение по этому адресу.
Всем привет! Сегодня речь пойдёт о таких фишках, как кнопка «мне нравится » от вконтакте и фейсбук. Расскажу, как установить на сайт кнопку мне нравится . Как настроить кнопку мне нравится от вконтакте .
Вот посетители читают статьи на вашем блоге или сайте, вы написали классный материал, «молодцы» - говорят ваши читатели, но комментировать лень… Это ж нужно либо авторизироваться, либо заполнять поля формы: своё имя, писать комментарий, да ещё и капчу вводить, где символы то не всегда разобрать можно… Вот тут то и будет полезна кнопка мне нравится ! Нажмёт на неё человек и всё!
А через некоторое время вы, зайдя в свою статью, наведёте курсор мышки на кнопку «мне нравится » - появится окошко, где будут показаны все люди, кому ваша статья действительно понравилась с их аватарками, кликнув по которым можно перейти в профиль человека на сайте vkontakte или facebook. И, если хотите, можете с ним познакомиться, а может даже сотрудничать в будущем!
Давайте перейдём к установке кнопки мне нравится от vkontakte.ru
Как установить кнопку мне нравится на сайт или блог?
Переходим на страничку виджета «мне нравится» вот по этой ссылке . Перед вами появится форма настройки кнопки мне нравится от vkontakte .
Тут думаю всё просто - заполняем поля формы, название, адрес сайта, основной домен для сайта, выбираем вариант кнопки мне нравится от вконтакте . Выбираем высоту кнопки (данная опция появилась недавно). Обратите внимание на код для вставки, первую часть кода до слов вставьте между тегами своего сайта. Если ваш блог сделан на CMS WordPress, то теги находятся в файле header.php. Вторую часть этого кода вставьте в нужное место своего сайта, там, где вы бы хотели видеть кнопку мне нравится от vkontakte . Опять же, если у вас блог сделан на WordPress, то вставляйте код в файл single.php вашей темы.
Настраиваем кнопку мне нравится от вконтакте.
У кнопки «мне нравится » vkontakte есть ещё несколько интересных параметров настройки, кроме указанных явно в самой форме. Давайте их разберём:
Width
- ширина кнопки мне нравится
pageTitle
- название страницы (отображается на стене вконтакте)
pageDescription
- краткое описание (отображается на стене)
pageImage
- адрес миниатюрной картинки (отображается на стене)
text
- ваш текст, появится на стене вконтакте (не более 140 символов).
Задаются эти параметры в строчке VK.Widgets.Like("vk_like", {type: "full"});
через запятую после атрибута type:"full"
. Выглядеть это будет следующим образом:
VK.Widgets.Like("vk_like", {type: "full", width: 100, height: 20, pageTitle: "Кнопка мне нравится", pageDescription: "Как установить кнопку мне нравится на свой сайт", text: "Интересная, полезная статья!"});
На этом с кнопкой мне нравится от вконтакте я закончу. Ещё пару слов про кнопку facebook , тут всё гораздо проще! Ниже приведён код кнопочки, скачайте его в конце этой статьи, и вставьте себе на страницу, туда, где хотите видеть эту кнопочку.
В коде ничего менять не нужно.
На сегодня всё! Теперь и вы знаете, как установить кнопку мне нравится от vkontakte и facebook на свой сайт или блог. Как настроить кнопку мне нравится от вконтакте . Надеюсь, эта статья была вам полезна. Советую получать новые статьи на e-mail , впереди много новой интересной информации, бесплатных видеокурсов, скриптов и конкурсов моего сайта.
Если у вас есть сайт или блог, почему тогда не использовать данные социальные сети, чтобы , наращивать , делая проект все популярнее и популярнее.
В этом нам помогут кнопки «мне нравится» от Вконтакте, Facebook, а также кнопки Твитнуть и Google +1, которые будут расположены в конце статьи.
Работают они очень просто! Когда посетитель вашего сайта прочитал статью и она ему понравилась, тогда скорее всего он захочет высказать свое мнение о ней.
Но многих затрудняет оставлять комментарий, это надо ввести «Имя», «Почту», «Сайт» и «Антикапчу», а тут они видят кнопку «мне нравится» нажимают на нее и дело сделано, ссылка на ваш пост отобразится в социальной ленте посетителя и ее смогут увидеть все его подписчики и друзья.
А это уже новые бесплатные посетители, плюс поисковые системы любят социальные сигналы и запросто могут такую страницу начать выше ранжировать в ТОП выдаче.
В прошлом уроке я рассказывал, в виде значков, расположенных вертикально или горизонтально в любом месте сайта — прочтите статью обязательно.
Кнопка «мне нравится» от ВконтактеДля того, чтобы добавить кнопку «мне нравится» на сайт, первым дело переходим на страницу регистрации кнопки vkontakte и заполняем поля с названием вашего сайта.
Теперь необходимо скопировать "1 Часть кода " и добавить ее в файл header.php перед закрывающим тегом .
| 1 2 3 4 | < script type= "text/javascript" src= "http://userapi.com/js/api/openapi.js?49" > < script type= "text/javascript" > VK. init({ apiId: 2970045 , onlyWidgets: true } ) ; |
VK.init({apiId: 2970045, onlyWidgets: true});
Так как я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .
| 1 2 3 4 | < div id= "vk_like" > < script type= "text/javascript" > VK. Widgets. Like("vk_like" , { type: "button" , height: 18 } ) ; |
VK.Widgets.Like("vk_like", {type: "button", height: 18});
Перезагружаем страницу и смотрим результат.
Для того, чтобы добавить кнопку «google +1» на сайт или блог переходите по этой ссылке и попадает на страницу простого конструктора.
Выбираете размер кнопки (маленькая, средняя, большая). Не забудьте выбрать русский язык.
Затем вставляете "1 Часть кода " в то место, где планируете установить кнопку «google +1». Я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .
| < g: plusone size = "medium"> |
| 1 2 3 4 5 6 7 8 9 | < script type= "text/javascript" > 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 = {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); })();
Перезагружаем страницу и смотрим полученный результат. Если кнопка не нравится можно поменять настройки ее в конструкторе.
Кнопка «Твитнуть»Если вы хотите установить кнопку «твитнуть» от соц сети микроблогов twitter переходите по этой ссылке и попадаете на страницу конструктора.
Выбираете из предложенных кнопочек самую подходящую для вас. Мне понравился вариант «Отправить ссылку» .
Выбираете в настройках русский язык и копируете код в то место, где планируете сделать показ кнопки «твитнуть». В моем варианте это файл single.php .
Перезагружаете страницу и наслаждаетесь полученным результатом.
Для того, чтобы добавить кнопку мне нравится от фейсбук нужно перейти по этой ссылке и произвести необходимые для вас настройки.
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 | < div id= "fb-root" > < script> (function (d, s, id) { var js, fjs = d. getElementsByTagName(s) [ 0 ] ; 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" ) ) ; |
(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 .
| < div data- send= "false" data- layout= "button_count" data- width= "450" data- show- faces= "true" > |
Перезагружаем и смотрим полученный результат.
После некоторой настройки расположения кнопок «мне нравится» Вконтакте, Facebook, а также «Твитнуть» и «Google+» у меня получился вот такой результат.
На этом все! Надеюсь, моя статья поможет вам в настройке и установке кнопок социальных сетей. Не пропускайте следующие посты, подписывайтесь обновлений блога.
Если что-то не получается или у вас есть вопросы по теме пишите в службу поддержки или оставляйте комментарий, помогу обязательно!
Здесь вы можете скачать уникальные шаблоны для Blogger . Темы данной подборки отличаются более продвинутой SEO оптимизацией .
Языки : Английский, Русский.
Типы : Новостные, Журнальные, Блог, Минимализм, Портфолио, Одностраничные, Галерея, Grid "сетка", Интернет магазин, Визитки, Корпоративные сайты.
Тематики : Спорт, Фотографии, Игры, Кулинария, Стиль и мода, Женские, Детские, Автомобили, Здоровье, Путешествия, Туризм, Дизайн, Ремонт домов, Интерьер, Природа, Животные, Танцы, Видео, Музыка, Политика, Экономика, Бизнес, Форекс, Искусство, Картинки, Обои, Заработок, Недвижимость, Рыбалка, Охота, Софт, Программное обеспечение, Игровые приложения Android.
Технологии : Jquery, AMP, Bootstrap, Ajax, Javascript, Адаптивный дизайн.
Лучшие шаблоны blogger, выбор пользователей
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 был создан не только для успешного продвижения вашего веб-ресурса в поисковых системах, но и для того, чтобы поднимать настроение его пользователям и читателям.
