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

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

В этом нам помогут кнопки «мне нравится» от Вконтакте, 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

Для того, чтобы добавить кнопку «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 .

Перезагружаете страницу и наслаждаетесь полученным результатом.

Кнопка «мне нравится» от 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

< 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+» у меня получился вот такой результат.

На этом все! Надеюсь, моя статья поможет вам в настройке и установке кнопок социальных сетей. Не пропускайте следующие посты, подписывайтесь обновлений блога.

Если что-то не получается или у вас есть вопросы по теме пишите в службу поддержки или оставляйте комментарий, помогу обязательно!

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

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

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

Добавить сайт в соц. сеть вконтакте;

Настроить внешний вид кнопки;

Скопировать код и вставить на свой сайт.

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

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

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

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

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

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