Виджеты и социальные плагины Facebook — как ими пользоваться. Добавление виджетов сообществ вконтакте и facebook

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

Для того чтобы разместить виджет сообщества FaceBook на своем сайте, оно у Вас уже должно быть создано. У меня оно размещено там же, где и сообщество ВКонтакте, только в другой вкладке:

Виджет сообщества FaceBook на сайте

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

Ну, все, давайте вернемся к нашей теме. У нас сообщество создано, теперь нам необходимо перейти на . На данной странице Вам необходимо (справа) выбрать тип Вашего виджета, я выбрал Like Box .

Страница разработчиков FaceBook

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

Настройка виджета FaceBook

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

Получение кода виджета FaceBook

Здесь Вы выбираете тип кода, который хотите вставить на свой сайт WordPress. Если Вы вставляете через виджет, то я Вам советую выбирать вкладку IFrame. Если Вы вставляете через файлы темы, то я Вам советую выбирать первую вкладку – HTML5. В данном случае, верхний код Вы можете вставить в файл header.php, либо же в то место, где будете вставлять виджет. А нижний, вставляете в то место, где Вы хотите непосредственного его видеть, я выбрал файл sidebar.php, в нем создал вкладку и на каждую вкладку повесил свой виджет.

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

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

А в этом посте мы добавим блок «Мне нравится» или по «ихнему» «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 помимо рекомендаций друзьям и рекламы?

Класснуть

Что не говори, а адаптивная вёрстка - это некий тренд, под который приходится подстраиваться. Спорить о её необходимости нет смысла даже из за того, что Google начал повышать в выдаче сайты с адаптивными шаблонами.

Недавно начал пилить сайт. Сделал адаптивный шаблон, всё было хорошо. Но вот, потребовалось поставить виджеты в сайдбар от ВКонтакте и Facebook. Само собой в первоначальном виде они были не очень, пришлось думать над тем, как сделать их адаптивными.

Уже приготовившись к долгим поискам решения проблемы я просто решил прописать в CSS ширину виджета 100% и выставить ширину auto в самих виджетах. И да, это даже заработало!

А теперь поподробней.

Как сделать адаптивный виджет

Для начала следует отредактировать CSS-файл. Если у вас на сайте оба виджета - вставьте такой код:

#vk_groups, #vk_groups iframe, .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe { width: 100% !important; }

Если только ВКонтакте:

#vk_groups, #vk_groups iframe { width: 100% !important; }

Если только Facebook:

Fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe { width: 100% !important; }

Затем в самом коде виджета у width нужно прописать auto.

Пример кода для ВКонтакте:

VK.Widgets.Group("vk_groups", {mode: 0, width: "auto", height: "250", color1: "FFFFFF", color2: "#19232d", color3: "E54E53"}, тут_id_паблика);

Пример кода для Facebook:

Как сделать адаптивные комментарии ВКонтакте и Facebook

#vk_comments, #vk_comments iframe, .fb-comments, .fb-comments iframe, .fb-comments span, .fb-comments iframe span { width: 100% !important; }

Если только ВКонтакте.

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

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

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

Как установить виджет группы 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 того человека, кому принадлежит группа.

Последнее обновление:21/01/16

Виджет (гаджет) друзей фан-страницы Facebook для сайта WordPress или блога на Blogger

А сейчас мы с Вами поставим на блог виджет (гаджет) друзей созданной фан-страницы.

Зачем он нужен? Вы пишете на своем блоге интересные и полезные статьи. Посетитель Вашего блога, заинтересовавшись Вами, возможно, захочет посмотреть на другие Ваши ресурсы, в том числе и на Вашу фан-страницу.

Ему не надо ее искать, он может зайти на нее прямо с Вашего блога, он может нажать «Мне нравится» сразу же здесь, в виджете (гаджете).

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

Итак, создаем виджет (гаджет)

Попадаем на страницу Page Plugin .

Сначала видим образец виджета, под ним форма, которую надо заполнить. А под формой превью уже нашего виджета.

Заполняем форму, ставим-убираем галочки и наблюдаем за изменениями виджета. Оставляем тот вариант, который нас внешне больше устраивает:

Значения полей в форме:

• Facebook Page URL – адрес страницы Facebook, для которой Вы создаете виджет.
• Width – ширина модуля в пикселях. Надо будет смотреть по ширине сайдбара Вашего сайта (или по ширине того места, куда Вы его определите).
• Tabs – определяет, следует ли отображать поток «Последние сообщения» со стены фан-страницы, либо события или сообщения. Здесь я оставляю пустое место, не хочу, чтобы что-то из этого отображалось.
• Height – высота модуля в пикселях. Подбирайте по своему желанию и месту установки.
• Use Small Header – определяет, какова будет верхняя часть модуля.
• Hide Cover Photo – определяет, показывать или скрывать обложку страницы
• Adapt to plugin container width – нужно поставить галочку, тогда виджет должен адаптироваться к ширине контейнера, – думаю, это будет важно для мобильного трафика.
• Show Friends’ Faces – определяет, следует ли отображать фотографии друзей в модуле. Мне нравится, когда фото отображаются. Это оживляет данный модуль.

Установив все значения, нажимайте Get Code .

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

Мы сделаем тоже правильно: обе части кода объединим, и вставим в виджет (гаджет) сайдбара.

Как установить виджет на блог WordPress, я писала . А как добавить гаджет на блог Blogger –