Facebook 좋아요 상자를 반응 형으로 만드는 방법은 무엇입니까?

Facebook 좋아요 상자를 반응 형으로 만드는 방법은 무엇입니까?

---

Facebook 코드를 텍스트 위젯에 붙여 넣어 내 사이드 바에 Facebook like box 코드를 사용하고 있습니다. 내 테마가 반응 형이며 좋아요 상자의 크기를 올바르게 조정하고 싶습니다. 이 튜토리얼을 찾았 지만 그가하는 방식이 "완전히 반응"하지 않는다고해서 더 좋은 방법이 있는지 몰랐습니다.

---

참고 :이 답변은 더 이상 사용되지 않습니다. 최신 솔루션은 아래 커뮤니티 위키 답변을 참조하십시오 .

---

오늘이 요점을 찾았고 완벽하게 작동합니다 : https://gist.github.com/2571173

( 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;
}

---

나를위한 Colin의 예가 좋아요 버튼과 충돌했습니다. 그래서 좋아요 상자 만 겨냥하도록 수정했습니다.

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

대부분의 최신 브라우저에서 테스트되었습니다.

---

참고 : Colin의 솔루션은 저에게 효과적이지 않았습니다. Facebook이 마크 업을 변경했을 수 있습니다. 사용 *은 미래에 대비해야합니다.

Like 상자를 div로 래핑합니다.

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

다음을 css 파일에 추가하십시오.

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

---

2015 년 8 월 4 일부터 기본 facebook like box에는 Facebook 개발자 페이지에서 사용할 수있는 반응 형 코드 스 니펫이 있습니다.

여기에서 반응 형 Facebook likebox를 생성 할 수 있습니다.

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

이것은 CSS를 해킹하는 것보다 최고의 솔루션입니다.

---

2013 년 6 월 현재 찾고있는 답변은 여기에서 찾을 수 있습니다.

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

jQuery를 사용하여 facebook 위젯을 보유하는 상위 컨테이너의 내부 HTML을 다시 작성합니다.

도움이 되었기를 바랍니다!

---

어떤 CSS 트릭도 저에게 효과가 없었습니다 (제 경우에는 fb와 같은 상자가 "float : right"로 오른쪽으로 당겨졌습니다). 그러나 추가 트릭없이 작동 한 것은 버튼 코드의 IFRAME 버전입니다. 즉 :

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

(스타일에 사용자 정의 너비를 기록하고 추가 자바 스크립트를 포함 할 필요가 없습니다.)

---

"fb_likebox"모듈 ( https://drupal.org/project/fb_likebox )을 사용하여 Drupal 7에서이 작업을 수행하려고했습니다 . 반응하도록하기 위해서. 내 자신의 Contrib 모듈 Variation을 작성하고 너비 설정 옵션을 스트라이프해야했습니다. (기본 높이 옵션은 나에게 중요하지 않았습니다). 너비를 제거한 <div id="likebox-wrapper">후 fb_likebox.tpl.php에 추가했습니다 .

스타일을 지정할 CSS는 다음과 같습니다.

 `#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;}`

참고 URL : https://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive