Как сделать кнопку нравится страница в фейсбук. Как разместить кнопку от Facebook? Код для отображения кнопки вКонтакте

Всем привет, друзья! Несколько недель назад я писал, и . Сегодня ми продолжим использовать социальные сети для продвижения сайта. В этом посте я напишу, как устанавливается на сайт кнопка мне нравится вконтакте и кнопка мне нравится facebook.

Как установить кнопку «Мне нравится» от Вконтакте

Для того, чтобы вы на своем сайте увидели красивую кнопочку от вконтакте нужно сделать всего три шага:

  1. Добавить сайт в соц. сеть вконтакте;
  2. Настроить внешний вид кнопки;
  3. Скопировать код и вставить на свой сайт.

После вставки второй части кода, вы должны увидеть на своем сайте кнопку от вконтакте «мне нравится». Если возникли какие-то проблемы, то пишите в комментариях, постараюсь помочь:smile:.

Как установить кнопку «Мне нравится» от Facebook

Для начала перейдите вод сюда . Если вы не авторизованы, то сделайте это. Теперь на этой страницы нам нужно сначала заполнить некоторые поля. Хотя они на английском языке, но ничего страшного, разберемся:smile:.

  • URL to Like – . Оставляем это поле пустим, поскольку ми хотим установить кнопку на все страницы;
  • Height – высота. Можно ничего не ставить, по умолчанию высота кнопки нормальная;
  • Layout – здесь нам нужно указать внешний вид кнопки. Я выбрал последний вариант button_count, на мой взгляд, он самый лучший. Можете попробовать выбрать другой вариант и посмотреть, как он выглядит. Если box_count или standard вам нравится больше, то, пожалуйста, ставьте тот, который нравится.
  • Show Friends" Faces – показывать . Я убрал галочку, поскольку не хочу показывать аватари.
  • Width – ширина. Я ничего не ставил, если ширина кнопки вас не устраивает, то можете ее указать.
  • Color Scheme – цветовая схема. Оставил по умолчанию light (светлый).
  • Action Type. Если выбрать like, то надпись на кнопке будет «нравится». А если recommend, то «я рекомендую». Я выбрал первый вариант like (нравится).
  • Include Send Button — Включить кнопку «Отправить». Мне она не нужна, поэтому я галочку убрал.

После заполнения всех полей у меня получилось вод так:


Теперь нажмите на кнопку «Get code» для того, чтобы получить код.


Первою часть кода вам нужно разместить в файл footer.php перед тегом . А вторую часть в то место, где вы хотите видеть кнопку «Мне нравится» от Facebook на своем сайте. Можете разместить после кода кнопки «Мне нравится» от Вконтакте в файл single.php.
На этом у меня все. Как вам статья?

Социальные кнопки или «лайки» стали неотъемлемом элементом множества сайтов. Теперь сложно представить публикацию в конце которой не обитали бы кнопки «Мне нравится», «Класс» и «Твитнуть». Они одинаково полезны, как вебмастеру в процессе продвижения, так и посетителю желающему оценить прочитанное или сохранить на своей странице ссылку.

Наличие «лайков» это не только появление трафика на сайт с социальных сетей, но и повышение юзабилити веб-проекта, а также интереса у поисковых роботов. Поэтому ряд основных соц. кнопок обязан быть и у Вас!
Одной из такого ряда – кнопка «Нравится» от Facebook. Установка «лайка» занимает пару минут, и подходит для размещения на всех CMS, в том числе популярной WordPress.

Как разместить кнопку от Facebook?

Действия по вставке кода кнопки на сайт очень схожи с ранее рассмотренным . Поэтому сперва авторизуемся в сети Facebook, и перейдём на страницу «Разработчикам»:
https://developers.facebook.com/docs/plugins/like-button

В начале нам предлагается настроить отображение будущей кнопки, чем мы и займёмся:

Скопированный код следует разместить в теме WordPress, также как и другие «лайки». Первую часть помещаем в файл «Header.php» между тегами …, а вторую в то место, где следует выводить саму кнопку (обычно, это файл «single.php» или «content-single.php» сразу после вывода основного контента). Не забываем сохранять изменения, а после проверять на страницах сайта!

Для того чтобы . В ней подробно описан один из способов с применением стилей CSS…

Проблема адаптивных шаблонов

Представить социальную сеть без заветной кнопки «Мне нравится» сегодня уже невозможно. С ее помощью пользователи могут не только оценивать опубликованный материал, но и делиться им со своими друзьями. Отчасти именно эта кнопка Facebook сделала таким популярным, ведь поднятый вверх палец стал своего рода символом соц.сети.

Зачем нужны «Лайки»?

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

Для начала рассмотрим самый простой пример использования кнопки. Допустим, ваш друг опубликовал новую фотографию, и она вызвала у вас неподдельный интерес. Чтобы сообщить об этом другу, нужно лишь нажать кнопку «Нравится», расположенную под фотографией. Фейсбуковский друг получит текстовое уведомление о том, что вам понравилось опубликованное фото. Отразится эта информация и в вашей хронике.

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

Использование «лайков» на внешних ресурсах

