Блок «поделиться» от яндекса. установка и настройка
Содержание:
Установка социальных кнопок (внедряем кнопки в код сайта)
Наконец мы перешли, к самому интересному! Установка кнопок на самом сайте. Для того что бы это осуществить нам необходимой перейти в административной панели сайта во вкладку внешний вид » редактор » файл single.php и тут в конце перед функцией <?php comments_template( », true ); ?> нужно будет добавить код
Не забудьте предварительно разместить картинку на вашем сервере
2) Добавляем кнопку facebook:
3) Добавляем кнопку twitter:
4) Добавляем кнопку Одноклассников:
Обратите внимание, что в коде необходимо вставить, кроме ссылки на картинку дополнительно ссылку на ваш сайт. 5) Ставим кнопку YouTube:
5) Ставим кнопку YouTube:
По аналогии с примерами представленными выше Вы можете разместить кнопку на любую из социальных сетей, которые представлены в PSD наборе кнопок.
В конечно варианте у Вас должно получиться что-то вроде этого:

Как установить кнопку +1 от Google
Чтобы поставить на сайт кнопку от Google +1, необходимо так же создать ее код на специальной странице. Для этого переходим на страницу и приступаем к настройке:

Настройки здесь аналогичные Facebook, за исключением нескольких пунктов:
- Мы можем и должны выбрать язык;
- В расширенных настройках рекомендую выбрать Асинхронный код и синтаксис HTML5;
- В поле выполнять код можно оставить как по умолчанию, однако вариант «при явном вызове» мне кажется лучше;
- Последнее поле, URL для +1, аналогично с первым на Facebook: оставляем пустым, если кнопка бедт «сквозняком» через весь сайт. Если же она только на одной странице или должна собирать +1 на одну страницу, то указываем URL.
По окончании всех настроек снизу мы увидим готовый код, который необходимо разместить на своем сайте в соответствующем месте:

Как понятно из названия кода красной рамки — помещаем в место отображения (можно рядом с Like от Facebook). Код, который в зеленой рамке, необходимо поместить в тот же файл, куда будет помещен «красный». К примеру: мы помещаем «красный» код в single.php, поэтому «зеленый» код мы помещаем в этот же файл, можно в самом его начале, чтобы он не сливался с остальным шаблоном.
А как, чтобы все и сразу?
Каждый из вышеперечисленных вариантов, хоть и является оптимальным, однако требует загрузки отдельных библиотек JavaScript (у каждой соцсети они свои).
Если же хочется установить на сайт код, который позволит публиковать ссылки на страницу сразу в нескольких соцсетях, можно воспользоваться специальными сервисами.
Например, сервис Pluso позволяет сгенерировать один код для нескольких социальных сетей. Кнопки при этом будут довольно-таки красивыми и функциональными. Возможен подсчет переходов по этим кнопкам, который будет отображаться на счетчике.

Яндекс располагает блоком «Поделиться» — здесь, как говорится, все «бедненько и чистенько». Настроек минимум, дизайн и возможности кнопок в целом ограничены, — но зато все работает.

Изображения
Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений
HTML-код
Добавить кнопки можно и при помощи html-кода. Здесь мы не будем рассматривать самостоятельную разработку скриптов, добавляющих иконки. Лучше мы обратимся к уже готовым конструкторам, которые помогут нам легко сделать свой собственный вариант панели “Поделиться”.
Блок “Поделиться” от Яндекса
Яндекс уже позаботился о вебмастерах и сделал удобный конструктор, который работает со всеми известными социальными сетями. Вы можете выбрать нужные социальные сети, размер иконок, после чего сервис выдаст вам код, который необходимо вставить в нужное место сайта.

Вы можете выбрать несколько вариантов отображения:
- Только иконки – простые иконки, как на скриншоте.
- Счетчики – рядом с иконками будет отображаться число людей, которые поделились вашим материалом.
- Иконки и меню – несколько иконок и рядом кнопка, которая открывает окно со всеми остальными.
- Маленького размера – просто мелкие иконки.
После завершения настройки необходимо скопировать содержимое поля “Код” и далее вставить его в нужном месте сайта.
AddThis
Англоязычный сервис, который помогает вам создать социальные кнопки по своему вкусу и получить готовый код для интеграции. Он чаще всего используется для самописных сайтов.
Для ВП есть отдельный плагин, который поддерживает интеграцию с этим сервисом. Но вы, если не хотите перегружать систему, можете просто вставить код в шаблон страницы.
Сервис бесплатный, это значит, что вы прямо сейчас можете зайти и создать там аккаунт. После этого вы сможете перейти в конструктор для создания панели с иконками социальных сетей.

