Facebook 좋아요 버튼-댓글 팝업을 비활성화하는 방법?
사용자가 내 사이트에 배치 한 Facebook (fbml) 좋아요 버튼을 클릭 할 때 표시되는 댓글 상자를 비활성화하고 싶습니다. 이것이 가능합니까? 설명서에서 자세한 내용을 찾을 수 없습니다.
Facebook Like (iframe 버전이 아닌 XFBML 버전) 이후에 주석 상자를 숨기는 가장 간단한 수정 방법은 다음과 같습니다.
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
CSS 파일을 CSS 파일에 넣고 마술을 보아라. :)
오버플로가 숨김으로 설정된 적절한 크기의 div에 iframe을 넣으면이 문제가 해결되었지만 실제로는 실제로 문제가 숨겨져 있습니다.
나는 이것을 CSS에서 사용한다 :
.fb-like{
height: 20px;
overflow: hidden;
}
다음과 같이 일반적인 HTML5 코드로 Facebook 버튼을 렌더링하십시오.
<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>
gr-
내가 한 것은 "like"버튼에 대한 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;
}
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입니다.
작동 하는 보다 깨끗한 솔루션 ( 2014 년 5 월 기준 )
모든 메이크업의 첫번째 확인하여
<div class="fb-like"이 데이터 레이아웃 으로 속성을 버튼 -<div class="fb-like" data-layout="button"........></div>이 CSS를 추가하십시오.
.fb-like{ overflow: hidden !important; }
그게 다야!
여기에 데비 다우 너가 아니지만 주석 상자를 숨기면 Facebook 정책을 위반하지 않습니까?
IV. 응용 프로그램 통합 지점 d. Like 버튼 또는 Like 상자 플러그인과 같은 소셜 플러그인의 요소를 가리거나 가리지 않아야합니다.
https://developers.facebook.com/policy/
I couldn't get the display: none option to work with the HTML 5 version of the button. Instead I targeted the div that the like button button is created in and set the overflow to hidden.
Dropping the following in my main css file did the trick:
#fb_button{
overflow:hidden;
}
Agree with BrynJ, best solution currently is to put the like button in a 20px high div container, and set the overflow to hidden (I read somewhere that FB recently moved the comment flyout into the iFrame, so the solution that modifies the styling of .fb_edge_widget_with_comment is probably not useful anymore for iFrame users).
Using AddThis? Do this:
<div class="container" style="height: 20px; overflow: hidden;">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like"></a>
</div>
</div>
If the like button disappears when you click "like" and you have a container div to hide the comment pop-up, then use the following solution:
create a container div to place the fb-like button in and give it the following css:
.fb_like {
overflow: hidden;
width: 90px;
}
.fb_like iframe {
left: 0 !important;
}
I managed to circumvent the Facebook like button comment pop-up issue by implementing the IFRAME version instead. I took the following steps to do so:
- Visit https://developers.facebook.com/docs/plugins/like-button/
- Change the 'URL to Like' to your Facebook page URL
- Select any other options (Layout, Action Type, etc) as desired
- Press the 'Get Code' button
- Select the IFRAME version
- Make sure you select your Facebook application where it says 'This script uses the app ID of your app'
- Implement the provided code in your application
From what I can see, the like button with IFRAME implementation does not trigger any pop-up. It simply functions as a like button. This was my desired outcome.
Good luck.
Here is the code to have the Like button working as just a standard button along with Twitter and Linkedin. Hope it helps.
<!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&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&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>
Lets try this one:
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();
});
As i have done ok, the comment popup will be disabled when:
- Show faces: -> uncheck it
- Get Code: -> choose IFRAME option
If you use the newer HTML5 button, and you should as it's forward compatible and suggested by Facebook, it's easy, going off from what others have said:
.fb-like, .addthis_button_facebook_like
height: 25px
overflow: hidden
The second class is a bonus for those using the AddThis plugin.
The overflow height options mentioned above shouldn't be used when show-faces=true. Otherwise, it will hide the faces.
In my case (with the XFBML version) I've added to the tag this:
width="90" height="20" style="overflow: hidden;"
So the end result is:
<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>
It's hiding correctly the comment popup.
Hiding the comment box work but can create problem if you have clickable element behind the comment flyout box.
You have to hide it and remove it from the DOM post like.
Here is the CSS to hide the comment box:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Here is the JQuery way of removing the DOM element:
FB.Event.subscribe('edge.create', function (href, widget) {
$('.fb_edge_comment_widget.fb_iframe_widget').remove()
});
Here is the pure javascript way using provided widget from the callback:
FB.Event.subscribe('edge.create', function (href, widget) {
widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);
});
If you want to show only the like button, you may try something like this
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;
}
Setting overflow to hidden might help. Do this in your main css file..
#fb_button{
overflow:hidden;
}
How about just make the iframe that contains the like button the same size as the button:
.fb_iframe_widget_lift
{
width: 49px !important;
height: 20px !important;
}
That's it.
참고URL : https://stackoverflow.com/questions/3247855/facebook-like-button-how-to-disable-comment-pop-up
'program story' 카테고리의 다른 글
| 폴더가 잠겨있어 잠금을 해제 할 수 없습니다. (0) | 2020.08.07 |
|---|---|
| 언어는 언제 스크립팅 언어로 간주됩니까? (0) | 2020.08.06 |
| console.log ()를 재정의하십시오. (0) | 2020.08.06 |
| UIAlertController 사용자 정의 글꼴, 크기, 색상 (0) | 2020.08.06 |
| Angular에서 객체 반복 (0) | 2020.08.06 |