Главная » Социальные сети » Кнопка facebook для сайта на WordPress: установка и настройка дизайна
кнопка facebook на wordpress

Кнопка facebook для сайта на WordPress: установка и настройка дизайна

Здравствуйте уважаемые читатели блога history-of-blog.ru. Сегодня я продолжаю серию статей про установку кнопок социальных сетей на блог WordPress. В прошлой статье мы уже рассмотрели о том как получить код кнопки твитнуть, настроить все необходимые параметры и вписать в дизайн блога. Сегодня речь пойдет о кнопке еще одной очень популярной соц.сети: facebook.кнопка facebook на wordpress

Социальная сеть facebook.

Я бываю на facebook’е очень редко, да можно сказать что вообще не бываю. Но тем не менее сеть пользуется популярностью :)

Фейсбук не так распространен в России, как тот же ВКонтакте, но если рассматривать общий охват аудитории по миру, то Фейсбук даст фору не только ВК, но и всем другим соц.сетям вместе взятым (а Твиттер – микроблог если что, так что его не приплюсовываем).

Исходя из предыдущего пункта вывод напрашивается сам собой: кнопке Like от Facebook быть! Так что если еще думаете ставить эту кнопку или нет, то лучше займитесь делом и установите.

Код кнопки facebook для WordPress блога.

Естественно для создания кнопки “Мне нравится” от facebook есть специальная страница в этой соц.сети, но чтобы сэкономить время сразу выложу код самой удачно сгенерированной кнопки:

<iframe style="border: none; overflow: hidden; width: 135px; height: 20px;" src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=button_count&show_faces=false&width=135&action=like&colorscheme=light&height=20" frameborder="0" scrolling="no" width="320" height="240"></iframe>

При таком коде кнопка facebook будет выглядеть вот так (не нажатая и нажатая):кнопка facebook

Такой вариант кнопки считаю наиболее удачным, так как другие кнопки (Twitter, ВКонтакте и Гугл +1) в нашем блоке будут иметь примерно такой же размер и ориентацию счетчика. Можете посмотреть как это выглядит под статьей.

Кстати, помню пытался создать кнопку через сам facebook, но возникли какие-то проблемы и я не смог этого сделать (вроде не хватало прав или что-то типа того). Поэтому мне пришлось искать код уже готовой кнопки. Нашел. Теперь будет меньше хлопот если потребуется установить кнопку на другой блог – не надо ничего генерировать, просто скопировал и все.

Ну что, код кнопки есть. Идем дальше.

Установка и настройка дизайна кнопки Мне нравится от facebook.

В прошлой статье мы рассмотрели куда вставлять кнопку твитнуть, чтобы она отобразилась сразу под статьей. Поэтому вставляем кнопку фейсбука прямо за ней и смотрим что получилось:2 кнопки

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

Цель: поставить кнопки одну за другой и расположить их по центру.

Решение: создаем общий div контейнер для кнопок, изменяем стили для кнопки твитнуть (напомню div class:”twit”) и пишем новые стили для кнопки facebook.

Поехали!

Общий блок для кнопок я назвал knopki-aga, блог для кнопки твитнуть по прежнему twit, блок для facebook кнопки: facebook.

Предварительно сохранив на всякий пожарный резервные копии файлов style.css и single.php на компьютер открываем их на редактирование. В первый файл вставляем строки (обратите внимание, если Вы вставляли стиль для кнопки твитнуть (.twit), то его нужно подредактировать, а не прописывать еще раз (можно просто удалить, и вставить код, который представлен ниже)):

.knopki-aga {
	width:260px; height:25px; margin:15px auto 5px;
	}
	.twit {
	float:left; width:120px;
	}
  .facebook {
	float:left; width:140px;
	}

А в файле single.php будет следующий кусок кода:

<div class="knopki-aga">
<div class="twit">Код кнопки твитнуть</div>
<div class="facebook">Код кнопки фейсбук</div>
</div>

В файле style.css мы задали следующее:

  • Для общего блока knopki-aga: ширина 260 пикселей, высота 25 пикселей, отступы: сверху 15, снизу 5 и выравнивание по середине.
  • Для кнопки твитнуть twit: выравнивание по левому краю и ширину 120 пикселей.
  • Для кнопки фейсбук facebook: выравнивание по левому краю и ширину 140 пикселей.

Ширину для кнопок подбирал опытным путем :)

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

Ах да, вот результат:выравняли кнопки

Таким образом мы установили кнопку Мне нравится от facebook на wordpress блог и настроили ее отображение. Следующая на очереди кнопка ВКонтакте, а затем и Гугл +1.

Кстати, после того как я напишу про установку и настройку этих 4 кнопок, выйдет бонусная статья по установке кнопок других сервисов. Попрошу высказаться в комментариях какие кнопки социальным сетей помимо этих четырех Вы хотите установить на свой блог? Если комментариев по этому поводу не будет, значит в топку эту статью ;)

Вот серия статей про кнопки социальных сетей, которая поможет Вам установить 4 самых действенных кнопки к себе на блог (рекомендую читать по порядку!):

Комментировать через ВКонтакте:
Отзывов к посту "Кнопка facebook для сайта на WordPress: установка и настройка дизайна" уже 17:
  • Евгений | 12.04.2012 в 12:18

    Антон, где моя ошибка, кнопки не становятся в один ряд.

    • admin | 12.04.2012 в 13:21

      В файле style.css ничего не написано про кнопки

    • admin | 12.04.2012 в 13:47

      как я ненавижу такие комменты :?:
      Считаю лучше уж промолчать :|

  • Андрей | 09.06.2012 в 16:52

    Большое спасибо, только с помощью вашего сайта получилось все поставить)) Проблемы были почему то с фейсбуком.

  • Zak | 26.07.2012 в 10:38

    Есть проблемы с фейсбуком один чёрт, может посоветуете.. Кнопка красиво встала, но если залогинен на буке, то вместо кнопки лайка показывается обрезок аватары фейса, как в человеческий вид привести-то? (

    • admin | 26.07.2012 в 15:01

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

  • Максим | 08.12.2012 в 13:35

    Поставил кнопки так как вы описываете, всё получилось, НО нужно их выровнять по правому краю, подскажите пожалуйста как это реализовать.

    • admin | 09.12.2012 в 11:55

      Вводите в поиске css выровнять по правому краю, ну что вы в самом деле. Как вариант float:right;

  • Максим | 22.12.2012 в 19:34

    Дело в том что я побывал как вы пишите float:right; , кнопки выравниваются но перестают работать, становятся как картинки.(

  • Александр | 08.02.2013 в 12:36

    Антон, спасибо за статью, уже поставил 2 кнопки :) Только есть вопрос по кнопке фэйсбука, она установилась, но почему то там сразу отображается 10к лайков. Можешь объяснить, почему и как это исправить? Кнопка стоит на всех статьях внутри сайта, кликни на любой пост в меню справа. Большое спасибо!

    • admin | 08.02.2013 в 13:44

      Посмотрел – на главной работает хорошо (ссылка стоит прямая видимо) – лайки учитываются и прибавляются – протестил. А вот в статьях действительно что-то не то, не лайкается (не отображается на странице фейсбука, и стоит цифра 10к). Причина в том, что почему-то не распознается ссылка страницы – странно! очень. Ведь этот код кнопки у меня стоит в нескольких блогах на разных версиях WP.
      Ничего умнее я не придумал – сгенерируйте свой код кнопки facebook (на специальной странице в этой соц.сети) – или достаньте где-нибудь.

  • максим | 25.09.2013 в 16:05

    Здравствуйте! А не подскажите, размер кнопки можно поменять или нет? Через CSS и сам код, не получается!

    • admin | 25.09.2013 в 17:40

      Можно поменять и размер, и внешний вид кнопки/счетчика. Все через css, но в данном случае стили уже есть, поэтому для каждого элемента скорее всего нужно перебивать стили на свои прописывая к параметрам, которые отличаются !important чтобы брался нужный нам стиль.
      Возможно есть более рациональный код кнопки для такого.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: