Как сделать новую функцию Facebook post embed отзывчивой?

Я не смог найти никаких решений в google,которые могут сделать недавно введенные сообщения facebook адаптивными. У кого-нибудь есть решение или трюки? Спасибо

<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766">Post</a> by <a href="https://www.facebook.com/security">Facebook Security</a>.</div></div>
10
css facebook facebook-javascript-sdk

5 ответов

если вы имеете в виду "отзывчивый", как в "отзывчивый дизайн", ты не можешь. Facebook использует междоменный iframe для изоляции JS/CSS и безопасности сеанса, и он генерирует измерения iframe динамически на основе содержимого, используя привилегированную междоменную связь, поэтому вы не можете просто играть с CSS, чтобы получить вещи, как вы хотите. См. Этот раздел на официальная страница для социального плагина:

Can I customize how the post is displayed on my web page?

Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.

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

детали:

в вашей разметке отсутствует идентификатор приложения. Где вы нашли эту разметку? Необходимо указать идентификатор приложения. Если вы загружаете JS SDK вручную, это означает добавление его в параметры FB.init как видно здесь. В вашем случае вы используете сокращенный Init на основе URL, где URL SDK имеет параметры в своем фрагменте:#xfbml=1 в вашем примере. Вам нужно будет изменить его, так что это больше похоже #xfbml=1&appId=1234567890.

обновление: вы должны использовать консоль во встроенных инструментах разработчика Вашего браузера(или Firebug и т. д.) чтобы увидеть информацию об ошибках с JS SDK. Когда я попробовал ваш код на https: / / сайте, я получил эту ошибку:

[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.

поэтому я изменил URL с http://connect.facebook.net/... к протоколу-относительный URL: //connect.facebook.net/...

другим вариантом было бы просто попробовать только на сайте http://. В этот момент, я получил следующие ошибки:

Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().

это подтверждает мои подозрения - вам нужен идентификатор приложения. Я добавил идентификатор приложения, и он работает.

3

я создал небольшой плагин jQuery, чтобы исправить это. Поскольку плагин Facebook Embedded Posts отображает правильную ширину при использовании data-width атрибут, мы можем прослушать изменения ширины на нашей странице, обновить data-width атрибуты, а затем рендеринг Плагины.

см.http://jsfiddle.net/brohde/GRcen/

использование: $('#post').autoResizeFbPost();

плагин логики:

  • на документ готовый:
    • сохранить исходный HTML $('#post') сохранить <div class="fb-post"> элементы-Facebook SDK удаляет это из DOM.
  • Исправления: обновить все <div class="fb-post"> элементы с правильным (использует $('#post').width() ).
  • при изменении размера окна запустите Исправления снова, а также вызов FB.XFBML.parse(); для отображения плагинов Facebook. Плагин будет ждать 1 секунду после последнего изменения размера окна, чтобы избежать нескольких DOM обновления и FB.XFBML.parse(); звонки.
16

Set data-width до auto использовать ширину жидкости:

<div class="fb-post" data-href="url" data-width="auto"></div>

13

нашел это разочаровывающим, я не мог найти ничего более элегантного, чем использование переполнения и максимальной ширины 100%, чтобы заставить горизонтальную полосу прокрутки.

добавил style="overflow-x: auto; max-width: 100%;"

чтобы привести к следующей части FB-post встраивания;

<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&amp;set=a.202870829840431.42585.202866106507570&amp;type=1" data-width="550">

Если вы хотите немного больше элегантности, всегда можно реализовать стиль на полосе прокрутки.

в CSS в WebKit прокрутки - http://css-tricks.com/custom-scrollbars-in-webkit/

jQuery крошечная полоса прокрутки -http://baijs.nl/tinyscrollbar/

надеюсь, кто-то найдет это полезным.

2

Если ваши сообщения видео, вы можете использовать встраивать видео вместо встраивания сообщений, они отзывчивы. Вы можете получить все другие данные из open graph и создать свой собственный дизайн.

https://developers.facebook.com/docs/plugins/embedded-video-player

0