Facebook 좋아요 버튼-수 숨기기?
Like-Button 의 설정 대화 상자 에는 레이아웃에 대한 두 가지 옵션 만 있습니다.
불행히도, 제 고용주의 웹 사이트에 대한 숫자는 2 만 2 천에 가까워서 우리가 선호하는 숫자가 조금 더 많아 질 때까지 "좋아요"의 숫자를 표시하지 않기로 결정한 권한이 있습니다. 내가 아는 한, Javascript 또는 CSS를 통해 버튼 레이아웃에 액세스 할 수 없습니다 (페이스 북에서 제공하는 iframe에 있음). 카운트를 숨기는 다른 방법이 있습니까?
"Recommend"를 표시하도록 코딩 된 좋아요 버튼은 너비가 84px이고 "좋아요"버튼은 44px입니다. 현재 내 페이지가 얼마나 인기가 없는지 숨겨야하는 CSS 사용자를 위해 시간을 절약 할 수 있습니다. 이 코드를 홈페이지 상단에 올려 놓았 기 때문에 처음에는 내가 얼마나 적은 좋아요를 가지고 있는지 광고하는 것을 원하지 않습니다.
당신이 경우 overflow:hidden다음 사용자가 좋아하는 후도 ... XFBML 버전에서 제공되는 주석 상자를 숨길 수 있음을 유의하십시오. 이렇게하면 가장 좋습니다 ...
/* make the like button smaller */
.fb_edge_widget_with_comment iframe
{
width:47px !important;
}
/* but make the span that holds the comment box larger */
span.fb_edge_comment_widget.fb_iframe_widget iframe
{
width:401px !important;
}
허용되는 답변은 좋지만 다국어 페이지에주의하십시오. 텍스트의 길이가 다릅니다.
영어 : 좋아요
네덜란드어 : Vind ik leuk
독일어 : Gefällt mir
그냥주의하세요.
div에 iframe을 포함하여 너비를 버튼 너비로 설정하고 오버플로를 숨김으로 설정하십시오.
<div style="width:52px;overflow:hidden;">
<fb:like layout="button_count"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</div>
이제 공식적으로 Facebook에서 지원합니다. '버튼'레이아웃을 선택하기 만하면됩니다.
https://developers.facebook.com/docs/plugins/like-button/
Facebook의 javascript like 버튼을 사용하는 경우 (예 : 이벤트를 캡처 할 수 있도록) 다음을 수행해야합니다.
Facebook이 최근 댓글 대화 상자 표시 방식을 변경했기 때문에 숨기는 방식을 변경해야했습니다. 댓글 대화 상자를 표시하는 방식은 내 overflow : hidden 요소 내부의 콘텐츠를 '이동'하여 사용자가 좋아요 버튼을 클릭 한 후 버튼이 정말 이상하게 보이도록했습니다.
'overflow : none'스타일로 래핑 요소를 추가하는 것 외에도 Facebook이 페이지에 넣는 댓글 요소를 숨겨야합니다.
스타일 :
span.no_overflow {
overflow: none;
width: 50px;
}
.no_overflow span.fb_edge_comment_widget.fb_iframe_widget {
display: none;
}
마크 업 :
<span class="no_overflow">
<fb:like></fb:like>
</span>
우리는 여전히 fb : like 마크 업을 사용하고 있습니다. Facebook이 현재 사이트에서 제공하는 새로운 div 기반 마크 업으로 이것을 테스트하지 않았습니다.
이미 많은 솔루션이 게시되었음을 알고 있지만 내 솔루션은 여전히 약간 다릅니다. HTML5 버전의 좋아요 버튼에서 작동하며 CSS 만 사용하여 카운트 상자를 숨 깁니다. appId테스트 에 추가하는 것을 잊지 마십시오 .
CSS :
<style type="text/css">
.fb-like span {
display: block;
height: 22px;
overflow: hidden;
position: relative;
width: 140px /* set this to fit your needs when support international sites */;
}
.fb-like iframe {
height: 62px;
overflow: hidden;
position: absolute;
top: -41px;
width: 55px;
}
</style>
FB 좋아요 버튼 :
<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_GB/all.js#xfbml=1&appId=xxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>
FaceBook이 최근 일부 코드를 변경 한 것 같습니다. "좋아요"를 클릭 할 때마다 내용이 왼쪽으로 이동하여 UI가 엉망이됩니다. CSS / JS 트릭이 작동하지 않았습니다. iframe을 사용하여 더 간단한 솔루션을 사용했습니다 .
주의 사항 -일부 장치는 이미 iFrame을 지원하지만 모든 모바일 장치가 지원하는 것은 아닙니다. iFrame은 실제로 오래되어 전혀 권장하지 않지만 나에게 트릭을 제공했습니다.
Facebook에서 기본 유사 생성 스크립트를 가져 와서 iFrame 유사 상자를 생성 해 보겠습니다.
상단에 카운터가있는 "Box_Count"스타일로 이동합니다.
"Grab the code"를 누르면 iFrame 코드로 이동합니다. 이와 비슷한 것을 얻을 수 있습니다.
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&appId=1234567891011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45056px; height:90px;" allowTransparency="true"></iframe>
이제 거기에 div를 감 쌉니다.
<div class="like_wrap">
<iframe (...)></iframe>
</div>
다음 CSS를 제공하십시오.
.like_wrap {
width:55px;
height:25px;
overflow:hidden;
}
이제 카운터의 왼쪽 상단 모서리가 보일 것입니다. 이제 iFrame을 수정해야합니다. 수업을 줘라.
<iframe class="like_box" (...)> </iframe>
URL에 "& locale = en_US"를 추가하여 항상 영어가되도록 만듭니다. 이것은 다른 국가에서 이상한 레이아웃을 방지하기위한 것입니다. 네덜란드어에서는 "Vind ik leuk"이고 영어로는 "Like"입니다. 모든 언어의 모든 사람들이 "좋아요"를 알고 있다고 생각합니다.
이제 like_box에 CSS를 더 추가합니다.
.like_box {
margin-top:-40px;
}
따라서 전체 코드는 다음과 같습니다 (필요하지 않았으므로 app_id를 제거했습니다)
HTML :
<div class="like_wrap">
<iframe class="like_box"
src="//www.facebook.com/plugins/like.php?href=CURRENT-URL-ENCODED&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&locale=en_US"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:45056px; height:90px;"
allowTransparency="true"></iframe>
</div>
CSS :
.like_wrap {
width:55px;
height:25px;
overflow:hidden;
}
.like_box {
margin-top:-40px;
}
그리고 이제는 잘 작동하고 뛰지 않는 괜찮은 작고 작은 상자가 있습니다. 이것이 당신을 위해 어떻게 작동하는지 그리고 당신이 직면하고있는 문제가 있다면 알려주세요.
대부분의 제안은 현재 유효하지 않습니다.
오늘의 올바른 수정은 '버튼'레이아웃을 사용하는 것입니다.
예. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
FB 문서는 아직 완전히 업데이트되지 않은 것 같습니다. 아래로 스크롤하면 3 개의 레이아웃 만 사용할 수 있다고 표시되지만 드롭 다운은 4 개를 제안합니다.
즉, 이제 덜 해커가없는 솔루션을 사용할 수 있습니다!
이것은 나를 위해 일했습니다.
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
height: 26px;
overflow: hidden;
width: 138px;
}
My solution is a little hood but it works. What I do is just basically detect where the number is going to be and use css to have a box cover over it. I guess you can also cheat the system and add more hits if you want. Here is my code using jquery but it will be different than others depending on where you place the like button on your page.
Not the most glamorous but hey the security is to tight to manipulate content in side of a frame.
<script type="text/javascript">
var facebook_load = '';
$(document).ready(function() {
facebook_load = setInterval('checkIframeFacebookLoad()',100);
});
function checkIframeFacebookLoad() {
if($('iframe.fb_ltr').length) {
var parent = $('iframe.fb_ltr').parent();
var hide_counter = $('<div></div>').attr('id', 'hide_count');
parent.append(hide_counter);
clearInterval(facebook_load);
}
}
</script>
<style type="text/css">
#hide_count {
position:absolute;
top:-8px;
left:122px;
background:#becdd5;
padding:5px 10px;
}
</style>
Adding the following to your css should hide the text element for users and keep FB Happy
.connect_widget_not_connected_text
{
display:none !important; /*in your stylesheets to hide the counter!*/
}
-- Update
Try using a different approach.
http://www.facebook.com/share/
Facebook now supports hiding the count, use this in the markup:
data-layout="button"
This is what I've tried and it works fine in ff, chrome and ie8:
/* set width for the <fb:like> tag */
.fb-button {
width:51px;
}
/* set width for the iframe below, to hide the count label*/
.fb-button iframe{
width:45px!important;
}
Facebook에서 제공하는 iframe 코드를 편집하고 너비를 47로 변경하기 만하면됩니다 (2 곳에서 변경해야 함). 지금까지 완벽하게 작동하는 것 같습니다.
참고 URL : https://stackoverflow.com/questions/2950172/facebook-like-button-hide-count
'program tip' 카테고리의 다른 글
| 현대 시대의 포트란 배우기 (0) | 2020.10.26 |
|---|---|
| C ++의 클래스 이니셜 라이저에서 const 배열 초기화 (0) | 2020.10.26 |
| $ location을 사용하여 AngularJS의 새 페이지로 리디렉션 (0) | 2020.10.26 |
| .css 파일 (flask / python)을 선택하지 않는 애플리케이션 (0) | 2020.10.26 |
| "interfaceOrientation"은 iOS 8에서 더 이상 사용되지 않습니다.이 메서드를 변경하는 방법 Objective C (0) | 2020.10.26 |