После выбора иконок и их размера вы можете выбрать тип кода. Для WordPress и Joomla там есть особые варианты. Для всех остальных CMS – стандартный. Но он, тем не менее, будет работать.

Код также придется вставлять в шаблон страницы.
Кнопки социальных сервисов
Половина дела сделана — иконочный шрифт подключен к сайту, осталось создать кнопки и вывести через них иконки социальных сервисов.
HTML разметка кнопок социальных сервисов
/*Кнопка Яндекс*/ <a href="#" class="social-button ico-yandex"></a> /*Кнопка Google+*/ <a href="#" class="social-button ico-googleplus"></a> /*Кнопка "Одноклассники"*/ <a href="#" class="social-button ico-ok"></a> /*Кнопка Мейл.ру*/ <a href="#" class="social-button ico-mail"></a> /*Кнопка Вконтакте (малый логотип)*/ <a href="#" class="social-button ico-vk-B"></a> /*Кнопка Вконтакте (международный логотип)*/ <a href="#" class="social-button ico-vk-vk"></a> /*Кнопка Facebook*/ <a href="#" class="social-button ico-facebook"></a> /*Кнопка Twitter*/ <a href="#" class="social-button ico-twitter"></a> /*Кнопка Instagram*/ <a href="#" class="social-button ico-instagram"></a> /*Кнопка Youtube*/ <a href="#" class="social-button ico-youtube-3"></a> /*Кнопка Youtube (значок)*/ <a href="#" class="social-button ico-youtube"></a> /*Кнопка Vimeo*/ <a href="#" class="social-button ico-vimeo"></a> /*Кнопка Twich*/ <a href="#" class="social-button ico-twitch"></a> /*Кнопка Whatsapp*/ <a href="#" class="social-button ico-whatsapp"></a> /*Кнопка Skype*/ <a href="#" class="social-button ico-skype"></a>
CSS стили кнопок социальных сервисов
.social-button {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
border-radius: 50%; //скругление углов кнопки
width: 54px; //размер кнопки по ширине
height: 54px; //размер кнопки по высоте
background: #118EC7; //цвет кнопки в статичном виде
border: none;
line-height: 54px;
color: #fff; //цвет иконки в статичном виде
font-size: 27px; //размер иконки
text-align: center;
/* Скорость анимации */
-webkit-transition: box-shadow .2s ease-out, background-color .2s ease-out;
-moz-transition: box-shadow .2s ease-out, background-color .2s ease-out;
transition: box-shadow .2s ease-out, background-color .2s ease-out;
margin-bottom: 10px;
-webkit-user-select: none;
}
.social-button:hover,
.social-button:focus {
text-decoration: none!important;
background-color: rgba(255, 255, 255, 0); //фон кнопки при наведении курсора
color: #118EC7; //цвет иконки при наведении курсора
text-decoration: none;
outline: none;
box-shadow: 0 0 0 3px #118EC7; //цвет рамки при наведении курсора
border: none
}
Лирическое отступление
Социальные сети из невинной забавы и способа общения бывших и настоящих школьников превратились в мощный инструмент добычи трафика. Теперь соцсеть – это не только общение. Можно сказать, это отдельная категория СМИ, в которой происходит постоянное движение информации.
Естественно, что эта информация редко бывает уникальной — в основном, она представлена в виде ссылок на заинтересовавшие конкретного пользователя ресурсы. Предоставляют эти ссылки именно кнопки социальных сетей, на которые пользователь нажимает, чтобы поделиться информацией с друзьями.
Одно нажатие на социальную кнопку может привести к существенному притоку на сайт гостей из социальных сетей — при условии, что информация на странице будет действительно актуальной, полезной и интересной. Исходя из этого, следует подумать, как установить кнопки социальных сетей на собственный сайт.
Как уже стало понятно, кнопка — это ни что иное, как ссылка, ведущая на скрипт публикации в соцсети. Все популярные социальные сети пошли навстречу владельцам сайтов, предоставив им уже готовые варианты кнопок для установки. Все что нужно — скопировать готовый HTML-код, предоставляемый «социалкой» и скопировать его в исходный код своей страницы.
Социальные кнопки для сайта
Многие уже знают на сколько сейчас развиты соц сети и как здорово, если на вашем сайте будут вот такие кнопки, с помощью которых можно добавить к себе на стенку понравившуюся запись или часть записи. Таким действием вы не только комментируете или делаете репост сообщения, но еще даете дополнительный сигнал для поисковых систем.
Мечта каждого владельца сайта, если все его записи будут репостить читатели на своих страницах в одной из социальных сетей. Сейчас больше всего идет спрос на Вконтакте, Facebook, Twitter и Одноклассники. Я бы еще добавить LiveJournal, liveinternet и Blogger. Вот эти кнопки желательно добавить на сайт для полного удобства пользователя.
Если вы владелец сайта, у вас скорей всего должен быть аккаунт в liveinternet или LiveJournal. Чтоб каждый раз не добавлять новые записи в эти сервисы, наличие ихних кнопок экономит время. В добавок много народа пользуются этими сервисами и так же могут захотеть сделать репост вашей записи в своем дневнике.
Существует несколько самых оптимальных способов, как быстро добавить соц кнопки для сайта. Сделать это можно с помощью онлайн сервисов, которые быстро и без проблем помогут с этим. Или на прямую через каждую соц сеть отдельно. Тут уже выбор у каждого свой. У меня раньше кнопки были добавлены отдельно через каждую соц сеть, сейчас я поставил с помощью сервиса.
Существует такой подобный сервис, называется он share42. Про него масса написано материала, какой он хороший и как ним нужно пользоваться. Хороший, но для обычного пользователя, который ничего не понимает в этом, будет сложно с ним справиться.
Для такого мелкого занятия копировать папки на хостинг и потом париться со стилями, сейчас это уже не рулит. Существуют другие варианты, в которых нужно скопировать и вставить уже готовый код без никаких дополнительных папок. Так что забудьте про этот сервис.
Чем сегодня можно воспользоваться, чтоб добавить социальные кнопки для сайта:
- Сервис uptolike.
- Социальные кнопки яндекс.
- Добавление вручную каждой соц сети отдельно.
- Сервис Pluso.
- С помощью плагинов для WordPress (для ленивых).

Кнопки социальных сетей необходимо вставить в конце каждой статьи, чтоб после чтения, посетитель сайта смог по желанию сделать репост вашей записи. Он не должен искать их где то в конце страницы. Самые оптимальные места, на мой взгляд, где должны быть размещены такие кнопки, это в сайдбаре и сразу в конце каждой записи.
Что такое кнопки социальных сетей на сайте
Это мелкие иконки популярных социальных сетей, которые размещаются на сайте, желательно, в пределах видимости, чтобы быть всегда под рукой — вдруг захотелось пользователю поделиться вашей информацией (о скидке, о новости, о файле или просто интересной статьей) — он кликнул на кнопку и поделился со своими друзьями или коллегами.
Уверен, что каждый SEO-специалист понимает, почему важно привлекать релевантный трафик из социальных сетей. Тем более бесплатный
Если в двух словах, то поисковики отслеживают любые ссылки, в том числе ссылки из соцсетей, они участвуют в ранжировании, разбавляют ссылочную массу — то есть если на сайт ссылаются «живые» люди из того же Вконтакте или Google+ неважно, это всегда дополнительный сигнал поисковикам, что сайт развивается естественно и интересен людям. А значит стоит его ранжировать повыше
А значит стоит его ранжировать повыше
Поэтому на любой продвигаемый сайт я всегда подключаю какой-нибудь бесплатный генератор кнопок соцсетей, чтобы получать дополнительные халявные ссылки.
Естественно, просто «подключаю» — это как минимум, а как максимум — на конкурентные темы задействую плагин социального замка, чтобы еще и стимулировать аудиторию «лайкать».
Как создать кнопки социальных сетей
В сети появилось большое множество сервисов предоставляющие такую услугу. Я выбрал только два из них, которые использовал и рекомендую другим.
Благодаря Dimox, популярнейшего блогера, появился отличный сервис Share42.com. Он настолько прост в использовании, что с помощью него установить кнопки соц сетей на сайте сможет даже школьник.

