Jak sprawić, aby Facebook Like Box reagował?

Question

Używam Facebooka, takiego jak kod skrzynki w moim side bar, wklejając kod Facebooka w widgecie tekstowym. Mój motyw jest responsywny i chciałbym, aby pole podobne było poprawnie zmieniane. Znalazłem to tutorial, ale on mówi, że sposób, w jaki to robi, nie jest "w pełni responsywny", więc nie wiedziałem, czy jest lepszy sposób na zrobienie tego.

Answer 1

UWAGA: ta odpowiedź jest nieaktualna. Zobacz the community wiki answer below, aby uzyskać aktualne rozwiązanie.

---

Znalazłem GIST dzisiaj i działa idealnie: https://gist.github.com/2571173

(wiele dzięki https://gist.github.com/smeranda)

/* 
Make the Facebook Like box responsive (fluid width) 
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/ 

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 
*/ 

#fb-root { 
    display: none; 
} 

/* To fill the container and nothing else */ 

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { 
    width: 100% !important; 
} 

Answer 2

przykład Colin mi starli się z przycisku podobnego. Więc zaadaptowałem go, by kierować tylko na Like Box.

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; } 

Testowany w większości nowoczesnych przeglądarek.

Answer 3

UWAGA: Rozwiązanie Colina nie działało dla mnie. Facebook mógł zmienić ich znaczniki. Korzystanie z * powinno być bardziej przyszłościowe.

Owiń jak pudełko z div:

<div id="likebox-wrapper"> 
    <iframe src="..."></iframe> <!-- likebox code --> 
</div> 

i dodać to do pliku CSS:

#likebox-wrapper * { 
    width: 100% !important; 
} 

Answer 4

Żadne sztuczki css pracował dla mnie (w moim przypadku fb-like pole zostało pociągnięte w prawo za pomocą "float: right"). Jednak bez żadnych dodatkowych sztuczek działała wersja kodu przycisku IFRAME. Tj:

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
     scrolling="no" frameborder="0" 
     style="border:none; overflow:hidden; width:71px; height:21px;" 
     allowTransparency="true"> 
</iframe> 

(Uwaga niestandardową szerokość w stylu, a nie konieczność uwzględnienia dodatkowych javascript.)

Answer 5

odpowiedź szukasz w czerwcu 2013 można znaleźć tutaj:

https://gist.github.com/dineshcooper/2111366

Dokonano tego za pomocą jQuery w celu przepisania wewnętrznego HTML kontenera nadrzędnego, który przechowuje widżet facebook.

Mam nadzieję, że to pomoże!

Answer 6

Próbowałem to zrobić na Drupal 7 z modułem "fb_likebox" (https://drupal.org/project/fb_likebox). Aby uzyskać responsywność. Okazuje się, że musiałem napisać własną wersję modułu Contrib i rozebrać opcję ustawienia szerokości. (domyślna opcja wysokości nie miała dla mnie znaczenia). Po usunięciu szerokości dodałem <div id="likebox-wrapper"> w pliku fb_likebox.tpl.php.

Oto mój CSS to styl:

`#likebox-wrapper * { 
    width: 100% !important; 
    background: url('../images/block.png') repeat 0 0; 
    color: #fbfbfb; 
-webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    -o-border-radius: 7px; 
    border-radius: 7px; 
    border: 1px solid #DDD;}` 

Answer 7

dniem 4 sierpnia 2015, native facebook like box posiada elastyczne fragment kodu dostępnego na stronie Facebook Developers.

Można wygenerować czułe Facebook LikeBox tutaj

https://developers.facebook.com/docs/plugins/page-plugin

Jest to najlepsze rozwiązanie kiedykolwiek zamiast hacking CSS.

Answer 8

You can see facebook way to make adaptive width

stwierdza się, że:

• Wtyczka będzie określić jego szerokość na stronie obciążenia
• To nie będzie reagował na zmiany modelu skrzynki po stronie obciążenia.

Jeśli chcesz dostosować szerokość wtyczki przy zmianie rozmiaru okna, musisz ręcznie zreplikować wtyczkę.

Tak oto rozwiązanie, które działa:

HTML

<div class="fb-page"> 
    <!-- Iframe code --> 
</div> 

JavaScript

(function($){ 
    $(window).on('resize', function() { 
     $(".fb-page").attr("data-width", $('.fb-column').width()).attr("data-height", $('.fb-column').height()); 
     if (typeof FB !== 'undefined') { 
      FB.XFBML.parse(); 
     } 
    }); 
    })(jQuery);