Prise de Fb et twitter widgets sensible

Comment faire de Fb et Twitter widgets réactif sur tous les appareils? J'ai tenté de l'iframe width à 100% mais quand je regarde dans les téléphones intelligents, Il s'étend de la mise en page qui mène à la barre de défilement horizontale. Ce qui se passe pour les vidéos de youtube également.

Demandez à une des questions plus spécifiques et de donner un plus clair exemple de ce que vous essayez de faire. Stackoverflow est l'effort dans = l'effort 🙂

OriginalL'auteur logesh | 2012-08-05

responsive-design

6

Pour twitter! La solution la plus simple que j'ai trouvé est grâce à css. Modifier la .twtr-doc de la classe de whathave une largeur de 100%.

Pour FB (en supposant que tu parles comme une boîte) j'ai changé la première largeur de l'auto et de la seconde (css) à 100%
Je vais utiliser le Coca-Cola comme un exemple...
```
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcocacola&amp;width=auto&amp;height=395&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false&amp;appId=176993455739426" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:395px;" allowTransparency="true"></iframe>
```
Automatique n'a pas fonctionné pour moi, j'ai juste enlevé le paramètre de largeur.

OriginalL'auteur Amadou N.
7

essayer:
```
#twitter-widget-0{
   width: 100% !important;  
}
```
Cela fonctionne bien pour twitter et les requêtes de média peut être utilisé pour faire le plein de réactivité.

OriginalL'auteur Guiaemedica Gozum
1

Twitter est assez réactif propre. Mais quelles proportions? Il revient au même problème qu'avec youtube vidéos. Les deux sont des Iframes.

Maintenant, je dois crédit certaines personnes avec à venir avec ce pour youtube, mais j'ai oublié qui. Désolé. En tout cas, il est également utilisé par Tod Moto Fluidvids.

Donc, voici l'astuce. Vous placez l'iframe soit youtube ou twitter widget à l'intérieur d'un div (ou tout élément de bloc).
lui donner ces CSS valeurs:
```
div {
position: relative;
padding-top: SEE BELOW
width: 100%; }
```
ensuite l'appliquer à l'Iframe:
```
div iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%; }
```
à VOIR ci-DESSOUS, vous devez écrire votre rapport d'aspect. Vous pouvez calculer ce par deviding la largeur par la hauteur et en multipliant à 100%. Ce qui est beau, facile à Sass, si vous n'avez pas découvert encore.

Mon code html ressemble à ça, btw. Le twitter fichier javascript n'est pas en inline parce que je l'Ajax le widget et dans la ligne des scripts de ne pas exécuter lorsque Ajaxed.
```
<aside>
    <div>
        <a class="twitter-timeline" height="570" href="https://twitter.com/PartosNL" data-widget-id="520500579978596352">Tweets van @PartosNL</a>
        <script src="<?php bloginfo('template_url');?>/js/twitter.js"></script>
        <br class="clear">
    </div>
</aside>
```
OriginalL'auteur Sjerp van Wouden
1
```
.twitter-tweet{
   width: 100% !important;  
}
```
utilisation de la classe au lieu de l'id #twitter-widget-0, car si vous ajoutez plus d'un compte twitter à votre site web,il ne sélectionne que le premier tweet et ajouter la feuille css pour elle.

OriginalL'auteur Saajan
0

Pour Twitter essayer:

L'étape 1:
Télécharger Twitter widget fichier js et la mettre dans "YOUR_LOCAL_PATH/js"

Étape 2:
Modifier le widget script d'appel de la manière suivante:
!function(d,s,id){var js,fjs=d. getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="YOUR_LOCAL_PATH/js/twitter.widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
Vous devriez voir que j'ai supprimé la variable "p" et le protocole de déclaration et je suis pointant vers une copie locale de Twitter widget fichier js.

Étape 3:
Utilisez quelque chose comme http://jsbeautifier.org/ pour rendre le code à l'intérieur de la widgets.js fichier lisible. Après que copier ce code à l'intérieur "YOUR_LOCAL_PATH/js/twitter.widgets.js"

L'étape 4.1 : recherchez et modifier comme je l'ai suggéré ci-dessous:
dimensions: { DEFAULT_HEIGHT: "600", DEFAULT_WIDTH: "100", //modify this to be 100 - like 100% NARROW_WIDTH: "100", //modify this to be 100 - like 100% MIN_WIDTH: "100", //modify this to be 100 - like 100% MIN_HEIGHT: "200", WIDE_MEDIA_PADDING: 81, NARROW_MEDIA_PADDING: 16, WIDE_MEDIA_PADDING_CL: 60, NARROW_MEDIA_PADDING_CL: 12 },

Etape 4.2 : recherchez et modifier comme je l'ai suggéré ci-dessous:
À partir de ce: .cadre.style.minWidth = s.les dimensions.MIN_WIDTH + "px" pour ce
.cadre.style.minWidth = s.les dimensions.MIN_WIDTH + "%"

Étape 5. Félicitations, vous avez maintenant un réactif widget twitter! Si ils lancer une nouvelle version du widget, juste refaire les étapes que j'ai proposé!

Cela résout le problème, mais alors vous seriez en utilisant une mesure JS donc, votre application peut se briser dans l'avenir si Twitter change quoi que ce soit de leur côté. @Guiaemedica Gozum la réponse de travaux avec quelques lignes de CSS, ce qui signifie que les requêtes de média peut être utilisé pour plein de réactivité.

OriginalL'auteur Alex Ghinea

Vous devez vous connecter pour publier un commentaire.