Facebook like box 위젯이 데이터 폭 속성을 인식하지 못합니다.

Facebook like box 위젯이 데이터 폭 속성을 인식하지 못합니다.

Facebook Like Box 위젯의 데이터 폭 속성이 작동하지 않는 것 같습니다.기본 너비로 되돌리는 것 같습니다.제가 말하는 것의 예는 http://blog.christopherjonesart.com에서 볼 수 있습니다.

사용하고 있는 코드는 다음과 같습니다(매우 표준적입니다).

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart"    data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>

여러 웹사이트에서 이 문제가 발생하고 있습니다.그것은 크롬, 파이어폭스, 사파리, 인터넷 익스플로러에서 그것을 하고 있다.최근 워드프레스를 업데이트하거나 css를 변경하지 않았습니다.

도움말? 이렇게 구겨진 것 같아. :- (

user2477225의 답변을 확대하면 사용자가 설정한 커스텀 포지셔닝에 문제가 있을 수 있습니다(페이지상의 상대적인 위치 또는 절대적인 위치).그래서 저는 다음과 같이 했습니다.

.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

아직까지는 효과가 있는 것 같아.

편집: IE 8(및 그 이하)의 경우는, 이것을 사용해 주세요.

.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

셀렉터에서는 가능한 한 구체적으로 기술하고 싶은데, 이 문제를 좀 더 확인해 보니,>셀렉터를 클릭합니다.

우리는 fb에게 그들의 멍청한 스크립트를 수정하라고 말해야 한다고 생각합니다. 이제 fb like box의 너비는 최소 292px가 되어야 합니다.

https://developers.facebook.com/docs/reference/plugins/like-box/에 명확하게 기재되어 있습니다.

지원되는 최소 플러그인 폭은 292픽셀입니다.

가로폭을 조금 줄여서CSS해킹은 일시적일 뿐입니다.제 해킹은 이렇습니다.

.fb-like-box iframe {
     width: your_width_in_px !important;
}

내 사이트에서 iframe 설정을 사용하여 iframe 설정을 236px 폭의 like box를 사용하여 292px 폭보다 우선합니다.FB에 대해 아무 생각 없이, 모든 사이트에 292px 폭의 사이드바가 필요합니다--아, 네!

간단한 사용iFrame대신fbml필요한 만큼 폭을 변경합니다.

예: (너비: 아래 138px)

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&amp;width=194px&amp;height=290px&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe> 

감사합니다!

당신에게도 같은 문제가 있습니다.제 해결책은 jquery 스크립트를 사용하여 like box 준비 시간에 like box의 너비를 변경하는 것입니다.

머리 부분에

<script type="text/javascript">
function JS_wait(){
            // wait until like box script load
    if($("iframe[title='fb:like_box Facebook Social Plugin']").length == 0 && $("div[class='fb-like-box fb_iframe_widget'] span").length == 0){

        window.setTimeout(JS_wait, 100); 
    }else{
                    // wait 5 seconds to like box rendered.
        window.setTimeout(JS_ready, 5000); 
    }
}

function JS_ready() {

    // resize facebook like box to 200 px
    //alert("JS_ready");
    $("iframe[title='fb:like_box Facebook Social Plugin']").css('width','200px');
    $("iframe[title='fb:like_box Facebook Social Plugin']").attr('width','200');
    $("div[class='fb-like-box fb_iframe_widget'] span").css('width','200px');
};
</script>

및 문서 준비 완료 추가

<script type="text/javascript">
$(document).ready(function() {
      JS_wait();
    });
</script>

도움이 되겠군요

fb:like-box 추가 후 이 스크립트를 244px 너비로 변경합니다.

FB.Event.subscribe('xfbml.render', function(response) {

 var el = document.querySelector(".fb_iframe_widget span");
 el.style.width='244px';
 el = document.querySelector(".fb_iframe_widget iframe");
 el.style.width='244px';
});

페이스북 공식 like box 페이지에 따르면 최소 너비는 292px입니다.

그래도 github에는 facebook like box를 반응시켜 당신의 웹사이트 레이아웃에 적응시키기 위한 작은 프로젝트가 있습니다.

이것을 컨테이너의 너비를 원하는 너비로 설정하는 것과 함께 적용하면, Facebook Like 박스가 그 컨테이너를 채우고, 그 이상도 이하도 아닌, 그 너비에 적응하도록 강제됩니다.

/* 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;
}

여기 제가 수정한 내용이 있습니다.얼굴을 표시하지 않기 때문에 똑같지는 않지만 코드에 맞게 수정해 주세요.중요한 부분은 추가한 div #fb-like-container입니다.css selector를 사용하여 필요한 코드를 변경할 수 있습니다.

CSS:

<script>
#fb-like-container div.fb-like-box>span, 
#fb-like-container div.fb-like-box>span>iframe{
    width: 173px!important; 
}
</script>

HTML(데이터 폭은 고려되지 않음):

<div id="fb-like-container">
    <div class="fb-like-box" 
    data-href="http://www.facebook.com/christopherjonescomicart" 
    data-width="273" 
    data-height="71" 
    data-show-faces="false" 
    data-stream="true" 
    data-header="false">
     </div>
</div>

언급URL : https://stackoverflow.com/questions/17056656/facebook-like-box-widget-not-recognizing-data-width-attribute