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

Здравствуйте, дорогие читатели блога. Сегодня мы будем учиться вставлять на наш сайт кнопки со счётчиками от популярных социальных сетей таких как Google+, Facebook, вКонтакте и Twitter.

А вот оформлять мы их будем как на блоге сайт. Мне кажется что очень просто, и ничего лишнего. Я думаю, что Вам понравится.

Ну а теперь поехали.

Кнопка на сайт Google+

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

Так как мы делаем по примеру мы выбрали стандартную кнопку от Google+ с счётчиком. В аннотации выбрали bubble, и язык, соответственно русский. Таким образом у нас получился вот такой код, который далее мы будем вставлять на свой сайт:

Кнопка для сайта «Мне нравится» от вКонтакте.

Переходим вот сюда . Теперь для начала нужно подключить новый сайт. Таким образом создаётся отдельный id номер именно для Вашего сайта. Для того чтобы подключить сайт Вам всего нужно заполнить три поля — это «Название сайта», «Адрес сайта» и «Основной домен сайта».

После всех этих не сложных шагов можно выбрать сам вид нашей кнопки вКонтакте. В нашем случае мы выбираем стандартную кнопку с текстовым счётчиком.

Как видите, что высота кнопки равна 22 пикселя. А название кнопки — мне нравится. Все эти значения Вы можете изменить под себя.

И теперь самое главное — это код для вставки кнопки на сайт. Для каждого сайта он будет не много изменяться из-за id номера о котором я говорил выше.

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

Код в шапке сайта между и :

VK.init({apiId: Ваш id номер, onlyWidgets: true});

Код для отображения кнопки вКонтакте:

VK.Widgets.Like("vk_like", {type: "button"},);

Кнопка для сайта «Мне нравится» от Facebook.

Чтобы добавить это кнопку к себе на сайт, для начала нужно перейти вот на эту страницу . Затем мы увидим следующее:

Теперь давайте рассмотрим что значат некоторые поля на странице настройки.

Send Button (XFBML Only) — если делать по примеру как на сайт, то нужно убрать галочку напротив Send Button. Данная галочка убирает или добавляет дополнительное поле в кнопке «Отправить».

Width — здесь выставляется ширина кнопки.

Show Faces — тут мы можем выбрать отображать или не отображать аватарки пользователей.

Verb to display — здесь мы можем выбрать текст в кнопке «Мне нравится» или «Я рекомендую».

Color Scheme — Тут можно выбрать оформление кнопки для светлых или же тёмных сайтов.

Font — выбираем шрифт надписей в кнопке.

После того как мы выбрали настройки находим кнопку «Get Code» и нажимаем на неё. Далее высветится окно с кодом, его тоже нужно вставлять в два этапа:

Вставляем код сразу после тега

(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:

Кнопка на сайт от Twitter

Заходим . И вот открылось вот это окно;-)

Здесь нам можно выбрать несколько различных кнопок, но в данном случае мы выбираем первую — Отправить ссылку.

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

Твитнуть

Вот и всё мы научились добавлять кнопки. Теперь нам нужно их выровнять и немного украсить..

Выравнивание кнопок как на сайт.

Для начала я придумал простой класс для стилей CSS — «sochknop». А вот как выглядят сами стили CSS с этим классом:

#sochknop { opacity: 0.7; margin-bottom:20px; margin-left:55px; margin-top:45px; -moz-transition: opacity 0.3s 0.05s ease; -o-transition: opacity 0.3s 0.05s ease; -webkit-transition: opacity 0.3s 0.05s ease; } #sochknop:hover { margin-top:45px; opacity: 1; } #sochknop span { -o-margin-top:40px; padding:0px 0px; line-height:10px; float:left; }

Как видите, что для переменной sochknop я добавил : и . Это добавляет плавную прозрачность для кнопок. Если Вам этот не нравится просто удалите строчку opacity:

Теперь давайте посмотрим как это будет выглядеть в HTML.

Пример кода без кодов кнопок (чтобы было понятнее)

Кнопка от Гугл+ Кнопка от вКонтакте Кнопка от Твиттера Кнопка от Фейсбука

Пример кода с кодами кнопок:

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); })(); VK.Widgets.Like("vk_like", {type: "button"}); Твитнуть !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");

Друзья расположение кнопок Вы можете менять как Вам удобно.

