facebook comme le bouton: réactif largeur

Pour l'facebook comme le bouton, j'ai besoin d'être en mesure de garder une largeur par défaut sur le bureau de la résolution (539px) et de modifier la largeur à 100% lors de la résolution de l'écran descend en dessous de 640px (mobile). Ce n'est pas le fb-like div repose sur un attribut appelé: "data-width", qui établit une distance de charger dynamiquement des iframe width et de l'enfant largeurs d'éléments au sein de la src html. Jusqu'à présent j'ai essayé:

<style>
@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important}
}
@media only screen and (min-width: 960px) {
    div.fb-like {width:539px !important}
}
</style>

<div class="fb-like" data-href="https://www.facebook.com/myFacebook" data-send="true" data-show-faces="true" data-font="lucida grande" data-colorscheme="dark"></div>

Comment puis-je modifier les données "largeur" de la valeur, quand j'ai une résolution d'écran inférieure ou appareil mobile?

Comme une mesure temporaire, je l'ai fait pour empêcher le bouton de casser la mise en page sur des appareils mobiles:

@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important; overflow-x:auto}
}

Ce n'est pas l'idéal comme le ferait un utilisateur de faire glisser vers la gauche pour afficher tout débordement, mais c'est la seule solution je pense, jusqu'à ce que quelqu'un a une suggestion. Captures d'écran de cette sont attachés (iOS 7 iPhone & Android 4.3.1)...

facebook comme le bouton: réactif largeur
facebook comme le bouton: réactif largeur

Pouvez-vous essayer de détecter la largeur de la fenêtre d'affichage et la modification des attributs de données de largeur à l'aide de jQuery. Est ce qu'une option?

OriginalL'auteur ChrisJM | 2013-12-07

  1. 3

    Essayer de mettre la .fb-like classe dans une div wrapper avec style="width:100%;. Maintenant, vous pouvez ajouter quelque chose comme un $(window).bind("load resize", function(){} pour obtenir la largeur du navigateur, et de redimensionner le bouton j'aime.

    Edit:

    <script>
    var container_width_current = $('#WRAPPER-DIV').width();

    $(window).bind("load resize", function(){    
         var container_width_new = $('#WRAPPER-DIV').width();

         if (container_width_new != container_width_current) {
             container_width_current = container_width_new;

             $('#container').html('<div class="fb-like-box" ' +
             'data-href="https://www.facebook.com/adobegocreate" ' +
             'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
             'data-stream="true" data-header="true"></div>');
             FB.XFBML.parse();
         }
    }); 
</script>

    Edit #2:

    C'est un moyen rapide CSS approche:

    #u_0_0 {
    width: 100% !important;
}
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span > iframe {
    width: 100% !important;
    height: auto !important;
}
    Fex, ressemble à ce qui est peut-être une bonne solution. Cependant, je ne suis pas tout à fait clair sur quelque chose - 'qu'est-Ce que $('#container').html' dans le script que vous avez fourni?
    Salut Chris, "conteneur" est le DIV ID de l'emballage/conteneur appelé "#WRAPPER-DIV". J'ai eu "#container" comme nom pour l'emballage sur le premier point. Votre html-code pourrait ressembler à ceci: <div id="container" style="width:100%"> <div class="fb-like" data-href="https://www.facebook.com/myFacebook" data-send="true" data-show-faces="true" data-font="lucida grande" data-colorscheme="dark"></div> </div>
    Cela ne semble pas fonctionner pour moi. J'ai ajouté une page de test ici: [lien]atlasdev.passportpp.com/fbtest.html Pouvez-vous jeter un oeil et voir ce que je fait de mal?
    Salut Chris, essayez le CSS approche que j'ai posté ci-dessus.
    Cela a parfaitement fonctionné. Vous génie!

    OriginalL'auteur Fex del Sollo

  2. 2

    Essayez d'utiliser code Iframe de facebook comme le bouton, au lieu de HTML5.

    Ont un coup d'oeil à ceci: 

    <iframe src="//www.facebook.com/plugins/like.php?href=
https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;
width=225&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;
share=true&amp;height=35&amp;appId=161427297222786" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; width:100%; height:50px;" 
allowTransparency="true"></iframe>

    J'ai changé le CSS largeur à 100% et la hauteur de 50px. Et la largeur de l'URL est de 225 qui est le minimum pour facebook comme.

    Merci, @asachanfbd n'ai pas vu votre commentaire jusqu'à ce que Fex répondu ci-dessus. Merci pour la suggestion supplémentaire si!
    vous devez marquer une réponse comme correcte pour les autres utilisateurs de compter sur.

    OriginalL'auteur asachanfbd