Как добавить новый плагин страниц Facebook в WordPress. Плагины для фейсбука

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

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

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

Данная кнопка позволяет посетителям подписаться на получение информации о вашей деятельности на Facebook.

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

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

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

Плагин Like Box позволяет владельцам Facebook Pages получать лайки с их собственных сайтов. Кроме того, вы сможете увидеть количество пользователей, которым нравится страница, и количество их друзей, которым также понравилась страница.

Кнопка Login показывает посетителю количество его друзей, которые уже авторизовывались на сайте через профиль Facebook. Плагин позволяет настроить количество рядов для отображения изображений профилей пользователей.

И снова приветствую всех читателей блога сайт! Социальные сети – вот о чем я хочу сегодня повести разговор. Социальные сети последние 2-3 года особенно активно развиваются, и поэтому их влияние на продвижение сайта/блога несомненно.

Например, социальные плагины facebook , виджеты от Одноклассников или VK, кнопки Google+ или Твиттреа – весь этот функционал помогает привлечь на сайт постетителей. Всю тему охватить сразу сложно, поэтому сегодня я расскажу о функционале от Фейсбука — facebook like box wordpress , комментариях от facebook и других виджетах и плагинах, которые применимы для сайта на любом движке, в том числе и на CMS WordPresss.

Начинается наше знакомство со всеми этими скриптами со страницы https://developers.facebook.com/docs/plugins?locale=ru_RU . Здесь вы слева в сайдбаре увидите все предлагаемые виджеты, коды кнопок и т.д. Давайте будем знакомиться со всем функционалом по порядку.

Первая – кнопка «Нравится». Жмем на этот пункт и попадаем сюда:

Одну часть facebook виджет like необходимо вставить в файл header.php вашего шаблона темы, а вторую часть – в то место, где должна отображаться сама кнопка. Все верно, но в процессе эксплуатации этих виджетов и скриптов я сделал один вывод, который вам тоже может пригодиться. Дело в том, что первую часть кода вы можете вставлять в header.php, между тэгами только в том случае, если на данном сайте вы используете несколько таких «фишек» — например, кнопку facebook like box widget и код комментариев от facebook.

Если же вы используете только какую-то одну форму, то оба фрагмента кода можно объединять и вставлять вместе, например, в тот же сайдбар при помощи обычного текстового виджета. И еще одно правило – если вы будете размещать wordpress плагин facebook или виджет в сайдбаре, на всякий случай установите заранее плагин Exes PHP –он позволяет выполнять php-коды в сайдбаре сайта.

Переходим ко второму скрипту – кнопка «Share Button».

Настроек здесь поменьше – указываете адрес своей страницы в поле «URL to share», выбираете тип отображения в поле «Layout», как и в первом случае (горизонтальный виджет facebook для wordpress , вертикальный и т.д.), и получаете код кнопки. Поле «Layout» — хорошее подспорье для установки кнопки в сайдбар – вы можете установить ее и в узкий, и в широкий сайдбар. Код размещаете на сайте таким же образом, что и в первом случае – или вместе, или на разных страницах, в зависимости от количества функционала от Фейсбук.

Настройки у всех кнопок очень похожи, поэтому сделав что-то один раз, вы уже не запутаетесь в настройках другого функционала от Facebook. Настройки немного шире – как и прежде, в поле «URL to send» вписываете адрес нужной страницы (сайта или страницы на Facebook), а в полях «Width» и «Height» указываете ширину и высоту виджета. Также вы можете выбрать одну из двух предлагаемых цветовых схем в пункте «Color Scheme» — светлую или темную.

Идем дальше – виджет «Embedded Posts» или «Встроенные записи». Здесь настройки посложнее – вам нужно будет найти адрес интересующей вас публикации на Facebook и вписать его в настройки виджета. Сейчас расскажу, как это сделать.

Предполагается, что у вас уже есть страница на Фейсбуке, в которой вы публикуете свои записи или просто интересные новости с других ресурсов. То есть – делитесь новостями со своими друзьями по социальной сети. Этот социальный виджет facebook требует от вас ссылку на публикацию, которую вы должны вписать в поле «URL of post». Ссылка эта находится следующим образом:

Вы должны скопировать не тот адрес, который вы видите над картинкой, а нажать на ссылку с временем публикации. В нашем случае это ссылка «около часа назад». В адресной строке вашего браузера вы увидите нужную вам ссылку, которую и нужно скопировать и вставить в поле виджета «URL of post». Вот она:

Еще в настройках этого виджета вы можете указать его ширину. Код виджета вставляется в сайт аналогично предыдущим случаям – или два в одном, или разносите коды по разным файлам шаблона. При этом, напоминаю, верхнюю часть кода вы вставляете в файл header.php, между тэгами , а нижнюю часть – туда, куда вам заблагорассудится. То есть, в шаблон записи, в шаблон страницы или в сайдбар.

Следующая кнопка от Фейсбук – кнопка «Follow Button» или «Подписаться». Вот как выглядит страница ее настроек:

В виджетах и плагинах Фейсбук хорошо уже только то, что все настройки стандартизированы, то есть – выглядят практически одинаково. Поэтому все понимается интуитивно. Поле «Profile URL» — адрес вашего профиля на Facebook, здесь же в настройках вы определяете ширину и высоту будущего виджета, который потом вставите на сайт. Цветовая схема тоже в двух вариантах – белая и черная. Отображение типа кнопки и отображение логотипа вашей страницы вы тоже можете настроить.

Дальше – виджет «Feed Dialog» или, в буквальном переводе – «RSS Диалог». Здесь все сложнее. Сам facebook плагин для wordpress предназначен для того, чтобы можно было публиковать отдельные записи, связанные временной шкалой. Таким образом, в своих RSS новостях вы сможете контролировать подписи и личные комментарии от пользователей, если они будут комментировать ваши записи. Интеграция такова:

Это диалоговое окно можно использовать с JavaScript, iOS, и Android SDK, оно делает полное перенаправление URL. Здесь приведены некоторые примеры фрагментов кода, которые могут быть использованы, чтобы вызвать это диалоговое окно.

Вот пример JavaScript кода, которым можно вызвать такое диалоговое окно:

FB.ui({ method: "feed", link: "https://developers.facebook.com/docs/", caption: "An example caption", }, function(response){});

Https://www.facebook.com/dialog/feed? app_id=145634995501895 &display=popup&caption=An%20example%20caption &link=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F &redirect_uri=https://developers.facebook.com/tools/explorer

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

Поэтому переходим к виджету комментариев от Фейсбук – «Comments».

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

Или вот такая:

Если хотите, чтобы отображались только комментарии от Фейсбук – или удалите эту строчку, или закомментируйте ее, а ниже вставьте код комментариев от Facebook. Закомментировать можно так:

Одной из любых этих строчек.

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

Виджет «Like Box» — это специальная версия кнопки от Фейсбук, которая предназначена только для Facebook страниц. Этот facebook виджет like позволяет администратору сайта продвигать свои страницы и внедрять простой RSS поток с одной страницы на другие сайты. Вот как выглядит ваш виджет «Like Box»:

Настройки:

1. Поле «Facebook Page URL» — адрес вашей страницы на Facebook.
2. Поля «Width» и «Height» – ширина и высота виджета. Обычно он встраивается в сайдбар блога, поэтому подбирайте эти значения тщательно, чтобы ваш шаблон не перекосило.
3. Блок, в котором вы можете указать:
   1. Отображение аватаров подписчиков.
   2. Отображать название страницы в Facebook.
   3. Отображать в iframe последние записи блога.
   4. Показать рамки виджета.

Код, который вы получите при нажатии кнопки «Get Code», вставляется так же, как и во всех предыдущих случаях. Если вы все-таки не угадали с размерами виджета – не беда. Это поправимо – размеры можно изменить во второй части кода вручную. Нужная строка будет выглядеть вот так:

Data-width="360" data-height="290"

Если виджет facebook like box не работает – проверьте, не допустили ли вы ошибки при копировании кода, а также проверьте, туда ли вы вставили фрагменты кодов.

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

Facebook like box, также известный как Facebook fan box, стал практически обязательным элементом для многих сайтов. Не так давно Facebook заменил этот виджет на новый плагин Facebook Page. В сегодняшней статье мы покажем вам как добавить плагин Facebook Page в WordPress.

Примечание: Пользователи, которые уже добавили старый like box или же fan box на свои сайты WordPress, будут автоматически перенесены на новый плагин Page.

Что такое Facebook Page плагин?

Facebook Page плагин — это замена того, что прежде называлось Facebook Like box. Он позволяет вам рекламировать вашу страницу на Facebook на своем сайте. Новый плагин Facebook Page делает то же самое.

Как добавить новый плагин Facebook Page в WordPress

Первым делом вам необходимо перейти на сайт Facebook’s Page Plugin . Там вы найдете опции для настройки внешнего вида вашей «встроенной» страницы Facebook.

Вы можете отобразить фотографию обложки, записи и лица друзей на странице плагина. Как только закончите с настройкой внешнего вида, кликните на кнопку Get Code для продолжения.

Facebook отобразит вам два кусочка кода. Скопируйте первый сниппет кода и вставьте его в свою тему или же дочернюю тему в файл header.php сразу после тега .

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

Мы надеемся, что эта статья помогла вам добавить плагин Facebook Page на свой сайт WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

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

Зачем нужен виджет группы фейсбука на сайте.

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

Как установить виджет группы Facebook’а на сайт на WordPress.

1. Сначала нам нужно этот виджет сгенерировать, точнее сгенерировать код виджета. Для этого идем сюда https://developers.facebook.com/docs/plugins/page-plugin Хотя тут все по английски, но все довольно просто.

*Сейчас вид виджета обновили, сделали его более красивым. Раньше он отображался немного по другому.

Спускаемся немного ниже и видим настройки виджета.

1.2 Прописываем ширину. В моем случае это 310 пикселей

1.3 Тут нужно прописать высоту виджета. Она зависит от того, захотите вы в виджете отображать записи вашей группы (п.1.5). Я поставил 350 пикселей.

1.4 Скрыть/показать шапку группы. Я оставлю, так красивее выглядит

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

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

Вот как заполнил я.

Заполнили? Нажимаем на кнопку «Get code» (получить код) и видим два окна с кодом. Эти коды нужно поставить в два разных места.

2. Верхнюю часть кода мы установим в файл footer.php

Путь файла домен_сайта/public_html/wp-content/themes/название_вашей_темы/footer.php

У вас может не быть папки public_html или она может называться как то по другому Docs или как-нибудь еще. Это особенности хостинга, которым вы пользуетесь.

Подключаемся к хостингу. Я это делаю через FileZilla и скачиваем файл на компьютер.

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

Так, с первой частью кода разобрались)

4. Теперь копируем нижнюю часть кода и идем в админку сайта нашего/Внешний вид/Виджеты/ И перетаскиваем виджет «Текст» в наш сайдбар. Вставляем наш скопированный код. Можем написать заголовок и жмакаем «Сохранить».

На этом всё) Идем проверять на сайт. Вот что видим. Поставленная задача выполнена.

*Важный момент — если вы устанавливаете виджет не на свой сайт, а как, например, фрилансер на сайт заказчика, то пусть ваш заказчик через свой профиль в фейсбуке сгенерирует данный код и вам вышлет. Это нужно для того, чтобы виджет был завязан на app id того человека, кому принадлежит группа.

Seamlessly add a Facebook Page to your WordPress website with the Facebook Page Plugin! Trusted by more than 30,000 WordPress websites worldwide, the Facebook Page Plugin is the simplest way to add a Facebook page to your website.

You can add your Facebook page to any widget area with the custom Facebook Page Plugin widget, with live preview available in the Customizer.

The plugin can be used to add your Facebook page to any post, page or text widget by using the shortcode to display the plugin wherever you like, as often as you like.

Other features include:

With more than 30,000 installs and nearly 50 5-star rating, the Facebook Page Plugin is one of the most popular social media plugins for WordPress.

Plugin Settings

The Facebook Page Plugin uses a shortcode to insert the page feed. You set your settings within the shortcode.
Available settings:

Href (URL path that comes after facebook.com/) width (number, in pixels, between 180 and 500, default 340) height (number, in pixels, minimum 70, default 500) cover (true/false, show page cover photo, default true) facepile (true/false, show facepile, default true) tabs (any combination of , default timeline) cta (true/false, hide custom call to action if applicable, default false) small (true/false, display small header (must be true for height to be lower than 130px), default false) adapt (true/false, force plugin to be responsive, default true) language (languageCode_countryCode eg: en_US, language of the plugin, default site language)

Deprecated Settings *

posts (true/false) — posts has been replaced by tabs as of 1.4.0. There is a fallback in place to convert it to tabs

Example:
This will display a Facebook page feed that loads in the page facebook.com/facebook that is 300px wide but adapts to it’s container, 500px high, displaying the page’s cover photo, facepile and recent posts in the same language as the site. See the screenshots tab for a demonstration of how it will appear

Filter Reference

Changes who can see the shortcode generator on the dashboard. Default: edit_posts

Facebook_page_plugin_app_id

Changes the Facebook App ID.

Скриншоты

Часто задаваемые вопросы

The latest version of the API has removed show posts and replaced it with tabs which is more dynamic. To show just the posts, your tabs value should be «timeline». To hide the posts, tabs should be empty (shortcode) or select «none» (widget). If you’re using the shortcode, remember that by default it shows the timeline so you must set it as either an empty or false value to hide posts ie tabs="" or tabs="false" . If the posts option is already being used it will be converted to tabs.

What languages are available?

As of version 1.2.0, the plugin is available in all languages provided by Facebook (full list availabe ). By default it uses the same language as the site, but alternatively you can specify the language in the shortcode. The dashboard widget is currently only available in English but is multilingual ready.

If the URL for your page is http://facebook.com/ABC123 then when you use the shortcode don’t include the domain, instead use like so:
Also, if your page has only just been created it may take some time for the API to load the page. Just be patient

What versions of WordPress will this plugin work on?

Shortcodes were introduced in WordPress 2.5, so theorectially it should work on all sites that are at least 2.5, however it has only been tested on versions 4.0 and up, and no guarantee will be made concerning earlier versions

I can only see a link, the plugin won’t load

By default the plugin will display a link to your page while the page plugin loads. If the page plugin doesn’t load, this could happen for a number of reasons. Your connection could be very slow, you could have JavaScript disabled, you could have an ad blocker or similar browser extension blocking the plugin or there could be an error in the information you have provided in the widget or shortcode.
Additionally, if your Facebook page has audience restrictions for age and/or location, the plugin will not display. If you want the plugin to display, disable the audience restrictions in your page settings on Facebook.

I can’t get the Facepile to work!

Chances are your plugin isn’t tall enough to display the facepile properly. The facepile requires the plugin to have a minimum height of 214 pixels, or 154 pixel if using the small header.

Отзывы

Участники и разработчики

«Responsive Facebook Page Plugin» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Журнал изменений

1.6.3 — 01/04/18

• Improved string translations
• Updated Graph API from v2.5 to v2.12
• Fail gracefully when SimpleXML isn’t installed
• Fixed changelog link
• Updated the plugin display name to avoid potential trademark issues

1.6.2 — 18/11/17

• Changes minimum WordPress version to 4.6 for translations
• Tested for WordPress 4.9 ‘Tipton’
• Fixed bug with setting the language in the shortcode generator
• Increased accuracy of URL detection in the widget form

1.6.1 — 11/04/17

• Adding text domain header
• Adding implementation indicator for debugging

1.6.0 — 02/04/17

• New landing page with FAQs to help with onboarding of new users
• Removal of the admin notice review nag
• Localisation of SDK
• Added events option to the widget and shortcode generator
• Changed tabs setting to checkboxes instead of a dropdown

1.5.3 — 25/01/16

• Fixed bug where share button would return App Not Setup error

1.5.2 — 01/12/15

• Fixed bug where plugin would rerender during scroll on mobile devices

1.5.1 — 29/11/15

• Fixed bug where plugin wouldn’t rerender
• Fixed bug with languages XML file not loading on installs where the admin is not wp-admin

1.5.0 — 23/11/15

• Migrated to object oriented
• Fixed languages XML file being blocked by iThemes Security
• Fixed HTML issue with dashboard widget
• Added script that makes the plugin fully responsive

1.4.2 — 23/09/15

1.3.3 — 11/08/15

• Direct access security update
• Verifying compatibility with WP 4.2.4 and WP 4.3
• Fixing bug where some options in the widget would revert to the default instead of false

1.3.2 — 25/07/15

• WP 4.2.3 Compatibility
• Upgrading to Graph API 2.4

1.3.0 — 02/07/15

• Added hide-cta, small-header and adapt-container-width settings
• Adjusted min height and width

1.2.5 — 06/06/15

• Fixed close icon on notice

1.2.4 — 05/06/15

• Fixed readme

1.2.3 — 04/06/15

• Fixed bug where the admin dashboard and widgets pages would break if the WordPress installation is running on localhost and there is no internet connection

1.2.2 — 27/05/15

• Fixed posts option for widget

1.2.1 — 27/05/15

• Fixed readme bug

1.2.0 — 26/05/15

• Added multilingual support. Language can be specified in the shortcode, otherwise it is retrievd from the site settings.
• Added a shortcode generator dashboard widget to allow easier creation of the shortcode
• Added a custom widget

1.1.1 — 14/05/15

• Fixed height bug

1.1.0 — 10/05/15

• Added filter to allow calling of shortcodes in the text widget