Как вы знаете, Facebook - популярная социальная сеть, число пользователей которой буквально на днях превысило 500 миллионов человек. Facebook активно развивается в рунете. Думаю, у Facebook хорошие перспективы, самое время присоединяться к этой социальной сети, поэтому я добавил кнопку «Нравится» и блок друзей на свой блог.

Хочу сказать, что после установки кнопки и блока количество друзей на этом сервисе и число переходов на мой блог увеличилось.

Вот как выглядит кнопка «Нравится» от Facebook, вы наверняка встречали ее много раз:

Для того, чтобы получить код кнопки «Нравится», идем на эту страницу . Видим вот такую картину:

Второе поле Layout Style (Стиль оформления) . В нем можно оставить Standart (Обычный) либо выбрать пункт Button Count (Счетчик голосов) , который будет показывать, сколько человек проголосовало за данную страницу. Я выбрал без счетчика.

Поле Show Faces (Показывать аватары) - выбираем нужный вам вариант. Я выбрал без аватаров, так как они будут в блоке друзей. Для кнопки они не нужны.

В поле Width (Ширина) можно указать ширину в пикселях, которая подходит для вашего дизайна. У меня сделано 500.

Verb to display (Какое слово отображать на кнопке) есть выбор между Like (в русском варианте будет отображаться «Нравится») либо Recommend (на русском будет показываться «Рекомендовать») . Я выбрал первый вариант.

В поле Font (Шрифт) можно выбрать из нескольких шрифтов. К сожалению, нет моего любимого шрифта Georgia. Огорчившись, я не стал выбирать никакой шрифт 🙂 .

В поле Color Scheme (Цветовая схема) можно выбрать Light (Светлый) или Dark (Темный) вариант оформления кнопки. Я выбрал светлый.

Все изменения настроек вы сразу увидите по примеру кнопки справа.

Затем кликаем по кнопке Get Code (Получить код):

Если у вас блог на WordPress, то нужно будет заменить часть предлагаемого кода. Находим в скопированном коде такой участок:

🔥 Кстати! Я планирую выпустить платный курс по продвижению англоязычных сайтов. Если интересует, можете подать заявку в ранний список через эту форму , чтобы первыми узнать о выходе курса и получить специальную скидку.

Приглашаю вас подписаться на мои каналы в Telegram:

Думаю, для многих движков сайтов есть плагины Facebook, для их поиска наберите в поисковике название вашего движка и слово «Facebook».

Для того, чтобы голосовать за понравившиеся сайты, на которых нет кнопки «Нравится» от Facebook, есть плагин для браузера Mozilla Firefox, который называется Facebook Like .

Не забыт и браузер Google Chrome - для него тоже есть плагин Facebook Likes .

все разделы 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 лого вы можете найти по адресу

Хотел было в один пост уложить несколько тем: поиск и добавление друзей, добавление блока «Мне нравится», реклама созданной страницы.

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

А в этом посте мы добавим блок «Мне нравится» или по «ихнему» «I like» от facebook на свой сайт, затем будем добавлять друзей к своему аккаунту в facebook и, в итоге, предложим своим, уже имеющимся, друзьям нашу страницу.

Добавление блока «Мне нравится»

Виджет от facebook представляет собой блок, состоящий из кнопки «Мне нравится» и фотографий тех пользователей, которые собственно на эту кнопку нажали. На примере установленного у меня блока (см. внизу) Вы можете видеть, как он примерно может выглядеть у Вас на сайте.

Этот виджет доступен только для страниц созданных в facebook. Если у Вас нет страницы, тогда Вам можно установить , без такого виджета. Тоже нужная вещь. Но страницу все же рекомендую создать и настроить, я об этом писа л в .

Страница у нас есть, переходим к настройке виджета. Клик по и Вы на странице создания виджета. Перед нами вот такое чудо:

По пунктам:

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

На этом предлагаемые фейсбуком настройки заканчиваются, жмем кнопку «Get code»:

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

Вот код для моей страницы в facebook:

< iframe src= "http://сайт/www.facebook.com/plugins/likebox.php?href=http%3A%2F %2F www.facebook.com%2F pervushincom&width=681&colorscheme=light&show_faces=true&stream=false&header=true&height=62" scrolling= "no" frameborder= "0" style= "border:none; overflow:hidden; width:681px; height:62px;" allowTransparency= "true" >

Помните, выше, я говорил о параметре height, настроить который нам не предлагается? Так вот, по-умолчанию этому параметру дается значение 62px, для моего блога этого оказалось маловато и я его изменил, сейчас он у меня равен 165px.

Настроенный код необходимо разместить в шаблоне нашего движка. Если у Вас, как и у меня, тогда в папке с темой (wp-content/themes/ваша тема) находим файл single.php. Этот файл отвечает за вывод одиночной записи. Открываем файл и после тега вставляем полученный код.

Само собой Вы можете установить этот код куда угодно. Например, можно выводить виджет в сайдбаре, тогда выставляем параметры widht и height в соответствии с шириной Вашей боковой панели и прописываем код в файл sidebar.php.

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

Добавление друзей

Теперь давайте пройдемся по друзьям. Наша цель — привлечь как можно больше пользователей facebook на страницу, созданную для блога. Это вклад в будущий, постоянный, целевой трафик на основной блог.

Добавлять друзей на страницу мы не можем, но мы можем предлагать эту самую страницу своим друзьям, имею ввиду друзьям нашего аккаунта на facebook. А вот добавлять друзей к аккаунту — это пожалуйста, это сколько угодно. Но не переусердствуйте, а то схлопатать можно.

Добавлять друзей просто. Можно, конечно, назвать этот способ онанизмом, но это просто и бесплатно.

Переходим на страницу своего аккаунта в facebook. В колонке справа есть блок «Вы можете их знать», в котором выводится по два пользователя. В этом блоке, под каждым пользователем имеется ссылка «Добавить в друзья».

В большинстве случаев пользователи охотно соглашаются на наш запрос.

Что дальше? А дальше, когда у Вас уже будет «энное» количество друзей, можно им предложить нашу страницу. Для этих целей на странице в facebook имеется опция «Предложить друзьям». Она находится в меню слева, под эмблемой Вашей страницы (сайта, блога):

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

Ну что же, в этом посте все. Немного позже, возможно через недельку, опубликую пост по рекламе в facebook.

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

Принцип создания этой кнопки простой. Достаточно знать одну строчку кода или точнее знать ссылку:

https://www.facebook.com/sharer.php?u=http://bit.ly/FBshareArticle

Способ №1. На основе документации Facebook

Демонстрация работы этого кода:

Тип «иконка» . В коде прописан URL, которым мы делимся. Это параметр share_url .

Демонстрация работы этого кода:

Тип «кнопка» .

О, да! Работает!

Демонстрация работы кода: О, да! Работает!

Тип «кнопка-счётчик горизонтальная» . Обычно счётчик появляется после трёх «шарингов».

Тип «большая вертикальная кнопка-счётчик».

Делись большой, не будь лапшой

Способ №2. С помощью Javascript

$("#share").popupWindow({ width:550, height:400, centerBrowser:1 });

Объяснение кода : чтобы использовать этот способ, у вас обязательно на сайте или вкладке должна быть подключена библиотека jQuery и скрипт для генерации всплывающего окна (лучше их подключить перед тегом ):

Также в коде ссылки используется идентификатор id=″share″ . Благодаря ему скрипт понимает, что нужно вызвать всплывающее окно. Этот же идентификатор вам надо прописать и в самом скрипте, который содержит параметры ширины, высоты и отцентровки по середине браузера. Эти параметры вы можете менять при необходимости:
width:550,
height:400,
centerBrowser:1

Демонстрация работы кода:

Способ №3. С помощью Javascript

Объяснение кода : в теге ссылки используется функция onClick , её название задаётся произвольно и должно совпадать с названием функции в скрипте. Можете её не трогать. Далее в теге img меняете ссылку на вашу картинку. Единственное, что вам нужно заменить в скрипте, — это ссылка, которой пользователи будут делиться. В данном примере используется ссылка http://bit.ly/FBshareArticle (выделена красным цветом). Остальные параметры (ширина, высота, отступ слева и сверху для всплывающего окна можете менять по желанию). Способ очень простой.

Демонстрация работы кода:

Способ №4. PHP

Для начала создайте на компьютере PHP-файл. Назовите его social.php и вставьте в него такой код:

Каждая из четырёх строк этого кода настраивается в соответствие с вашими целями. Значения внутри круглых скобок вам надо заменить на свои. Чтобы понять, за что они отвечают, посмотрите этот скриншот:

Обратите внимание, что переменная $url — это ссылка уже внутри публикации в Ленте новостей.

В этом примере файлы social.php и index.php находятся в одной папке.

&p=&p=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)">

Демонстрация работы кода: