Главная
Web-дизайн
Кнопки «мне нравится» вконтакте, facebook, твитнуть и google +1

Кнопки «мне нравится» вконтакте, facebook, твитнуть и google +1

Доброго времени суток. 🙂
Привет! Социальные сети очень крепко вошли в нашу жизнь. Посмотрите сколько кругом людей целыми днями, зависают в facebook, vkontakte, twitter, google + и других сетях.

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

В этом нам помогут кнопки «мне нравится» вконтакте, facebook, также кнопка твитнуть и кнопка google +1, которые будут расположены в конце статьи.

 

Работают они очень просто! Когда посетитель вашего сайта прочитал статью и она очень сильно понравилась, ему захочется высказать свое мнение о ней. Но многих затрудняет оставлять комментарий, это надо ввести «Имя», «Почту», «Сайт» и «Антикапчу», а тут они видят кнопку «мне нравится» нажимают на нее и дело сделано.

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

Кнопка «мне нравится» вконтакте

Для того, чтобы добавить кнопку мне нравится на сайт, первым дело переходим на страницу регистрации кнопки vkontakte и заполняем поля с названием вашего сайта. Далее выбираем формат и размер кнопки «мне нравится».

 

кнопка мне нравится вконтакте

 

Теперь необходимо скопировать "1 Часть кода" и добавить ее в файл header.php перед закрывающим тегом </head>.

 

1
2
3
4
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
VK.init({apiId: 2970045, onlyWidgets: true});
</script>

Далее копируем "2 Часть кода" и вставляем ее в любое место на сайте, где хотите, чтобы показывалась кнопка «мне нравится» вконтакте. Так как я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php.

 

1
2
3
4
<div id="vk_like"></div>
 <script type="text/javascript">
 VK.Widgets.Like("vk_like", {type: "button", height: 18});
 </script>

кнопка мне нравится на сайт

 

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

вконтакте

 

Кнопка google +1

 

Для того, чтобы добавить кнопку «google +1» на сайт или блог переходите по этой ссылке и попадает на страницу простого конструктора.

 

кнопка google +1

 

Выбираете размер кнопки (маленькая, средняя, большая). Не забудьте выбрать русский язык.

 

кнопка google +1 на сайт

 

Затем вставляете "1 Часть кода" в то место, где планируете установить кнопку «google +1». Я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php.

 

<g:plusone size="medium"></g:plusone>

Далее надо вставить "2 Часть кода" в файл footer.php перед закрывающим тегом </body>

 

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);
})();
</script>

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

гугл +1

 

Кнопка твитнуть

 

Если вы хотите установить кнопку «твитнуть» на сайт переходите по этой ссылке и попадаете на страницу конструктора twitter.

 

кнопка твитнуть

 

Выбираете из предложенных кнопочек самую подходящую для вас. Мне понравился вариант «Отправить ссылку».

 

кнопка твитнуть на сайт

 

Выбираете в настройках русский язык и копируете код в то место, где планируете сделать показ кнопки «твитнуть». В моем варианте это файл single.php.

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

твитнуть

 

Кнопка мне нравится facebook

 

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

кнопка мне нравится 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 и другие).

Далее нажимаем кнопку «Get Code» и появляется окно с двумя кодами, которые надо добавить в шаблон темы сайта.

 

кнопка фейсбук мне нравится

 

Первую часть кода устанавливаем перед закрывающим тегом </body> в файле footer.php.

1
2
3
4
5
6
7
8
<div id="fb-root"></div>
 <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'));</script>

Вторую часть кода кнопки «мне нравится» facebook добавляем в то место, где будет показываться кнопка. У меня под текстом, значит файл single.php.

<div data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>

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

фейсбук

После некоторой настройки расположения кнопок «мне нравится» вконтакте, facebook, а также кнопки «твитнуть» и кнопки «google +1» у меня получился вот такой результат.

 

как добавить кнопку мне нравится

 

На этом все!




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 2, в среднем: 5 из 5

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко