League of Craft: Community Index du Forum
League of Craft: Community Index du ForumFAQRechercherS’enregistrerConnexion



 Bienvenue dans le forum de League Of Carft Community 
 


Serveur Dédié Semi-RP/PVP/Survival avec Mumble, disponible 24/24h 7/7j, Divers Plugin (iConomy,Faction,...etc)  
 
   
 
 
 
 
 
 
INFO: Inscrivez-vous et poster votre CANDIDATURE pour ensuite nous Rejoindre sur: 46.18.90.63:25565  
 
   
 
 
 
 
 
 



 Exclamation BIENVENUE SUR LEAGUE OF CRAFT Community© Exclamation  
 
   
 
 
 
 
 
 



 .::VOTEZ POUR NOUS::.  
 
   
 
 
 
 
 
 
 
  
 
   
 
 
 
 
 
 
Facebook Like Button Datawidth

 
Poster un nouveau sujet   Répondre au sujet    League of Craft: Community Index du Forum -> Autres -> Propositions
Sujet précédent :: Sujet suivant  
Auteur Message
arianquyn


Hors ligne

Inscrit le: 04 Avr 2016
Messages: 137
Localisation: Nantes

MessagePosté le: Mer 10 Jan - 19:12 (2018)    Sujet du message: Facebook Like Button Datawidth Répondre en citant




Facebook Like Button Data-width
> DOWNLOAD (Mirror #1)










This is tested in with Chrome and Safari, on desktop and iOS/Android: function setupFBframe(frame) { if(frame.src) return; // already set up // get parent container dimensions to use in src attrib var container = frame.parentNode; var containerWidth = container.offsetWidth; var containerHeight = container.offsetHeight; var src = ' + '?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' + '&tabs=timeline' + '&width=' + containerWidth + '&height=' + containerHeight + '&smallheader=true' + '&adaptcontainerwidth=false' + /* doesn't seem to matter */ '&hidecover=true' + '&hidecta=true' + '&showfacepile=false' + '&appId'; frame.width = containerWidth; frame.height = containerHeight; frame.src = src; // scale up if container > 500px wide if(containerWidth) > 500) { var scale = (containerWidth / 500 ); frame.style.transform = 'scale(' + scale + ')'; } } #facebookiframe { transform-origin: 0 0; -webkit-transform-origin: 0px 0px; -moz-transform-origin: 0px 0px; } EDIT: Forgot about transform-origin, removed need for adjusting left/top to accommodate scale. By manually adding data-width="500" the Page Plugin responded as expected and adapted to the container width to a maximum width of 500px. Lorem ipsum dolor sit amet, consectetur adipisicing elit. When placing it in bootstrap site it does not scale with the bootstrap column resizing –Maksim Luzik May 27 '15 at 10:51 add a comment 13 Answers 13 active oldest votes up vote 35 down vote accepted Facebook's new "Page Plugin" width ranges from 180px to 500px as per the documentation. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In der deutschen Variante steht "Gefllt mir" auf dem Button. You should assign a variable to the timeout and clear it before calling setTimeout again. Without Adaptive Width The plugin will render at the width specified, irrespective of the container width shareimprove this answer edited Jun 18 '15 at 23:20 answered Apr 8 '15 at 0:00 Yugal Jindle 17.9k3596175 1 Yugal, thanks for the explanation! That makes sense =) Now I've configured the data-width attributed to 500px. Wrap the FB div in another div with display set to inline-block. I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer). Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Set a variable and clear it before setting a new one –Ronnie Aug 3 '17 at 18:09 add a comment up vote 5 down vote To make the new Facebook Page Plugin responsive on initial page load, you'll want to remove the data-width attribute and instead add data-adapt-container-width="true" This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px. Klick auf den grnen Button 2. That's the truth. Javascript code in a separate file (the best solution): Codepen /* Vanilla JS */ function setupFBframe(frame) { var container = frame.parentNode; var containerWidth = container.offsetWidth; var containerHeight = container.offsetHeight; var src = " + "?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook" + "&tabs=timeline" + "&width=" + containerWidth + "&height=" + containerHeight + "&smallheader=false" + "&adaptcontainerwidth=false" + "&hidecover=true" + "&hidecta=true" + "&showfacepile=true" + "&appId"; frame.width = containerWidth; frame.height = containerHeight; frame.src = src; } /* begin Document Ready ############################################ */ document.addEventListener('DOMContentLoaded', function() { var facebookIframe = document.querySelector('#facebookiframe'); setupFBframe(facebookIframe); /* begin Window Resize ############################################ */ // Why resizeThrottler? See more : (function() { window.addEventListener("resize", resizeThrottler, false); var resizeTimeout; function resizeThrottler() { if (!resizeTimeout) { resizeTimeout = setTimeout(function() { resizeTimeout = null; actualResizeHandler(); }, 66); } } function actualResizeHandler() { document.querySelector('#facebookiframe').removeAttribute('src'); setupFBframe(facebookIframe); } })(); /* end Window Resize ############################################ */ }); /* end Document Ready ############################################ */ import url(' body { font-family: 'Indie Flower', cursive; } .container { max-width: 1170px; width: 100%; margin-left: auto; margin-right: auto; } .content { overflow: hidden; } .leftsidebar { position: relative; float: left; width: 30%; max-width: 300px; } .maincontent { position: relative; float: left; width: 70%; background-color: #DDEFF7; } /* ------- begin Widget Facebook -------------- */ .widget--facebook--container { padding: 10px; border: 1px solid #000; } .widget-facebook { height: 500px; } .widget-facebook .facebookiframe { border: none; } /* ---------- end Widget Facebook---------------- */ /* ----------------- no need -------------------- */ .block { color: #fff; height: 300px; background-color: #00A7F7; border: 1px solid #005dff; } .block h3 { line-height: 300px; text-align: center; } Content Content Responsive width Facebook Page Plugin Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab. I'm searching for the most posible simple way to do PLUGIN SIZE 100% WIDTH, and it seems it is not posible. How designers solve this problem? I found the best decision for this time 2017 Oct: .fb-page, .fb-page iframe[style], .fb-page span { width: 100% !important; } .fb-comments, .fb-comments iframe[style], .fb-comments span { width: 100% !important; } This lets do not broke screen size width for responsive screens, but still looks ugly, because cuted in some time and doesn't stretch. Funktioniert das auch mit Wordpress?. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Kopiere den Code in deine Webseite Fehler Bitte Domain angeben! . Lorem ipsum dolor sit amet, consectetur adipisicing elit. thanks! –ace Jan 13 '17 at 23:28 add a comment up vote 2 down vote We have overcome some limitations of the responsiveness of the Facebook plugin by using it as an IFRAME, but bootstrapping at render time with some JavaScript that dynamically sizes the frame (and width/height parameters in the SRC URL) to fill the container element. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab. html facebook facebook-like shareimprove this question asked Feb 24 '14 at 17:07 Tamara 1,40042651 add a comment 2 Answers 2 active oldest votes up vote 1 down vote There is how I solved this problem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Learn more, including about available controls: Cookies Policy.FacebookJoin or Log Into Facebook Email or PhonePasswordForgot account?Log InDo you want to join Facebook?Sign UpSign UpThis page isn't availableThe link you followed may be broken, or the page may have been removed.Go back to the previous page Go to News Feed Visit our Help CenterEnglish (US)NederlandsFryskPolskiTrkeDeutschFranais (France)EspaolPortugus (Brasil)ItalianoSign UpLog InMessengerFacebook LiteMobileFind FriendsPeoplePagesPlacesGamesLocationsCelebritiesMarketplaceGroupsRecipesSportsLookMomentsInstagramLocalAboutCreate AdCreate PageDevelopersCareersPrivacyCookiesAd ChoicesTermsHelpSettingsActivity Log Facebook 2018. So einfach kann das Daumen integrieren sein! . Lorem ipsum dolor sit amet, consectetur adipisicing elit. But I found out that on mobile devices data-width attribute is ignored and this is how the div with class fb-like looks after page is loaded: You can see that style attribute with "Width:100%" is added to the div. –Anders Lindn Sep 11 '15 at 8:30 add a comment up vote 3 down vote for those of you looking for a JS solution to sizes smaller than 280 here is my code snippit: facebookScale = function () { var adjustWidth; adjustWidth = $('.facebook-likebox').width() / 280; return $('.fb-page').css({ '-webkit-transform': 'scale(' + adjustWidth + ')', '-moz-transform': 'scale(' + adjustWidth + ')', 'transform': 'scale(' + adjustWidth + ')' }); } $(function(){ $('.fb-page').on('resize DOMSubtreeModified', facebookScale); $(window).on('resize', facebookScale); }) edit. While it should have a minimum of 180px and a maximum of 500px. Join Stack Overflow to learn, share knowledge, and build your career 5a02188284
alternative f r facebook app androidchat de facebook letrasfree facebook for etisalatfacebook like fakeskeygen for facebook hacking softwarehow to get my facebook api idsamsung galaxy how to get facebook appupload rabbit for facebook 2.1.9.8how can i earn more facebook creditsfacebook com app center


Revenir en haut
Publicité






MessagePosté le: Mer 10 Jan - 19:12 (2018)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    League of Craft: Community Index du Forum -> Autres -> Propositions Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  

Portail | Index | Panneau d’administration | creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Théme League Of Craft © Nessli Prod
Créer par phpBB © 2011, 2012 phpBB Group
Traduction par : phpBB-fr.com