Comment rendre la nouvelle fonctionnalité d'intégration de post facebook réactive?

Je ne pouvais pas trouver toutes les solutions sur google, ce qui peut rendre le nouvellement introduit facebook postes intégrer à réactif. Ne quelqu'un a une solution ou des astuces? Grâce

<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>

source d'informationauteur JohnC--

  1. 3

    Si vous voulez dire "sensibles", comme dans "responsive design", vous ne pouvez pas. Facebook utilise un cross-domain iframe pour JS/CSS à l'isolement et à la sécurité de session, et il génère de l'iframe dimensions de façon dynamique en fonction des matières à l'aide de privilégiés de la croix-domaine de la communication, de sorte que vous ne pouvez pas jouer avec le CSS pour faire les choses comme vous le souhaitez. Consultez cette section page officielle pour le plugin social:

    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.

    Si vous voulez dire que le plugin ne s'affiche pas correctement, vous devez suivre les instructions à l' Obtenir le Code bouton sur le page officielle pour le plugin social.

    Détails:

    Votre balisage manquant un ID d'application. Où avez-vous trouver cette balise? Vous devez spécifier un ID d'application. Si vous chargez la JS SDK manuellement, ce qui signifie que l'ajout à l'paramètres de FB.init comme on le voit ici. Dans votre cas, vous êtes à l'aide de l'URL raccourcie à base de init, où le SDK de l'URL des paramètres dans son fragment: #xfbml=1 dans votre exemple. Vous aurez besoin de le modifier, de sorte qu'il est plus comme #xfbml=1&appId=1234567890.

    Mise à jour: Vous devez utiliser la console dans votre navigateur intégré dans les outils de développement (ou Firebug, etc.) pour voir les informations sur les erreurs avec la JS SDK. Quand j'ai essayé votre code sur une https://site, j'ai eu cette erreur:

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

    donc j'ai changé l'URL de http://connect.facebook.net/... à un protocole d'URL relative: //connect.facebook.net/...

    Une autre option aurait été de simplement essayer sur un http://site. À ce moment, j'ai les erreurs suivantes:

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

    Cela confirme mes soupçons -- vous avez besoin d'un ID d'application. J'ai ajouté un ID d'application et il fonctionne.

  2. 16

    J'ai créé un petit plugin jQuery pour résoudre ce problème. Depuis le Facebook Embedded Posts plugin rend la largeur correcte lors de l'utilisation de la data-width attribut, nous pouvons écouter de la largeur de changements sur notre page, mise à jour de la data-width attributs et puis re-rendre les plugins.

    Voir http://jsfiddle.net/brohde/GRcen/

    Utilisation: $('#post').autoResizeFbPost();

    Plugin logique:

    • Sur le document prêt:
      • Enregistrer HTML d'origine de $('#post') afin de conserver toutes les <div class="fb-post"> éléments – le Facebook SDK supprime cette du DOM.
    • Le Correctif: mettre à Jour tous les <div class="fb-post"> éléments avec le bon data-width attribut (Utilise $('#post').width() ).
    • Sur la fenêtre de redimensionnement, exécutez Le Correctif à nouveau et aussi appel FB.XFBML.parse(); pour rendre le Facebook plugin(s). Le plugin va attendre 1 seconde après la dernière fenêtre de redimensionnement pour éviter de multiples DOM mises à jour et FB.XFBML.parse(); appels.
  3. 13

    Ensemble data-width à auto utiliser de fluide largeur:

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

  4. 2

    Trouvé ça frustrant, je ne pouvais pas trouver quelque chose de plus élégant que d'utilisation de débordement et max-width de 100% de la force d'une barre de défilement horizontale.

    Ajoutée style="overflow-x: auto; max-width: 100%;"

    Pour le résultat suivant fb-post de la part de l'intégrer;

    <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">

    Si vous voulez un peu plus d'élégance pouvez toujours mettre en oeuvre le style de la barre de défilement.

    CSS Webkit Barres de défilement - http://css-tricks.com/custom-scrollbars-in-webkit/

    jQuery Minuscule barre de Défilement - http://baijs.nl/tinyscrollbar/

    Espère que quelqu'un trouve cela utile.

  5. 0

    Si le vôtre messages vidéo, vous pouvez utiliser Intégrer des Vidéos au lieu d'inclure des Poteaux, ils sont à l'écoute. Vous pouvez obtenir toutes les autres données de l'open graph et de créer votre propre design.

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