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

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

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

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

Я отмечал важность SMO (Social Media Optimization) в продвижение сайта. Теперь поговорим непосредственно о том, как сделать социальную оптимизацию на своем сайте, а точнее как добавить социальные кнопки популярных сетей на сайт.

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

Это и есть социальные кнопки, благодаря которым достигается SMO , а далее и социальная активность. Эта статья посвящена вопросу где взять код этих соц. кнопок и как правильно установить их к себе на сайте. Рассмотрим для начала установку Google+.

1. Добавляем на сайт кнопку Google+

2. Добавляем на сайт кнопку "Мне нравится" от Вконтакте и Facebook 2.1. Мне нравится от FaceBook

Начнем с получения кода кнопки для Facebook. Для этого зайдите на эту страницу: https://developers.facebook.com/docs/plugins/like-button . Вы должны увидеть следующую картину:

Справа вверху отображается как будет выглядеть кнопка у Вас на сайте. Разберемся с параметрами, которые можно задать:

1. URL to Like
Это необязательный параметр. Если оставить поле пустым, то у каждой страницы будет свой индивидуальный счетчик лайков. Если вписать туда какой-то конкретный адрес URLa , то счетчик будет единым (лайки суммируются со всех страниц этого сайта).

2. Send Button
Добавить или убрать кнопку для отправки сообщений. Я рекомендую убрать эту кнопку, т.к. наша цель поставить просто кнопку "мне нравится", хотя возможно у вас совсем другие цели.

3. Layout Style
Стиль отображения кнопки. Лично мне больше всего нравится standard.

4. Width
Ширина кнопки в пикселях. Я ставлю обычно не больше 100 пикселей.

5. Verb to display
Что будет отображено на кнопке: "мне нравится" или "я рекомендую". Обычно я выбираю первый вариант (стоит по умолчанию), поскольку это более действенный способ замотивировать пользователя поставить лайк.

6. Color Scheme
Цветовая гамма: либо белая, либо черная.

7. Font
Просто задание шрифта для надписи "мне нравится".

После задания настроек наживаем на кнопку "get code" и размещаем на сайте. Обычный код кнопки для facebook:

(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 ({apiId: 2872188, onlyWidgets: true }); VK.Widgets.Like ("vk_like", {type: "button"} ); 3. Добавляем на сайт кнопку tweet

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

Несколько лет назад были очень популярны сервисы закладок. Сейчас их практически полностью заменили "лайки " социальных сетей. Я долгое время не хотел устанавливать эти кнопки на свой сайт, но, в конце концов, сдался и поставил – сейчас эти кнопки чуть ли не единственный способ получить "социальный" трафик, так как сервисы закладок уже давно никому не интересны. Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 4 сервиса. По понятной причине – Вконтакте мало кому известен за пределами России и его поддержку игнорируют. Впрочем, оно и к лучшему – зачем грузить WordPress лишними плагинами, когда установку этих кнопок можно легко сделать вручную?

1 Установка кнопки Вконтакте

Виджет "Мне нравится " от Вконтакте можно получить .

Будьте внимательны! Кнопка Вконтакте единственная кнопка, в коде которой указывается ID подключаемого сайта. На приведенном скриншоте код будет нерабочим до тех пор, пока вы не нажмете на кнопку "Сохранить" – только тогда в коде API_ID будет заменен на ID вашего сайта и код станет рабочим.

Устанавливать кнопку надо в 2 этапа, сначала откройте файл header.php вашего шаблона и вставьте вызов скриптов в head секцию. Примерно так:

... ...

... VK.init({apiId: API_ID, onlyWidgets: true}); ...

Понятное дело, что вместо API_ID у вас должен будет указан ID вашего сайта.

Саму кнопку надо устанавливать кодом:

Не удивляйтесь, если на локальном сервере вместо кнопки вы увидите надпись "Please specify correct base domain name in app":

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

2 Установка кнопки Facebook

Виджет "Мне нравится " от Facebook можно получить .
Вы увидите вот такую страницу:

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

3 Установка кнопки Twitter

Кнопку "Твитнуть " от Twitter можно получить .
Вы увидите вот такую страницу:

Здесь вообще все просто – выбирайте опции и копируйте указанный код туда, где вы хотите вывести кнопку.

4 Установка кнопки G+

Кнопку "G+ " от Google можно получить .
Вы увидите вот такую страницу:

Здесь тоже все просто – выбирайте опции и копируйте код туда, где должна выводиться кнопка.

Установка этих кнопок достаточно простая и с ней разберется практически любой человек. В конце концов, что может быть сложного в копировании кода кнопок? Однако проблемы начинаются тогда, когда блоггер копирует коды кнопок и получает что-то типа:

Как, собственно, выстроить их в ряд? Это не так сложно, как может показаться. Надо обернуть все кнопки в какой-нибудь див и определить его в styles.css вашего шаблона. Вот, например, код моих кнопок:

VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); Твитнуть

VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); Твитнуть !function(d,s,id){var js,fjs=d.getElementsByTagName(s);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); 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); })();

То есть вызов кнопок у меня обернут дивом post-meta-social , который определен в styles.css таким образом:

.post-meta-social{ padding : 0px ; margin : 0px ; margin-top : 10px ; margin-bottom : 10px ; display : inline ; } .post-meta-social #vk_like { float : left ; width : 170px !important; } .post-meta-social .fb-like{ float : left ; width : 150px !important; } .post-meta-social #tweet_like { float : left ; width : 120px !important; } .post-meta-social .g-plusone{ float : left ; }

Post-meta-social{ padding: 0px; margin: 0px; margin-top: 10px; margin-bottom: 10px; display: inline; } .post-meta-social #vk_like{ float:left; width:170px!important; } .post-meta-social .fb-like{ float:left; width:150px!important; } .post-meta-social #tweet_like{ float:left; width:120px!important; } .post-meta-social .g-plusone{ float:left; }

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

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

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

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

С пятницей, господа! Завтра у обычных людей начинаются заслуженные выходные. А я, как всегда, буду занят: в этот раз надо поприсутствовать на собственном Дне Рождения. Ну а вчера появился повод вспомнить про кнопку . Она сейчас почти также популярна как Tweet от Twitter, так что встретить её можно почти на каждом сайте или блоге. В том числе и на моём, сразу после статьи, жмите - мне будет очень приятно.

Что касается причин побудивших меня о ней заговорить - кнопка "Мне нравится" получила обновление, небольшое, но приятное. Заодно напомню, как её настроить и установить на свой сайт.

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

Установка кнопки "Мне нравится"

Так вот, из всех перечисленных кнопок вариант от ВКонтакте отличался самой большой высотой, из-за чего в один ряд с прочими никак не вписывался. Теперь высоту можно указать на странице настроек кнопки, где мы и получаем её код для своего блога. Для этого нужно выполнить В Контакте вход и перейти на страницу виджета "Мне нравится" . Это можно сделать, кликнув по пункту "Разработчикам" в самом низу страницы, затем "Виджеты и сторонние сайты" и, наконец, "Виджет "Мне нравится"". Можно сразу по этой ссылке перейти - Мне нравится .

Самое интересное тут - код для вставки. Часть кода до слов надо вставить между тегами и вашего сайта. Если у вас блог, сделанный на CMS WordPress, то эти теги находятся в файле header.php. А вторую часть кода вставляем туда, где вы хотите видеть кнопку "Мне нравится".

Настройка кнопки "Мне нравится"

Кроме указанных явно в настройках у кнопки есть ещё несколько интересных параметров. Это 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: "Очень полезный материал!"});

Ну вот и всё на сегодня. Теперь я тут всплыву только через несколько дней. Не забывайте, до новых встреч!