Facebook 좋아요 버튼-댓글 팝업을 비활성화하는 방법?

107

사용자가 내 사이트에 배치 한 Facebook (fbml) 좋아요 버튼을 클릭 할 때 나타나는 댓글 상자를 비활성화하고 싶습니다. 이것이 가능합니까? 문서에서 세부 사항을 찾을 수 없습니다.

facebook  facebook-like  fbml 
— BrynJ
소스
2
답을 찾을 수 없습니다. "좋아요 상자"를 해결 방법으로 고려 했습니까? developers.facebook.com/docs/reference/plugins/like-box . "Show Stream"및 "Show Header"를 끄고 "Connections"를 0으로 설정하면 결과 마크 업의 크기가 적절하게 조정됩니다.
— zombat
해결 방법으로 찾은 답변을 추가했습니다.
— BrynJ

답변:

125

Facebook 좋아요 (iframe이 아닌 XFBML 버전) 후 댓글 상자를 숨기는 가장 간단한 수정 사항은 다음과 같습니다.

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

CSS 스타일을 CSS 파일에 넣고 마법을 확인하십시오.

— 모하마드 아리프
소스
내가 최고는 아니지만 감사합니다 Jonathan :) 나는 똑같이 고생했고 CSS를 사용하여 멋진 솔루션을 찾기보다는 '매력처럼'작동했습니다. :)
— Mohammad Arif
8
누구도 BrynJ 답변이 최고라고 생각하지 않습니까? Facebook이 마크 업에서 클래스를 변경하면이 메서드가 중단됩니다.
— tybro0103
댓글 팝업을 실제로 비활성화 할 수있는 옵션이 아직 없습니다. 잘 작동합니다.
— Messing
@tybro, 만약 클래스 이름이 Facebook 끝에서 변경되면 물론 CSS에서도 규칙을 쉽게 변경할 수 있으며, 어떤 종류의 기능적 변경도 필요하지 않습니다. 이것은 댓글 팝업을 숨길 때까지 가장 쉬운 수정입니다. 시간 FB는 구성 할 수 없습니다.
— Mohammad Arif
14
이것은 2013 년 2 월 12 일 현재 저에게 효과가 없었습니다. Kotzilla의 솔루션을 사용해야했습니다
— Bashevis
81

오버플로가 숨김으로 설정된 적절한 크기의 div에 iframe을 배치하면이 문제가 해결되었지만 실제로는 문제를 숨길뿐입니다.

— BrynJ
소스
5
다른 사람이 모든 표를 얻은 것이 재미 있네요. 아마도 그의 방법은 3 분을 절약 할 수 있지만 페이스 북이 수업을 변경하면 중단 될 것입니다.
— tybro0103
@tybro fb 태그에 클래스를 추가하고 스타일을 지정할 수 있으므로 클래스를 변경해도 코드에 영향을주지 않습니다.
— Gangesh
1
@Gangesh 음 아니, 당신은 할 수 없습니다. 마크 업은 사용자가 제어 할 수없는 Facebook에서 직접 가져옵니다.
— tybro0103
@ tybro0103, FB가 클래스를 변경해도 깨지지 않는 메서드를 추가했습니다
— Zorox
@BrynJ 감사합니다
— Abhishek
69

내 CSS에서 이것을 사용합니다.

.fb-like{
    height: 20px;
    overflow: hidden;
}

다음과 같은 일반 HTML5 코드로 Facebook 버튼을 렌더링합니다.

<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>

gr-

— Elmer
소스
4
다른 솔루션을 시도한 후이 솔루션이 가장 잘 작동했습니다. edge.create 이벤트를 구독해야하므로 Iframe이 적합하지 않습니다. edge.create 이벤트 핸들러에서 div 태그를 다시 렌더링하는 데 약간의 지연이있었습니다. ".fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr"을 사용하는 다른 CSS 솔루션도 저에게 적합하지 않았습니다.
— CodeWarrior
이것은 나에게도 일한 유일한 것입니다. 삽입 방법과 같은 비 iframe을 사용하고 있습니다.
— TK123
4
실제로 작동하지 않습니다 (2014 년 1 월). 주석 상자를 비활성화하지 않고 숨길뿐입니다. 좋아요 버튼 을 누른 다음 (테스트중인 링크의 좋아요를 해제 한 후 페이지를 새로 고침해야합니다.) 입력을 시작 <div>하면 크기가 그대로 유지되지만 텍스트 입력 상자 가 표시되고 탭을 누르면 닫기 및 게시 버튼이 표시됩니다. . 안좋다. Firefox로 테스트하고있었습니다.
— Annabel
yeeeaaahh, 정말 효과가있는이 솔루션, 감사합니다 !!
— Michael
14

내가 한 일은 다음과 같은 "좋아요"버튼을위한 div를 만드는 것입니다.

<div class="fb_like">
  <fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>

그리고 이것은 CSS입니다.

.fb_like {  
  overflow: hidden;
  width: 90px;
}
— Kotzilla
소스
4
이것은 실제로 내가 찾은 최고의 해결 방법입니다. 상자 수 레이아웃을 사용하는 경우 다음 CSS를 사용하십시오. .fb-like {overflow : hidden; 높이 : 61px; } 좋아요 버튼 위에 작은 노치가 표시되지만이 멍청한 팝업에 더 이상 짜증나 지 않을 것입니다.
— NicolasBernier 2014-06-25
shopify 최소 테마의 경우, 랩핑 div의 사용은 웹과 모바일 모두에서 작동하는 반면, fb-like 클래스는 웹에서 직접 작동했지만 모바일에서는 작동하지 않았습니다 (추가 미디어 특정 클래스가 포함되어 있기 때문에)
— gamozzii
9

나는 Mohammed Arif의 솔루션을 좋아하고 그것을 최선의 답변으로 선택합니다. 하지만 FB가 클래스를 변경 한 경우에는 항상 다음과 같이 작동합니다 ..

FB.Event.subscribe('edge.create', function(response) {
   $('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
   FB.XFBML.parse();
});

여기서 "like_button_holder"는 "YOUR"div id로 facebook like button 코드를 보유합니다.

— Zorox
소스
4
CSS 스타일을 사용하면 iframe 내부에서 div를 숨길 수 없기 때문에이 솔루션을 사용했습니다.
— Pons
이것은, 그러나, 주석 상자는 매우 짧은 시간 동안 정말 스마트 볼 수있다
— pinkdawn
1
나는 이것을 "정말 똑똑한"좋은 해결책이라고 부르지 않을 것입니다. 이것은 Like 버튼 마크 업을 제거하고 (그러나 일부 이벤트 처리 코드를 고아 화하고), DOM에 새로 추가하고, XFBML에 대한 전체 페이지의 DOM을 다시 파싱하고, 더 많은 이벤트 핸들러, 리 페인트 및 리플 로우, 몇 가지 새로운 요청 등을 의미하는 새로운 좋아요 버튼입니다. 실제로는 이것을 나쁜 솔루션이라고 부르거나 전혀 해결책이 아닐 것입니다. 새 컴퓨터를 구입합니다.
— AndrewF
1
더 좋은 아이디어가 있습니까? 그 빌어 먹을 주석 상자는 그렇지 않으면 사라지지 않을 것입니다.
— Amalgovinus
@AndrewF-그럼 더 나은 아이디어?
— Jeremy Haile
5

작동 하는 클리너 솔루션 ( 2014 년 5 월 기준 )

  1. 모든 메이크업의 첫번째 확인하여 <div class="fb-like" 이 데이터 레이아웃 으로 속성을 버튼 -

    <div class="fb-like" data-layout="button"........></div>

  2. 이 CSS를 추가하세요.

    .fb-like{
   overflow: hidden !important;
}

그게 다야!

데모

— 사힐 미탈
소스
4

여기서 Debby Downer가되지는 않지만 댓글 상자를 숨기는 것이 Facebook 정책을 위반하지 않습니까?

IV. 응용 프로그램 통합 지점 d. 좋아요 버튼 또는 좋아요 상자 플러그인과 같은 소셜 플러그인의 요소를 가리거나 가리면 안됩니다.

https://developers.facebook.com/policy/

— 다니엘 크루거
소스
1
그것은 질문에 대한 답을 제공하지 않습니다. 코멘트로 추가 비고를 부탁드립니다.
— Trinimon 2013 년
2
아이러니하네요. 좋아요 버튼을 숨기고있는 댓글 상자입니다 !!
— Amalgovinus 2013 년
3

display: noneHTML 5 버전의 버튼으로 작업 할 수있는 옵션을 얻지 못했습니다 . 대신 좋아요 버튼 버튼이 생성 된 div를 타겟팅하고 오버플로를 숨김으로 설정했습니다.

내 기본 CSS 파일에 다음을 삭제하면 트릭이 발생했습니다.

#fb_button{
    overflow:hidden;
}
— 시뮬레이션
소스
3

BrynJ에 동의하면 현재 가장 좋은 해결책은 좋아요 버튼을 20px 높이의 div 컨테이너에 넣고 오버플로를 숨김으로 설정하는 것입니다 (FB가 최근에 주석 플라이 아웃을 iFrame으로 옮긴 곳을 읽었으므로 . fb_edge_widget_with_comment 는 iFrame 사용자에게 더 이상 유용하지 않습니다.

AddThis를 사용하십니까? 이 작업을 수행:

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>
— 거 버스
소스
20px div 컨테이너 솔루션이 유일하게 작동하는지 확인할 수 있습니다.
— Bashevis 2013
2

"좋아요"를 클릭 할 때 좋아요 버튼이 사라지고 주석 팝업을 숨기는 컨테이너 div가있는 경우 다음 해결 방법을 사용하십시오.

fb와 같은 버튼을 배치 할 컨테이너 div를 만들고 다음 CSS를 제공합니다.

.fb_like {
  overflow: hidden;
  width: 90px;
}

.fb_like iframe {
  left: 0 !important;
}
— MaxK
소스
2

대신 IFRAME 버전을 구현하여 Facebook 좋아요 버튼 댓글 팝업 문제를 피할 수있었습니다. 이를 위해 다음 단계를 수행했습니다.

  1. https://developers.facebook.com/docs/plugins/like-button/ 방문
  2. '좋아할 URL'을 Facebook 페이지 URL로 변경하십시오.
  3. 원하는대로 다른 옵션 (레이아웃, 작업 유형 등)을 선택합니다.
  4. '코드 받기'버튼을 누르세요
  5. IFRAME 버전 선택
  6. '이 스크립트는 앱의 앱 ID를 사용합니다'라고 표시된 Facebook 애플리케이션을 선택했는지 확인합니다.
  7. 애플리케이션에 제공된 코드 구현

내가 볼 수 있듯이 IFRAME 구현이있는 좋아요 버튼은 팝업을 트리거하지 않습니다. 단순히 좋아요 버튼으로 작동합니다. 이것이 제가 원하는 결과였습니다.

행운을 빕니다.

— 셰이 나랑
소스
이벤트 리스너가 필요하지 않은 경우 이것이 가장 공식적인 답변입니다. 감사합니다!
— Yahel 2014 년
1

다음은 좋아요 버튼이 Twitter 및 Linkedin과 함께 표준 버튼으로 작동하도록하는 코드입니다. 도움이되기를 바랍니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FB</title>


<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; } 
.social ul li { float: left; margin-right: 10px; }
</style>

</head>

<body>
<div id="fb-root"></div>

<div class="social">

    <ul>
        <li class="facebook">   
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&amp;send=false&amp;layout=button_count&amp;width=45&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe> 
        </li>
        <li class="twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.smh.com.au" data-count="none">Tweet</a>
        </li>
        <li class="linkedin">
            <script type="IN/Share" data-url="http://www.smh.com.au/"></script>
        </li>
    </ul>
</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&appId=333450970117655";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>

<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

</body>
</html>
— 라파엘
소스
좋아, 이것은 내가 페이지에서 시도한 최고의 솔루션이었습니다. 다시 @Rafael 감사합니다.
— Stuart
1

이것을 시도해 보겠습니다.

FB.Event.subscribe('edge.create', function(response) {
    var $parent =  $('[href="'+response+'"]').parent();
    $parent.empty();
    $parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
    FB.XFBML.parse();
 });
— 아미르 아프 리디
소스
1

내가 확인 했으므로 다음과 같은 경우 댓글 팝업이 비활성화됩니다.

  1. 얼굴 표시 :-> 선택 취소
  2. 코드 받기 :-> IFRAME 옵션 선택
— Trực Phạm
소스
1

최신 HTML5 버튼을 사용하고 Facebook에서 제안하고 포워드 호환 가능해야한다면 다른 사람들이 말한 것에서 벗어나는 것이 쉽습니다.

.fb-like, .addthis_button_facebook_like
  height: 25px
  overflow: hidden

두 번째 클래스는 AddThis 플러그인을 사용하는 사람들에게 보너스입니다.

— 빌 페어 락타 리 디스
소스
0

위에 언급 된 오버플로 높이 옵션은 show-faces=true. 그렇지 않으면 얼굴이 숨겨집니다.

— tleo
소스
0

제 경우에는 (XFBML 버전 사용) 태그에 다음을 추가했습니다.

width="90" height="20" style="overflow: hidden;"

따라서 최종 결과는 다음과 같습니다.

<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>

댓글 팝업이 올바르게 숨겨져 있습니다.

— 유쾌한
소스
0

주석 상자를 숨기면 작동하지만 주석 플라이 아웃 상자 뒤에 클릭 가능한 요소가있는 경우 문제가 발생할 수 있습니다.

당신은 그것을 숨기고 DOM 게시물에서 제거해야합니다.

주석 상자를 숨기는 CSS는 다음과 같습니다.

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

다음은 DOM 요소를 제거하는 JQuery 방법입니다.

 FB.Event.subscribe('edge.create', function (href, widget) {        
    $('.fb_edge_comment_widget.fb_iframe_widget').remove()       
});

콜백에서 제공된 위젯을 사용하는 순수한 자바 스크립트 방식은 다음과 같습니다.

FB.Event.subscribe('edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});
— 스테판 브릴란 트
소스
다른 도메인의 iframed 콘텐츠에 대한 CSS 규칙을 어떻게 생성해야합니까? 다음 달에 이름이 다른 CSS 클래스는 물론이고?
— Amalgovinus 2013 년
0

좋아요 버튼 만 표시하려면 다음과 같이 시도해보세요.

HTML :

<div class="fb_like">
    <div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
    <div class="like_counter_hider"></div>
</div>

CSS :

.fb_like {
    overflow: hidden;
    width: 80px;
    height: 20px;
}
.like_counter_hider {
    position: absolute;
    top: 0;
    left: 45px;
    width: 35px;
    height: 20px;
    background-color: #f3f3f3; /*you'll have to match background color*/
    z-index: 200;
}
— user0000001
소스
0

오버플로를 숨김으로 설정하면 도움이 될 수 있습니다. 기본 CSS 파일에서이 작업을 수행합니다 ..

#fb_button{
overflow:hidden;
}
— Akshat
소스
0

좋아요 버튼이 포함 된 iframe을 버튼과 같은 크기로 만드는 것은 어떨까요?

.fb_iframe_widget_lift
{
    width: 49px !important;
    height: 20px !important;
}

그게 다야.

— 그레이엄 맥 렐란
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.