Первое. Переходим на сайт Share42.com. Далее выбираем какого размера будут значки кнопок 32×32, 24×24 или 16×16.
Теперь кликаем по тем кнопкам, которые будут добавлены к вам на сайт. Можете накликать хоть штук 20. Я выбрал самые основные одноклассники, в контакте, твиттер, фейсбук.

Не забывайте и про кнопки из вкладки «Прочие». Они помогут оформить RSS подписку или сделать закладку страницы.

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

Ставим кодировку сайта UTF-8. Выбираем язык подсказки иконок «Русский». Если есть желание добавить иконку сайта Share42.com, тогда ставим напротив галочку.
Прописываем ссылку на RSS вашего фида (Например, у моего блога фид feeds.feedburner.com/seoslim).
Третье. Сейчас можете просмотреть тестовый результат отображения кнопок социальных сетей, а далее скачиваете архив со скриптом.

Четвертое. Самая сложная часть установить работу скрипта на блоге. Распаковываем скаченный ранее скрипт на компьютере. С помощью FTP — менеджера закачиваем папку share42 к себе на хостинг.
Я для своего удобства в корне файлов блога создал отдельную папку file и залил папку share42 именно туда.
Вот такой получился адрес к папке:
http://seoslim.rufileshare42 |
Так как я делаю социальные кнопки для wordpress, поэтому выбирал из списка тип сайта: wordpress.
Генератор тем временем сформировал скрипт, который необходимо вставить в то место, где будут выводиться иконки голосования.
Я использую вертикальные кнопки, поэтому полученный код вставляю в файл footer.php перед закрывающим тегом </body>.
Те, кто будет делать горизонтальный блок кнопок рекомендую вставить полученный скрипт в файл single.php в любое место, где хотите их увидеть.

Последним шагом останется только оформить стиль социальных иконок сайта. Для этого можете закинуть мой код или использовать свой.
#share42 {
left 0px;
margin-top -180px;
opacity 1;
padding 6px 6px 0px;
position fixed;
top 50% !important;
}
#share42hover {
opacity 0.85;
}
|
Не забудьте обновить страницу. Только после нескольких десятков экспериментов можно добиться отличного результата, который будет красиво сочетаться с дизайном площадки.

Зачем нужны социальные кнопки?
Социальные кнопки — это мощнейший инструмент вирусного маркетинга (о вирусном маркетинге будет отдельный пост, поэтому подпишитесь на обновления блога, чтобы не пропустить). С помощью социальных кнопок мы можем оповестить наших друзей о выходе новой статьи на своем блоге или поделиться интересной информацией других блоггеров (владельцев сайтов, порталов). Наверняка Вы слышали такой термин как «сарафанное радио». Слышали? Отлично! Но для тех кто не слышал, поясню.
Сарафанное радио — способ передачи информации между людьми, основанное на доверительном принципе. Сегодня, в век бурно развивающихся коммуникаций, многие люди не привыкли доверять рекламе, поскольку каждый рекламодатель считает свой товар или услугу лучше, чем у других. Появилось очень много рекламных агенств, которые настолько профессионально составляют рекламные тексты и слоганы, что не «клюнуть» на них бывает очень сложно. Но стоит один раз обжечься на рекламе, как мы сразу перестаем ей доверять. Так кому же тогда доверять? Правильно! Своим друзьям и близким, которые тебе расскажут по секрету, где взять самое лучшее.

В чем прелесть данного метода?
Если в сарафанном радио, до появления социальных сетей, происходил непосредственный контакт между людьми, то с появлением социальных сетей этот контакт стал виртуальным. Это означает, что теперь не нет никаких подозрений на то, что тебе пытаются что-то навязать. Одним нажатием на кнопки социальных сетей, Вы рассказываете всем своим друзьям, что это интересная информация.
Как это работает?
Когда пользователь социальных сетей (возьмем в качестве примера Одноклассники) в очередной раз заходит на свою страничку, то он видит в ленте новостей подобные сообщения:

Или вот так, если взять социальную сеть Вконтакте:

Кроме генератора кнопок соцсетей
Кстати, кроме непосредственно генератора кнопок соцсетей для сайта в usocial.pro есть еще пара фишек, вроде генератора социальных метатегов, кнопок like и всплывающего окошка с предложением вступить в группу.
А вот всплывающее окошко — это интересно. В свое время я перерыл довольно много бесплатных плагинов и сервисов со всплывающими окнами, и у всех была одна беда — кривой интерфейс, нелепый дизайн, плохая поддержка.
Тут все выглядит отлично:

Однако я всплывающие окна использовать не стал, ограничился только установкой кнопок социальных сетей на сайт, так как не люблю большие всплывающие окна в принципе, таймер в 20 секунд маловат,а для привлечения аудитории в группы мне хватает социального замка Social Locker Ultimate, он недавно обновился, стало еще больше офигенных штук в нем, вроде сбора емейл-подписчиков, улучшенной производительности и интерфейса.
Почему кнопки соцсетей для сайта так важны?
соцсети
Я думаю, что Вы уже и сами знаете зачем нужны сайту социальные кнопки? А те, кто не знает этого или еще сомневается в том. чтобы поставить их, то давайте разберемся с этим вопросом раз и навсегда!
Для этого и существуют социальные кнопки на сайте, чтобы человек быстро и без потери своего драгоценного времени, просто взял нажал на нужную ему социальную кнопку и отправил ваш материал всем своим друзьям например Вконтакте или в Одноклассниках одним разом!
Также здесь есть и выгода для Вас, уважаемый владелец сайта, на котором расположены социальные кнопки. Вы спросите, какая? Отвечу Вам! Ведь кнопки социальных сетей на сайте – это бесплатная и очень эффективная реклама вашего ресурса. Вы только представьте себе, что каждый зашедший на ваш сайт посетитель, кликнет по любой из социальных кнопок и отправит вашу ссылку на материал в какую либо из соцсетей своим друзьям, а они в свое время поделятся ей с другими пользователями соцсетей и так далее … Чувствуете какой размах и объем рекламы вашего сайта получается?!
Вот и весь секрет, который нужно знать, чтобы уже наконец решиться поставить кнопки соцсетей для сайта у себя на ресурсе!
Теперь переходим к следующему важному вопросу …
Код JavaScript для шарингов
С теорией закончили, осталось только написать небольшой js для реализации появления окна, в котором пользователь сможет сделать репост на свою страницу.
Чтобы код был более универсальным, я добавил возможность задавать для шеринга любую ссылку. То есть пользователь сможет, находясь на одной странице, сделать репост другой ссылки.
Кнопки являются обычными html-элементами, это позволит стилизовать их как угодно. Пример кнопок в html:
<input value="ВКонтакте" type="button" class="share_btn" data-social="vk"> <input value="Facebook" type="button" class="share_btn" data-social="fb"> <input value="Одноклассники" type="button" class="share_btn" data-social="ok"> <input value="Twitter" type="button" class="share_btn" data-social="tw"> <input value="Google+" type="button" class="share_btn" data-social="gp"> <hr> <input value="ВКонтакте c data-url" type="button" class="share_btn" data-social="vk" data-url="https://vk-book.ru/"> <input value="Facebook c data-url" type="button" class="share_btn" data-social="fb" data-url="https://vk-book.ru/"> <input value="Одноклассники c data-url" type="button" class="share_btn" data-social="ok" data-url="https://vk-book.ru/"> <input value="Twitter c data-url" type="button" class="share_btn" data-social="tw" data-url="https://vk-book.ru/"> <input value="Google+ c data-url" type="button" class="share_btn" data-social="gp" data-url="https://vk-book.ru/">
В атрибутах data-social хранится название соц.сети, в которую будет сделан репост. А в атрибуте data-url прописана ссылка для репоста. Если data-url отсутствует, то по умолчанию будет использована текущая страница.
И теперь сам js. Для его работы необходима библиотеке jQuery.
$(function(){
// клик по кнопке шаринга
$(".share_btn").click(function(){
var social = $(this).data("social");
// урл текущей страницы
var url_share = location.href;
// если задан атрибут data-url, то берем урл из него
if (typeof $(this).attr("data-url") !== typeof undefined && $(this).attr("data-url") !== false) {
url_share = $(this).data("url");
}
// открываем окно для репоста
share(social, url_share);
});
});
/**
* Создание нового окна браузера для репоста в соц.сеть
*
* @param string social - социальная сеть, в которую будет сделан репост
* @param string url_share - url страницы, которая будет опубликована в соц.сети
*/
function share(social, url_share){
// определяем ссылку для нужной соц.сети
var url_soc = false;
switch (social) {
case "vk":
url_soc = "https://vk.com/share.php?url="+url_share;
break;
case "fb":
url_soc = "https://www.facebook.com/sharer/sharer.php?u="+url_share;
break;
case "ok":
url_soc = "https://connect.ok.ru/offer?url="+url_share;
break;
case "tw":
url_soc = "https://twitter.com/intent/tweet?url="+url_share;
break;
case "gp":
url_soc = "https://plus.google.com/share?url="+url_share;
break;
}
// открытие нового окна для шаринга
if(url_soc){
// размеры окна
var width = 800, height = 500;
// центруем окно
var left = (window.screen.width - width) / 2;
var top = (window.screen.height - height) / 2;
// открываем окно
social_window = window.open(url_soc, "share_window", "height=" + height + ",width=" + width + ",top=" + top + ",left=" + left);
// устанавливаем на окно фокус
social_window.focus();
}
}
Как проходило исследование
Анализ проводился в апреле-мае 2016 года на примере 4000 сайтов с адаптивными кнопками uSocial.pro от uCoz. Сайты были созданы на разных платформах и конструкторах. В выборку попали развлекательные и информационные порталы, фан-сайты, лендинги, сайты малого и среднего бизнеса, форумы с аудиторией от 300 до 10 000 посетителей в сутки.
За время исследования страницы с установленными на них кнопками набрали 35 млн уникальных просмотров и 114 тысяч расшариваний в семи соцсетях («ВКонтакте», «Одноклассники», Facebook, «Живой Журнал», Twitter, Google+, «Мой мир») и двух мессенджерах (Viber, WhatsApp).
Яндекс кнопки соц сетей
- Используем Конструктор блока “Поделиться” для выбора требуемых соц сетей.
- Выбираем “Внешний вид блока”.
- Копируем код и вставляем в нужном месте на сайт.
Дело нескольких минут, яндекс поделиться в соц сетях отличный инструмент для разработчиков. В отличии от других сторонних сервисов, о которых мы мало что знаем, скрипт поделиться в соц сетях от яндекса навряд перестанет существовать и работать, и вам не потребуется через время все переделывать.
Теперь несколько картинок для лучшего понимания, выбираем какие сайты будем использовать:

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

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

