Сайт о телевидении

Сайт о телевидении

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

Виджеты и социальные плагины Facebook — как ими пользоваться. Добавление виджетов сообществ вконтакте и 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 помимо рекомендаций друзьям и рекламы?

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

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

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

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

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

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

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

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

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

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

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

Класснуть

Что не говори, а адаптивная вёрстка - это некий тренд, под который приходится подстраиваться. Спорить о её необходимости нет смысла даже из за того, что 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; }

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

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

Рассмотрим процесс подробнее.

Виджет для сообществ вконтакте

эту страницу

3. Ниже можно увидеть превью виджета:

4. Когда добились желаемого результата - скопируйте код из окна выше превью виджета:

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

6. Перейдите в режим правки html-кода блока, для этого нажмите кнопку HTML:

7. В появившееся окно вставьте код:

8. После этого виджет должен появиться в соответствующем блоке на сайте:

Виджет сообщества Facebook

С некоторых пор Facebook предлагает расширенный вариант

1. Чтобы получить код виджета зайдите на эту страницу

2. В поле URL-адрес страницы Facebook впишите ссылку на Вашу страницу Facebook, настройте параметры отображения виджета, когда добьетесь желаемого результата нажмите "Код":


Как вы можете заметить, появилась возможность отображать последние посты в хронике страницы, ближайшие мероприятия, а также принимать сообщения на ваш аккаунт в Facebook с любого сайта, где установлен виджет вашей страницы. Чтобы включить эти возможности впишите в строку "Вкладки" через запятую - timeline, events, messages. Если вам нужно только что-то одно - удалите лишнее. timeline - это последние посты в хроонике, events - события, messages - сообщения.