Вы любите подарки? Дарить или получать? Здесь мы расскажем много интересного и для дарителей, и для получателей!

Как правильно добавить блок от Facebook на сайт

У меня появилось много виртуальных друзей по школе СтартАп. Сейчас заканчивается последняя неделя тренинга "Интернет-магазин с нуля", и я вижу, что у многих коллег не совсем получилась вставка плагина от Facebook в сайдбар магазина на InSales. Я общалась с техподдержкой InSales, и совместными усилиями нам удалось победить этот плагин :) Пользуясь случаем, выражаю признательность Анастасии Качаловой за профессиональную работу!
Вот вкратце история вопроса: такой вид имел настроенный на мой магазин плагин Like Box

А вот так он выглядел в InSales:


Соответственно код блока в Facebook:


И код в InSales:

Как видно, коды не совсем совпадают, долго над этим мучилась, пыталась вручную сделать на сайте идентичный вариант, но создавалось впечатление, что часть кода просто не воспринимается самой платформой inSales. Техподдержка уверяла, что никаких ограничений на применение фреймов у них нет, и им тоже непонятно такое поведение платформы :)

Решение оказалось самым простым: в сгенерированном на Facebook коде нужно выбрать не код в формате iframe, а код в формате html5. Тут есть одна тонкость: этот код состоит из двух частей, одну из них нужно вставить в шаблон HTML на Вашем сайте: Cайт\Редактор темы\HTML (см. выделенный фрагмент, его надо вставить непосредственно перед закрывающим тегом </head>)


а вторую часть - в блок на сайте Вашего магазина, где Вы настраиваете плагин Facebook Like Box:


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

Вам понравилось? Поделитесь с друзьями!
Пообщаться со мной можно здесь:

Комментарии: "Как правильно добавить блок от Facebook на сайт" (29)

  1. Спасибо за консультацию. Думаю многим пригодится.

  2. Никогда бы не догадался, спасибо!

    • Марина пишет:

      Борис, на самом деле тут имеет место эффект ученика, по-моему: нам сказали поставить код iframe – и мы ставим его. Не работает? Ну и ладно) Я сделала вывод, что всегда нужно экспериментировать, особенно если какая-то проблема не решена и сидит занозой)

  3. Марин, спасибо! Буду знать, к кому в гости придти,если понадобится установить плагинчик.

    • Марина пишет:

      Ирина, спасибо за доверие :) С удовольствием помогу, чем смогу. Оказывается, сайтостроение – это моя слабость :) По крайней мере, мне очень интересно этим заниматься, думаю, всем моим друзьям – так же!

  4. Спасибо за информацию! А как Вы сделали летающую птичку по сайту)?

    • Марина пишет:

      Алексей, птичку сделать совсем просто: установите плагин AnimatedTwitterBird
      Скачать его можно отсюда: http://wordpress.org/extend/plugins/anmiated-twitter-bird/faq/
      Установка – самая обычная, без подводных камней. Удачи!

      • Марина, спасибо! Вы – супер! А то я уже вся измучилась! Думала, это потому, что у меня Мас, наши преподы не оговаривают, что некоторые рекомендуемые ими программы для этой ОС не подходят. А я и так отстаю, надо догонять!

        • Марина пишет:

          Юлия, да Вам несказанно повезло! Мас – это голубая мечта многих :) Заходите в гости, буду рада!

  5. Марина, большое спасибо за очень полезную информацию! а я только теперь, прочитав этот пост обратила внимание на то, как выглядит в моем магазине блок с фейсбуком.

    • Марина пишет:

      Ирина, приветствую Вас! Рада, что немного помогла :) Заходите в гости, а я уже иду к Вам :)
      Пришла….
      У Вас интересный и полезный сайт, задержалась надолго! Единственное НО – оставить коммент можно при условии регистрации, мне кажется, это не очень удобно

  6. У меня не получилось, хотя я делала все по-порядку и в точности повторяла. В блоке не сохраняется код html.

  7. У меня тоже ничего не получилось. В InSales блок просто не берет вставляемое, пробовал разные варианты. Под WP все работает в IFRAME варианте, правда фото тоже удваивает, что заметил и в самом FB.

    • Марина пишет:

      Александр и Елена, тогда зайдем с другой стороны: какие у вас темы на InSales? У меня – Телескоп. Если у вас другие, пишите в техподдержку, они ответят, что не так. С фреймами не все темы работают, тут надо, чтобы верстальщик посмотрел

  8. У меня, честно говоря, тоже из всех трёх вариантов только IFRAME в обрезанном варианте работает, ни HTML5, ни XFBML не работают вообще. Я тоже предполагаю, что может дело в теме, но возиться с перенастройкой темы пока не хочу. В принципе без фото пока пойдет. Спасибо, что откликнулись на мой вопрос. Извините, что поздно. Сильно отстаю ото всех, пытаюсь нагнать.

    • Марина пишет:

      Людмила, не переживайте, блок и без фото смотрится нормально! Это, как говаривали наши преподаватели – дань перфекционизму)) что не есть хорошо)) А времени действительно ни на что не хватает, Вы правы

  9. Марина, спасибо за совет, у меня тоже не получилось перенастроить, но зато я подглядела у вас миленькую птичку, поставила на свои сайты, настроение поднимает этот птенчик. Удачи вам!

    • Марина пишет:

      Виктория, мне кажется, есть конфликт в коде ФБ и Инсейлса(( Напрягу еще раз техподдержку, не зря же я ее пиарила :) Если выясню что-то дельное, обязательно выложу здесь.
      Птичка сразила наповал почти всех моих друзей. держатся только самые строгие мужчины, которым как бы не к лицу)) Рада с Вами пообщаться, заходите!

  10. Птичка обалденная! Благодарю! Первым делом поселила на блоге птичку, а кнопка от ФБ пока подождет :) )

  11. Согласна!! Рада знакомству!!

  12. Спасибо, Марина! У меня пока нет такой странички, но я проконсультируюсь с Вами (у Вас очень много полезной информации, спасибо!) и что-то подобное сделаю!

    • Марина пишет:

      Ульяна, ну это проще простого :) Делаете новую страничку, называете ее “Друзья” или как Вам больше понравится, и заполняете ее ссылками на сайты друзей. Обязательно помогу, можете писать на мэйл прямо с моего сайта на страничке “Контакты”

Оставить комментарий к записи: "Как правильно добавить блок от Facebook на сайт"