Адаптивный виджет facebook. Как сделать адаптивные комментарии ВКонтакте и Facebook

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

Добрый всем день! Кто может подсказать как сейчас правильно сделать виджет Фейсбука? Раньше было, также как и в Контакте теперь, после 23 июня всё поменялось. И теперь виджет в Фейсбуке надо оформлять как страницу, т.е. в настройках сайта...

Подскажите, пожалуйста, как сделать чтобы на главной странице отображался виджет группы ВК вместо страницы Facebook?тема дизайна дефолт 2.0

Подскажите почему при установке виджета фейсбук на моем сайте вместо него отображается надпись - Ошибка: недействительный URL-адрес Страницы Facebook.

Добрый день! Установил тему. В шаблоне home сделал сброс настроек. Теперь не пойму, как поменять главную страницу. Есть какая нибудь документация?

Есть решение

Напишите пожалуйста, что я делаю не так. Захожу в фейсбук. Копирую черный фон.Вставляю вместо Вашего виджета, сохраняю и...вообще нет фейсбука на страничке. Помогите пожалуйста.

Попробуйте использовать стандартный код виджета (function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=167596066655267"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk")); shop}{if (class_exists("shopWidgetsPlugin"))}{shopWidgetsPlugin::display(26599)}{/if}{/if} берется на странице товара и вставляется на другой сайт на страницу этого же товара....

Есть решение

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

Не исключено, что это уже не работает:) Можно попробовать посмотреть как GoogleBot.Сталкивался со случаями, когда блок подгружённый аяксом, отображался.Статичные шаблоны напрямую не будут отображаться.Самый простой, наверное, способ: через "Файлы" в приложении "Сайт" залить social.html и грузить его так как вы написали $("#load_social").load("{$wa_url}wa-data/public/site/social.html")

Проверка приложений.

В очередной раз пишу по поводу неадекватности проверки. Искренне надеясь, что хоть какие то мои слова заставят задуматься.В инструкции рекомендуется указывать с проверкой наличия приложения https://www.shop-script.ru/help/3819/calling-other... Чтобы в...

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

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

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

Последнее обновление: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 –

Класснуть

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

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

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

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

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

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

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

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

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

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

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