Использование Facebook Page Plugin

При попытке использовать плагин страницы из Facebook для создания небольшого портлета для отображения обновлений со страницы компании, я столкнулся с различными ошибками. Самый большой из них - плагин, который просто не отображается.Использование Facebook Page Plugin

Вот страница: http://bit.ly/1OR4bYw

Вот мой код (напрямую скопировать из Facebook, в стороне от HTML-тегов):

<html> 
    <body> 
     <div id="fb-root"></div> 
     <script>(function(d, s, id) { 
      var js, fjs = d.getElementsByTagName(s)[0]; 
      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.5"; 
      fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk'));</script> 

     <div class="fb-page" data-href="https://www.facebook.com/facebook" 
     data-small-header="false" data-adapt-container-width="true" 
     data-hide-cover="false" data-show-facepile="true" 
     data-show-posts="true"><div class="fb-xfbml-parse-ignore"> 
     <blockquote cite="https://www.facebook.com/facebook"> 
     <a href="https://www.facebook.com/facebook">Facebook</a> 
     </blockquote></div></div> 
    </body> 
</html>

Ошибка выброшен в консоли: GET файл : //connect.facebook.net/en_US/sdk.js net :: ERR_FILE_NOT_FOUND

Решение: добавьте 'https: //' infront пути к sdk. В результате в следующей строке изменен:

js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";

Однако это приводит к ошибке не брошенной больше, но дисплей плагин (фактический виджет) является еще не отображается. Вернее, НИЧЕГО не отображается.

Я пробовал:

Удаление '# XFBML = 1 & версия = v2.5' в конце пути
Изменение расположения DIV с идентификатором «FB-корень "
Изменение местоположения скрипта (до и после различных элементов)
Использование нескольких браузеров
Используя все возможные решения от this вопроса

Мне трудно поверить, что образец кода с сайта разработчиков Facebook не будет работать, и мне бы хотелось, чтобы какое-то объяснение того, что я делаю неправильно.

источник

2015-10-21 Bimde

Прежде всего, вам нужно использовать код на веб-сайте, который рассматривается через HTTP (S), в противном случае ссылка на SDK в виде '// connect.facebook.net /' выиграл» т работы. Вы просматриваете свою страницу только локально в браузере, открывая через файловую систему? В этом случае SDK может не работать (даже если вы исправляете проблему с адресом) - попробуйте, когда страница будет загружена на (локальный) веб-сервер и доступна через HTTP (S). – CBroe

@CBroe Спасибо за вход, я попытался загрузить файл на веб-сервер и посмотреть его таким образом, и это было удивительно. Однако вы можете объяснить мне, почему это происходит, и почему невозможно открыть SDK при открытии файла из локальной файловой системы (даже с помощью «https:» перед ссылкой). Еще раз спасибо. – Bimde

SDK может быть «доступен», но он, вероятно, не может проверить другой материал должным образом - например, какой пользователь в настоящий момент зарегистрирован в Facebook в браузере. (И если ваша страница FB, которую вы хотите отобразить для плагина, еще не опубликована или ограничена доступом каким-либо другим способом, какой пользователь зарегистрирован в вопросах.) – CBroe

Я отредактировал этот ответ, чтобы сделать его лучше.

Во-первых, убедитесь, что вы встраивание свою собственную страницу, а не на Facebook ...

Вместо:

... 
<div class="fb-page" data-href="https://www.facebook.com/facebook" ... 
...

..your код будет выглядеть так:

<body> 
    <div id="fb-root"></div> 
    <script>(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 
    <!-- your content --> 
    <div class="face"> 
     Here is the div or section where you want to place your Facebook snippet. 
     <br> 
     <div class="fb-page" data-href="https://www.facebook.com/YOURPAGE" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/YOURPAGE"><a href="https://www.facebook.com/YOURPAGE">YOUR PAGE TITLE</a></blockquote></div></div> 
    <!-- your content --> 
</body>

Оставьте предоставленный код таким, какой он есть, вам не нужно вносить изменения, и если вы хотите сделать это, убедитесь, что вы сделали это на Facebook's code gen.

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

Установив Xampp, вам нужно только добавить корневую папку своего веб-сайта в папку с именем htdocs. Это ваш localhost. Каждый веб-сайт, который вы хотите создать, я предлагаю вам сделать это в этой папке, чтобы вы могли видеть вещи точно так, как они будут отображаться веб-браузерами.

Предположим, что корневая папка вашего сайта называется example, и она находится внутри htdocs Xampp. Вы поворачиваете Apache on в Xampp и заходите в свой браузер и введите localhost/example/, и вы увидите свою индексную страницу.

Надеюсь, это поможет! Если это так, отметьте ответ как правильный или полезный! Спасибо;)

источник

2015-10-24 05:29:06

Все было в порядке с кодом, единственная проблема была что он не был на веб-сервере. Xampp отлично работает. Спасибо. – Bimde

Добро пожаловать! Рад помочь! –

На всякий случай у вас все еще есть эта проблема, используйте этот код вместо этого, код facebook, кажется, дает ошибки в моем блогере, пока я не использовал строки кодов ниже для этого веб-сайта. http://www.HipHopLevel.net

<div id='fb-root'/> 
<script>//<![CDATA[ 
(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    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.3&appId=YOUR APP ID"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
//]]></script>

источник

2016-08-23 00:56:14 Abraham

Использование Facebook Page Plugin

ответ

Смежные вопросы