В основном все понятно, но некоторые пункты требуют пояснения.
- URL to Like — это первое поле, куда мы что-то можем написать. Здесь следует указывать ссылку, на которую будут вести все Like. Если же кнопка у Вас будет установлена «сквозняком» по всему сайту, то лучше это поле оставить пустым: в этом случае ссылка будет автоматически браться на статью, где была нажата. Так сделано на большинстве сайтов.
- Send Button (XFBML Only) — довольно новая функция, которая позволяет отправить сообщение своему другу или знакомому сразу с посещаемого в данный момент сайта, т.е. Вашего. Насколько она нужна — решать Вам. Скажу, что работать она будет на Вашем сайте, если подключена библиотека JavaScript SDK.
Остальные пункты понятны сразу из пояснений на картинке выше. Сверху сразу смотрим результат выбора кнопки. Как только все настроили — нажимаем Get Code (внизу картинки) и получаем код, который необходимо установить себе на сайт. К примеру код, который получился у меня:

Код из верхнего окошка (цифра 1) необходимо поместить в Ваш файл шаблона в пределах тега body (подчеркнуто красным). Facebook рекомендует это сделать в самом начале, поэтому открываем файл header.php (чаще всего здесь в шаблонах находится открывающий body) и вставляем весь код из первого окошка сразу после него.
Код из второго окошка отвечает непосредственно за отображение кнопки «Мне нравится» (Like). Поэтому подбираем место по своему усмотрению, но его обычно устанавливают перед статьей, либо после нее. Чтобы это сделать, нам нужно будет открыть файл single.php (если такого нет, то смотрите какой отвечает за вывод информации постов) и вставить предложенный код №2 в нужное место (обычно перед или после <?php the_content(); ?>).