В строке «URL to Like» необходимо указать полный адрес страницы сайта, на которой впоследствии и будет размещена кнопка. Поле «Width» предназначено для указания ширины «лайка» в пикселях. Здесь все индивидуально – подбирать нужно под дизайн конкретной страницы. Далее следует опция «Layout», с помощью которой вы можете определить, как будет выглядеть кнопка. На текущий момент доступно четыре варианта: standard, box_count, button_count, button. Заключительной настройкой плагина является поле «Action Type». Вы можете выбрать либо надпись «Нравится», либо надпись «Рекомендовать».

Конечно, установка плагина – задача, требующая определенных навыков у разработчиков. Однако зная основы работы с кодированием, вы с легкостью все сделаете. Более того, при желании вы сможете воспользоваться и другими плагинами Фейсбука, например, кнопкой «Подписаться», возможностью комментирования для посетителей и многое-многое другое.

все разделы Skype Google+ Twitter Facebook Мой Мир Одноклассники ВКонтакте

Добавляем кнопку Фейсбук на сайт. Логотип в векторе и PNG

Учимся создавать и добавлять на сайт кнопку Фейсбук, выбираем ее внешний вид, ориентируясь на оформление сайта и размещаем кнопку на сайте.

Часто у владельцев сайтов возникает необходимость добавить кнопку Facebook на сайт. Кому-то это может показаться сложным, но это только на первый взгляд. В действительности добавить кнопку можно за считанные минуты. И никаких затруднений возникнуть не должно. Давайте рассмотрим, как разместить на сайте кнопку.

Размещаем кнопку

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

  • Переходим к графе Layout . Здесь нам нужно выбрать внешний вид кнопки. Необходимо ориентироваться на оформление сайта, чтобы кнопочка сочеталась с ним. Давайте выберем «Button» . Для этого нажимаем на треугольник в правой части окна и выбираем необходимый вариант.

  • Создавая кнопку, нельзя забывать о пункте «Show Friend’s Faces» . Если отметить ее галочкой, то, заходя на страницу, вы будете видеть фото людей, находящихся у вас в друзьях, которые нажали на кнопку «Мне нравится» . Давайте поставим галочку.

  • Теперь нужно определиться, какую ширину будет иметь кнопочка. Учтите, что, если вы поставили галочку напротив «Show Friend’s Faces» , кнопка займет больше места. Указываем ширину facebook png в пикселях.

  • В графе «Action Type» выбираем то, что будет написано на кнопке. Это может быть надпись «Like» либо «Recommend» . Пусть виджет Фейсбук имеет надпись «Recommend» . Нажимаем на треугольник в правом углу окна и выбираем соответствующий вариант.

  • Виджет Facebook для сайта почти готов. Теперь кликаем по кнопочке «Get Code» .

  • Открывается окно с предложенными вариантами: HTML5, XFBML, IFRAME и Адрес . На самом первом этапе создания «facebook widget » мы оставили окно пустым. Поэтому нам требуется сейчас выбрать XFBML . Следует заметить, что кнопка в этом формате имеет значительные преимущества. Например, не способствует некрасивому растяжению страницы, не оставляет много пустых мест. Поэтому рекомендуется выбирать именно такую кнопку. Вы ведь хотите, чтобы ваша страница имела красивый внешний вид. Правильная кнопка поможет вам в этом.

  • Теперь очень важная деталь. В том случае, если вы использовали при создании блога WordPress , вам необходимо вставить в код следующий элемент: .

Вот и все. Кнопка Facebook для сайта установлена. Теперь люди смогут нажимать на нее, если им понравится страница.

Как вы сегодня поняли, кнопка на сайт создается и ставится легко. С этим справится любой человек. Кнопка «Лайк » на вашем сайте - это очень важная деталь, значение которой нельзя умалять.

Итак, мы разобрались, что такое кнопка Фэйсбук и для чего она нужна. Теперь вы знаете, как ее установить на сайт. Мы также научились выбирать оформление кнопки, наилучшим образом подходящее для сайта. Все это было наглядно продемонстрировано. Ознакомившись с вышеизложенной информацией, добавить на сайт кнопку вы сможете без проблем, ведь мы обговорили все очень подробно и даже обсудили нюансы. Как мы уже сказали, стоит размещать кнопку Фейсбук на любом сайте для увеличения количества откликов из социальных сетей.

Иконка логотипа

Иконка Фэйсбук - тоже хорошая вещь, привлекающая внимание. Скачать ее можно где угодно. Сайтов с «facebook icon » в Интернете предостаточно. В качестве примера можно привести . Здесь представлены facebook иконки в огромном количестве. Большие и маленькие, круглые и квадратные, в общем, на любой вкус. Синяя иконка Фейсбук - стильный элемент в оформлении вашего сайта. Можно выбрать какой-нибудь оригинальный вариант. Например, логотип Фэйсбук в виде крышки. Гости вашего сайта наверняка будут удивлены.

Если вам нужен логотип Facebook в векторе , вы можете скачать его тут:

Можно скачать значок Facebook в PNG в разных размерах:

Также найти подборку Facebook лого вы можете найти по адресу

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то