Ответ
Добавление кнопок соц сетей на свой сайт Опции темы
Старый 25.12.2012, 00:22
  #1
0pium
 
Аватар для 0pium
Регистрация: 04.01.2012
Сообщений: 600

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

Впринципе все социальные кнопки устанавливаются без особого напряга, если есть хоть маленький опыт в HTML+CSS. Тут очень важным моментом является то, чтобы не устанавливать лишних кнопок социалок, которые не приносят никакой пользы для сайта, т.к. все кнопки подгружаются при помощи специальных скриптов, которые тянуться из социальной сети, а в случае недоступности сети будут существенно подгружать наш сайт. Поэтому стоит выбирать только самые необходимые социальные кнопки, а не грузить всем подряд, как это часто делают.

Кнопка Google Plus, к примеру, влияет на ранжирование выдачи Google, поэтому эту кнопку я считаю просто необходимой на любом сайте.

1. Установка кнопки Google +1 на свой сайт





Как я уже упомянул выше, кнока Google +1 устанавливается на сайт вовсе не сложно. Для начала заходим на страничку-конструктор кнопки +1, где вводим интересующие нас настройки:





1) выбираем размер и форму нашей будущей кнопки
2) выбираем форму показа нашей копки, т.е. с аннотацией, со счетчиком или просто кнопка безо всяких счетчиков и текстов
3) выбираем ширину нашей кнопки вместе с аннотацией и прочим, минимальная ширина 120 пикселей(это только для варианта с аннотацией, в остальных случаях данный пункт настроек отсутствует)
4) выбираем язык аннотации возле кнопки
5) смотрим что у нас получилось из введенных нами настроек





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

Далее все делаем в соответствии с рекомендациями Гугла, копируем два отрезка кода нашей кнопки Google +1 и копируем их в нужные файлы нашего шаблона. Т.е. нам необходимо вставить код вызова нашей кнопки в хедер нашего сайта между Html-тегами Head, или же в самый низ нашего кода перед закрывающим тегом Body.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>
Вторую часть кода нам следует вставить уже непосредственно в то место нашего шаблона, в котором мы хотим увидеть нашу кнопку Google +1:

<g:plusone size="tall"></g:plusone>
Далее можно при помощи CSS-стилей выставить нашу кнопку, как нам будет удобно относительно других элементов сайта.

Проще пареной репы эта кнопка устанавливается в CMS Wordpress, о чем я вам сейчас и расскажу.

Добавить кнопку Google +1 в CMS Wordpress с помощью специальных для этого плагинов смогут даже те, кто еще далек от HTML и CSS.

Для всех, кто боится копаться в коде своего Wordpress'овского сайта настоятельно рекомендую сделать бэкап(лично я для этих целей использую программку FileZilla, которую сможно скачать тут). Будем считать, что бэкап сделали, дальше первую часть нашего кода вставляем в файл footer.php, который можно найти по следующему пути при помощи все той же FileZilla:

/wp-content/themes/папка с вашим шаблоном WordPress
В файле footer.php вставляем код перед закрывающим тегом Body, который находится в самом низу нашего кода:





Сохраняем изменения в нашем файле, далее открываем файл single.php, который можно найти все по тому же пути, что и предыдущий. Тут все немного труднее, придется немного поэкспериментировать и поколдовать чтобы найти интересующее нас место расположения нашей кнопки(сделать это можно путем предварительного заключения кода в теги Div):





Для контейнера div прописан класс class="google", которому в CSS добавляем следующее правило(таблицу CSS-стилей можно найти по следующему пути - /wp-content/themes/папка с вашим шаблоном WordPress/style.css):

.google {float: right; margin: 10px 10px 0 0;}
Если нет времени замарачиваться с CSS-стилями, то можно воспользоваться атрибутом style в самом Html:

<div style="float: right; margin: 10px 10px 0 0;"><g:plusone size="tall"></g:plusone></div>
Если вы хотите добавить вашу кнопку еще и на главную страницу вашего Wordpress сайта, то тоже самое стоит проделать и с файлом index.php.

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

Теперь о плагине Google +1 Button Advanced, который можно скачать по ссылке. Установка плагина такая же, как и установка любых других других плагинов для Wordpress. Далее переходим в меню Параметры - Кнопка Google +1.





Ну тут уже все на русском и понятно без лишних слов. Если есть возможность, то все же рекомендую воздержаться от лишнего использования плагинов для Wordpress. Ближе к концу статьи также расскажу о том, как добавить кнопку Google +1 в шаблон на Joomla. В качестве небольшого отступления от темы хочу уберечь вас от накруток кнопки Google Plus, т.к. Google за этим следит и больно наказывает.

2. Установка кнопки Facebook и Вконтакте на свой сайт

Весь процесс установки кнопок Facebook и Вконтакте на сайт WordPress без плагинов целиком и полностью соответствует описанному выше способу с Google +1.

Сгенерировать кнопку от Facebook для вашего сайта можно по следующей ссылке.





Сгенерировать кнопку от Вконтакте вы можете по этой ссылке.





3. Установка кнопкок Google +1, Вконтакте и Facebook в вашем Joomla-сайте

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

Для начала качаем плагин по ссылке выше и устанавливаем его, как и все остальные Joomla-плагины. Далее в меню выбираем следующее Расширения - Менеджер плагинов - Content - MultiAds. Настроек в плагине не очень много, однако радует, что они универсальны для любых кнопок социальных сетей:





На этом все, надеюсь, что теперь у вас не будет проблем с добавлением социальных кнопок на ваш сайт, спасибо, за внимание!
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получаем бесплатные ссылки на свои сайты 0pium Статьи 1 18.09.2017 10:35
Добавление ещё одного фо на свой рес Гермес Файлообмен 7 04.12.2012 16:34
Продам свой акк на Oron-е. 13й Рынок 0 15.07.2012 03:12
научите как создать свой фотохостинг alex20088 Вопросы 16 28.06.2012 11:25
Не потеряй свой заработок! creativius Финансы 3 14.02.2012 14:47

Метки
вконтакте, кнопка google plus, facebook, filezilla, google +1, joomla, multiads, wordpress


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 01:34. Часовой пояс GMT +3.