Виджеты можно добавить в блок в разделе сайт - блоки. Для этого нужно сначала получить код виджета, затем вставить его в блок.
Рассмотрим процесс подробнее.
Виджет для сообществ вконтакте
3. Ниже можно увидеть превью виджета:
4. Когда добились желаемого результата - скопируйте код из окна выше превью виджета:
5. В бек-офисе Вашего магазина зайдите в редактирование блока, в который будете вставлять виджет:
6. Перейдите в режим правки html-кода блока, для этого нажмите кнопку HTML:
7. В появившееся окно вставьте код:
8. После этого виджет должен появиться в соответствующем блоке на сайте:
Виджет сообщества Facebook
С некоторых пор Facebook предлагает расширенный вариант
1. Чтобы получить код виджета зайдите на эту страницу
2. В поле URL-адрес страницы Facebook впишите ссылку на Вашу страницу Facebook, настройте параметры отображения виджета, когда добьетесь желаемого результата нажмите "Код":
Как вы можете заметить, появилась возможность отображать последние посты в хронике страницы, ближайшие мероприятия, а также принимать сообщения на ваш аккаунт в Facebook с любого сайта, где установлен виджет вашей страницы. Чтобы включить эти возможности впишите в строку "Вкладки" через запятую - timeline, events, messages. Если вам нужно только что-то одно - удалите лишнее. timeline - это последние посты в хроонике, events - события, messages - сообщения.
И снова приветствую всех читателей блога сайт! Социальные сети – вот о чем я хочу сегодня повести разговор. Социальные сети последние 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, между тэгами
Если же вы используете только какую-то одну форму, то оба фрагмента кода можно объединять и вставлять вместе, например, в тот же сайдбар при помощи обычного текстового виджета. И еще одно правило – если вы будете размещать 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»:
Настройки:
Код, который вы получите при нажатии кнопки «Get Code», вставляется так же, как и во всех предыдущих случаях. Если вы все-таки не угадали с размерами виджета – не беда. Это поправимо – размеры можно изменить во второй части кода вручную. Нужная строка будет выглядеть вот так:
Data-width="360" data-height="290"
Если виджет facebook like box не работает – проверьте, не допустили ли вы ошибки при копировании кода, а также проверьте, туда ли вы вставили фрагменты кодов.
Пожалуй, на этом виджете можно заканчивать статью. Надеюсь, все понятно, а если нет – комментарии вам в помощь. До встречи в следующих публикациях!
Любой уважающий себя блоггер старается не упускать любые возможности, чтобы донести читателю необходимую информацию. Помимо основной площадки — вашего сайта или блога, желательно быть зарегистрированным в популярных социальных сетях. Благодаря им, о вас и вашем сайте смогут узнать больше людей. А используя виджеты социальных сетей, вы без труда донесете до ваших подписчиков и читателей все важное и необходимое.
На нашем блоге мы уже рассказывали, как добавить виджет Одноклассников и виджет ВКонтакте на свой блог, а также не упустили возможность и рассказали, как добавить виджет Google+ на свой сайт. Сегодня мы подробно рассмотрим, как установить на свой блог виджет сообщества Facebook. Возможно, для многих мы не откроем ничего нового и будем рассказывать очевидные вещи, но как показала практика, не все об этом знают.
Благодаря разработке от компании Facebook, ваши читатели без труда смогут присоединиться к сообществу или группе не покидая вашего сайта, а любая раскрученная группа с большим количеством участников будет вызывать только доверие к вам и вашему ресурсу.
Любой виджет представляет собой простую мини-программу, состоящую из специального кода. Разместив его на странице вашего блога, вы получите не только украшение, но и полезный функционал облегчающий доступ к разнообразной информации.
Давайте разберемся, где брать код виджета сообщества Facebook. Для этого необходимо перейти в раздел для разработчиков
на страницу плагинов и выбрать необходимый нам плагин — Page Plugin:
Facebook Page URL
— в этой строке необходимо указать адрес вашего сообщества или группы в фейсбуке.
Width
— задаем ширину виджета. В зависимости от места расположения виджета на вашем сайте, этот параметр может быть у всех разный. Я взял 250, так как этот размер хорошо вписывается в сайдбар моего блога.
Height
— задаем высоту виджета. Здесь тоже на ваше усмотрение.
Use Small Header
— если вы поставите галочку напротив этой настройки, то в таком случае в виджете будет использоваться небольшой заголовок. Решил оставить как есть.
Hide Cover Photo
— отметив эту настройку галочкой, из виджета исчезнет обложка вашей группы. Думаю, не стоит ее убирать, с обложкой виджет выглядит более привлекательно.
Show Page Posts
— используя эту настройку, в виджете будет отображаться колонка с последними записями из вашего сообщества.
Adapt to plugin container width
— адаптация плагина к ширине контейнера. Пробовал убирать и оставлять галочку, изменений в виджете не заметил.
Show Friend’s Faces
— оставив галочку напротив этой настройки, в виджете будут отображаться лица ваших подписчиков.
После совершения необходимых настроек, нажмите на кнопку Get Code. Система сформирует вам два кода:
Первый код необходимо вставить сразу после открывающего тега
, делается это один раз. Находится данный тег в файле header.php.(«Внешний вид» - «Редактор» - «Заголовок»)Второй код размещаем там, где хотим чтобы отображался виджет. Многие выбирают место в сайдбаре. Сохраняем все изменения и обновляем страницу вашего блога. Если все сделано верно, на вашем сайте должен будет появиться виджет сообщества Facebook.
Последнее обновление:21/01/16
А сейчас мы с Вами поставим на блог виджет (гаджет) друзей созданной фан-страницы.
Зачем он нужен? Вы пишете на своем блоге интересные и полезные статьи. Посетитель Вашего блога, заинтересовавшись Вами, возможно, захочет посмотреть на другие Ваши ресурсы, в том числе и на Вашу фан-страницу.
Ему не надо ее искать, он может зайти на нее прямо с Вашего блога, он может нажать «Мне нравится» сразу же здесь, в виджете (гаджете).
Чем больше человек нажмет на эту кнопку, тем лучше для Вашего бренда, для продвижения Вашего блога, так как, как я уже писала, поисковики индексируют фан-страницы наравне с блогами.
Попадаем на страницу Page Plugin .
Сначала видим образец виджета, под ним форма, которую надо заполнить. А под формой превью уже нашего виджета.
Заполняем форму, ставим-убираем галочки и наблюдаем за изменениями виджета. Оставляем тот вариант, который нас внешне больше устраивает:
Значения полей в форме:
Установив все значения, нажимайте Get Code .
Во всплывающем окне Вы получите две части кода, которые нужно будет вставить в шаблон своего блога. Как сказано в пояснении, идеально правильно будет первую часть установить сразу после тега , а вторую в то место, где будет стоять наш виджет.
Мы сделаем тоже правильно: обе части кода объединим, и вставим в виджет (гаджет) сайдбара.
Как установить виджет на блог WordPress, я писала . А как добавить гаджет на блог Blogger –
Помните, я Вам рассказывал о том, как можно установить на сайте. Так вот, пришло время рассказать Вам о том, как можно установить виджет сообщества FaceBook на свой сайт. Социальная сеть Фейсбук становится очень популярной среди русскоязычных пользователей, конечно не настолько, как ВКонтакте, но все же. Тем более , необходимо использовать все методы.
Для того чтобы разместить виджет сообщества FaceBook на своем сайте, оно у Вас уже должно быть создано. У меня оно размещено там же, где и сообщество ВКонтакте, только в другой вкладке:
Виджет сообщества FaceBook на сайте
Кстати, добро пожаловать в . Все сообщества я разделил на вкладки, очень удобно. Если Вас интересует, как это можно сделать на сайте WordPress, то только спросите и я Вам помогу в этом, расскажу, объясню, либо сам часть работы сделаю.
Ну, все, давайте вернемся к нашей теме. У нас сообщество создано, теперь нам необходимо перейти на . На данной странице Вам необходимо (справа) выбрать тип Вашего виджета, я выбрал Like Box .
Страница разработчиков FaceBook
Вы можете любой другой. После этого нажимаем на него и заполняем форму, которая будет отвечать Вашем требованиям (другими словами настраиваем наш виджет):
Настройка виджета FaceBook
Вы можете показывать последние сообщения с Вашей страницы, настроить высоту и ширину, цветовую схему, а также убрать или показать заголовок, либо обрамление виджета. После того, как Вы все настроите, Вам необходимо нажать на кнопку Get Code .
Получение кода виджета FaceBook
Здесь Вы выбираете тип кода, который хотите вставить на свой сайт WordPress. Если Вы вставляете через виджет, то я Вам советую выбирать вкладку IFrame. Если Вы вставляете через файлы темы, то я Вам советую выбирать первую вкладку – HTML5. В данном случае, верхний код Вы можете вставить в файл header.php, либо же в то место, где будете вставлять виджет. А нижний, вставляете в то место, где Вы хотите непосредственного его видеть, я выбрал файл sidebar.php, в нем создал вкладку и на каждую вкладку повесил свой виджет.
