Как добавить кнопки на свой сайт

Google +1 и Мне нравится (like button) от Вконтакте и Facebook — как добавить кнопки на свой сайт

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

Вообще, кнопки «Мне нравится» от Вконтакте и Facebook и кнопку «Google +1» добавить на свой сайт совсем не трудно обладая хотя бы базовыми познания в Html и CSS (Html для чайников). Причем, не стоит беспокоится об их кроссбраузерности, ибо и в Хроме, и в Мазиле, и в Опере и даже в старичке Internet Explorer, все будет выглядеть чику-пуки. Да и в случае полного нежелания лезть в код сайта можно будет воспользоваться соответствующими плагинами для WordPress или расширения для Joomla. Но проблема состоит как раз в другом.

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

Отсюда следует вывод, что добавление новых кнопок социальных сетей на сайт (в нашем случае от Вконтакте, Facebook и Google) должно быть обосновано их целесообразностью. Если про кнопку Facebook «Мне нравится» можно сказать, что скорее всего она будет полезна (лично я предпочитаю использовать не отдельный скрипт кнопок «Мне нравится» от Вконтакте и Facebook, а единым скриптом кнопки «Поделиться» от Яндекса), то про кнопку «Google +1» все еще не совсем ясно и прозрачно.

Во-первых, использование кнопки «Google +1» только-только началось и по отдаче от ее добавления на сайт пока еще нет объективных данных, а во-вторых, в поисковой выдаче Google она доступна только для сайта общемирового поиска Google.com и то, если вы зайдете как авторизованный пользователь:

гугл плюс один

А в выдаче региональной поисковой системы Google.ru вы пока ее не увидите, хотя будет присутствовать информация, что кто-то этим поделился в каком-либо из социальных сервисов, указанных в аккаунте пользователя Google:

google 1

Т.е., если сейчас брать в расчет только выдачу Google.com, то пользователи получили возможность рекомендовать понравившийся ему сайт простым нажатием по кнопке «Google +1» (при повторном щелчке можно будет забрать обратно свой отданный голос). Но для этого пользователь должен зайти на страницу понравившегося ему в поисковой выдачи сайта, оценить публикацию и обратно вернуться в поисковую выдачу, чтобы проголосовать и добавить свой «плюс один». О какой сознательный, ответственный и лояльный к Google пользователь получается.

Наверное, вероятность такой лояльности будет не очень высокой. Поэтому Google и агитирует всех вебмастеров добавить на свой сайт их кнопку «Google +1». Ведь в этом случае пользователю не нужно будет возвращаться обратно в поисковую выдачу (которая к этому времени уже может быть закрыта или погребена под ворохом открытых поверх страниц или вкладок браузера), ибо он сможет отдать свой голос прямо на странице сайта с понравившейся ему публикации.

Зачем это нужно Гуглу? Ответ очевиден — для повышения релевантности своей выдачи (у них появится куча бесплатных оценщиков качества сайтов) и для привлечения таким образом как можно большего количества пользователей (за счет качественной поисковой выдачи) и, соответственно, для увеличения в следствии этого своих заработков на контекстной рекламе (кстати, поисковая система Yandex делает так же). Мне, кстати, Гугл предложил установить кнопку «+1» именно в моем аккаунте Google Adsense:

кнопка google plus one

Вопрос, как всегда, шкурный, а значит стоит серьезно отнестись к влиянию кнопки «Google +1» на продвижение вашего сайта — это может оказаться реально работающим инструментом. Но посмотрим как оно получится на самом деле. Главный вопрос состоит в том, как дела обстоят с влиянием на продвижение (Продвижение сайта самостоятельно) кнопки «Гугл +1» именно в Google.ru и других региональных выдачах (google.com.ua, google.by и др.). Дело в том, что у меня, например, доля посетителей, приходящих с Google.com составляет всего лишь несколько процентов:

кнопка гугл плюс один

Если кнопка «Google +1», а точнее щелчки по ней, реально являются одним из факторов ранжирования в региональных выдачах Гугла, то ставим «гугл плюс» обязательно, ну, а если нет, то ставим для эксперимента, чтобы убедиться в этом.

Как добавить кнопку «Google +1» на свой сайт

Добавить кнопку «Google +1» на свой сайт, как я уже говорил, совсем не сложно. Сначала вам нужно будет зайти на сайт конструктора будущей кнопки «гугл плюс один» и поставить галочки в нужное вам положение, выбрав тем самым язык подписи к кнопке и ее размер:

кнопка вконтакте

Щелкнув по надписи «Расширенные настройки» вы получите доступ еще и к возможности отключить счетчик количества кликнувших по кнопке «Google plus one» простым снятием галочки в первом пункте:

мне нравится

В назначении остальных настроек будущей кнопки я не уверен. Собственно, теперь остается только, следуя рекомендациям Google, скопировать два участка кода кнопки «Google +1» и вставить их в требуемые места каких-либо файлов шаблона движка вашего сайта (cms). Т.е. нам нужно будет вставить код вызова скрипка кнопки «Google +1» либо в голову веб страниц между Html тегами Head, либо в самый конец видимой части Html кода сразу перед закрывающим тегом Body:

1
2
3
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>

А второй фрагмент кода нужно будет вставлять уже непосредственно в то место шаблона сайта (читайте про шаблоны Joomla, а так же про то, как устроены шаблоны и темы WordPress), где вы хотите видеть симпатичную кнопку «Гугл плюс один».

1
<g:plusone size="tall"></g:plusone>

Самом собой, что с помощью CSS свойств можно будет четко позиционировать эту кнопку относительно других элементов сайта. В общем-то сделать для WordPress это вообще будет очень просто и я об этом сейчас расскажу.

Ну, а для тех вебмастеров, которые еще не подружились с языком Html и его тэгами, а так же с CSS, я расскажу как вставить кнопку «Google +1» (да и заодно кнопки «Мне нравится» от Вконтакте и Facebook) в WordPress с помощью специально для этого заточенных плагинов, а в Joomla — с помощью универсального плагина MultiAds, предназначенного для вставки нужных вам элементов в начало или конец всех страниц вашего Joomla-сайта.

Итак, если вы не боитесь влезать в код темы оформления вашего блога на WordPress (предварительно сделав бэкап, например, с помощью простых, удобных и бесплатных инструментов: программы FTP клиента FileZilla и скрипта для работы с базами данных phpMyAdmin), то давайте приступим. Первую часть кода я вставил в файл footer.php, который вы сможете найти по следующему пути, подключившись к хостингу по FTP с помощью упомянутой программы FileZilla:

1
/wp-content/themes/папка с вашей темой оформления WordPress

В самом низу файла footer.php вы сможете найти закрывающий тег Body и сразу перед ним сможете вставить скрипт кнопки «Google +1» в WordPress:

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

Сохраняете произведенные изменения и открываете теперь на редактирование в простейшем Html и PHP редакторе Notepad++ файл single.php из все той же папки с используемой вами темой оформления WordPress. Тут немного сложнее, но путем экспериментов вы сможете найти нужное место в коде, куда следовало бы вставить кнопку «Google +1», заключив ее предварительно в контейнер из Html тегов Div.

facebook like button

В контейнере Div для кнопки «Гугл+1» я прописал класс, для которого в файле с таблицами каскадных стилей моей темы оформления (/wp-content/themes/папка с вашей темой оформления WordPress/style.css) добавил CSS правило:

1
.google {float: right; margin: 10px 10px 0 0;}

Если вам нужно будет вставить кнопку по быстрому без прописывания CSS свойств в style.css, то можете воспользоваться Html атрибутом «style»:

1
<div style="float: right; margin: 10px 10px 0 0;"><g:plusone size="tall"></g:plusone></div>

Хотя, конечно же, лучше будет все CSS стили выносить из кода в отдельный файл. С помощью CSS свойства «float: right» вы задаете прижатие вправо и обтекание вашей кнопки «Google +1» текстом, а второе свойство «margin: 10px 10px 0 0» — задает внешние отступы слева и сверху от кнопки «Гугл плюс один».

Если вы захотите добавить кнопку «Google +1» еще и на главную страницу WordPress, то в описанный чуть выше Div контейнер вам нужно будет вставить еще и в файл index.php из папки с используемой вами темой оформления WordPress. Подходящее место для кнопки «Зайцев +1», думаю, вы и без меня найдете, хотя бы методом тыка.

Почему я так долго рассказываю про самостоятельную вставку кнопку в WordPress, а не начну разговор сразу с плагина? Ведь там и объяснять особо ничего не надо. Просто, если у вас есть возможность обойтись без плагина, то обязательно это сделайте и сервер вашего хостера скажет вам за это спасибо, а Google, возможно, положительно отреагирует на хорошую скорость загрузки вашего блога.

Но если все это вам не совсем подходит, то можете воспользоваться одноименным плагином для WordPress «Google +1». Установка плагина на WordPress проходит обычным способом. Настройки плагина будет находиться в меню «Параметры» — «Кнопка Google +1».

Google +1 WordPress плагин

Как видите, настройки на русском и очень простые и понятные. Но повторюсь, что любой дополнительный плагин в WordPress — это зло и с ним нужно бороться. О том, как вставить кнопку «Google +1» в Joomla, читайте в конце статьи. Собственно, с помощью описанного там плагина можно будет вставить в статьи Joomla совершенно любые кнопки или, например, блоки контекстной рекламы Рекламной сети Яндекса (Рся) или Google Adsense.

Как добавить кнопки «Мне нравится» (like button) от Вконтакте и Facebook на свой сайт

В принципе, при самостоятельной установке кнопок «Мне нравится» от соцсетей Вконтакте и Facebook на WordPress без использования предназначенных для этого плагинов, все будет аналогично описанному чуть выше процессу добавления кнопки «Google +1», разве только что место под кнопки вы может быть выберите другое.

Код кнопки «Мне нравится» (like button) от Facebook можно будет сгенерировать на этой странице. Если в поле URL вы вставите адрес вашей главной страницы сайта, то нравиться будет именно она, а если это поле оставить не заполненным, то нравиться будет та страница, на которой установлена кнопка «Мне нравится» от Facebook. О как!

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

Остальные настройки на ваш вкус, а то, что при этом получится, вы сможете увидеть в правом верхнем углу. Для получения кода жмете на кнопку «Get code». Там вам предложат два вариант кода. Использовать можно тот, который будет лучше работать.

Вставлять код кнопки «Мне нравится» в WordPress следует именно в то место, где вы хотите чтобы она отображалась, а для ее позиционирования заключите код в Div контейнер и пропишите в нем CSS свойства напрямую (через атрибут Style) или же через CSS класс (по аналогии с описанной чуть выше кнопкой «Гугл +1»)

Теперь перейдем к кнопке Вконтакте «Мне нравится». Получить ее код можно будет на этой странице. Можете выбрать внешний вид и надпись на кнопке, а затем скопировать ее код.

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

По полной аналогии с описанной чуть выше кнопкой «Google +1», код «Мне нравится» Вконтакте тоже состоит из двух частей, которые вставлять нужно абсолютно так же, как и Гугловский шедевр. Думаю разберетесь.

А если все это для вас полная ахинея, то можете воспользоваться любым плагином кнопок социальных сетей для WordPress. «Мне нравится» полностью заточенный под социалки рунета плагин Social Share Buttons. Там кроме кнопок «Мне нравится» от Вконтакте и Facebook вы сможете добавить на свой блог еще и кнопки других социалок, популярных именно в рунете.

Как добавить кнопки «Google +1» и «Мне нравится» от Вконтакте и Facebook в Joomla

Ну, вариантов вставки кнопок социалок на страницы Joomla-сайта довольно много. Можно, например, воспользоваться стандартным модулем Joomla произвольного Html кода и вставить его в позицию вашего шаблона, которая расположена сразу же над или сразу же после статьи. Но получиться может не очень здорово, поэтому предлагаю вам попробовать для этой цели воспользоваться плагином MultiAds.

Скачиваете этот плагин и устанавливаете точно так же, как и любое другое расширение для Joomla. Затем выбираете в верхнем меню админки Joomla «Расширения» — «Менеджер плагинов» и щелкаете по названию плагина «Content — MultiAds». Собственно, настроек у плагина не очень много. Во-первых, в левой части вам нужно будет активировать этот плагин, а в правой части вам будет предложено вставить любой код в одно из четырех полей:

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

Т.е., таким образом, вы сможете добавить на свой Joomla-сайт любые кнопки социалок, включая и те, что мы рассмотрели в этой статье «Google +1» и «Мне нравится» от Вконтакте и Facebook. Вы можете настроить выравнивание добавляемых кнопок, выбрав нужный вариант из выпадающего списка, а так же задать нужные отступы. Два верхних поля позволят вставить кнопки в верхнюю часть статьи, а два нижних, соответственно, в нижнюю. Какой именно вариант использовать, можно сказать только попробовав.