Facebook Like-Button - скрыть счетчик?
В диалоговом окне настройки кнопки "Мне нравится" есть только два варианта макета:
Мертвая ссылка - Альтернатива 1 Мертвая ссылка - Альтернатива 2
К сожалению, цифры для веб-сайта моего работодателя не приближаются к 22'000, так что полномочия решили, что мы не должны показывать количество "лайков", пока указанное число не станет немного в нашу пользу. Насколько я знаю, у меня нет доступа к макету кнопки через Javascript или CSS (это в фрейме, обслуживаемом Facebook). Есть ли другие способы скрыть счет?
15 ответов
Кнопка "Мне нравится", код которой показывает "Рекомендовать", имеет ширину 84 пикселя, а кнопка "Мне нравится" - 44 пикселя. Это сэкономит вам время для таких парней, как я, которым нужно скрывать, насколько непопулярна моя страница в настоящее время! Я поместил этот код в верхней части своей домашней страницы, поэтому изначально я не хочу, чтобы он рекламировал, сколько у меня лайков.
Если вы делаете 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;
}
Принятый ответ хорош, но будьте осторожны с многоязычными страницами. Текст отличается по длине:
Английский: лайк
Голландский: Винд ик лейк
Немецкий: Gefällt мир
Просто один на один.
Просто включите iframe в div, установите ширину на ширину кнопки, установите overflow на скрытый, т.е.
<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. Просто выберите макет "Кнопка".
Большинство предложений сейчас уже не действуют.
На сегодняшний день правильным решением является использование макета "кнопка".
например. <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.
Это означает, что теперь вы можете использовать менее хакерское решение!
Если вы используете кнопку "Мне нравится" в Facebook (чтобы вы могли фиксировать подобные события), вот что мы должны были сделать:
В связи с тем, что Facebook недавно изменил способ отображения диалогов комментариев, нам пришлось изменить способ его скрытия. То, как они отображали диалог комментариев, "перемещало" содержимое внутри элемента my overflow: hidden, чтобы кнопка выглядела странно для пользователя после того, как он нажал кнопку "Мне нравится".
В дополнение к добавлению оберточного элемента в стиле "переполнение: нет" вам необходимо скрыть элемент комментария, который 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. Я не проверял это с новой разметкой на основе div, которую Facebook теперь предоставляет на своем сайте.
Я знаю, что многие решения уже были опубликованы, но мое все еще несколько иное. Он работает для 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 Like Button:
<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 недавно изменил какой-то код - всякий раз, когда я нажимал "Нравится", содержимое переходило влево, что портило пользовательский интерфейс. Никаких трюков CSS / JS не получилось. Я пошел с более простым решением, используя iframe.
УВЕДОМЛЕНИЕ. Хотя некоторые устройства уже поддерживают iFrames, не все мобильные устройства поддерживают. iFrames на самом деле старые и вообще не рекомендуются, но для меня это помогло.
Давайте возьмем из Facebook сценарий генерации лайков по умолчанию и сгенерируем рамку лайка в iFrame;
Нажмите здесь, чтобы создать кнопку как
Перейти к стилю "Box_Count" со счетчиком на вершине.
Когда вы нажимаете "Получить код", переходите к коду 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>
И сделайте так, чтобы он всегда был английским, добавив "&locale=en_US" к URL. Это сделано для предотвращения странных раскладок в других странах - на голландском это будет "Vind ik leuk", а на английском "Like". Я думаю, что все на каждом языке знают "Мне нравится", поэтому давайте придерживаться этого.
Теперь мы добавим еще немного CSS для like_box;
.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;
}
И теперь у меня есть приличная, маленькая, как коробка, которая отлично работает и не прыгает. Дайте мне знать, как это работает для вас, и если есть какие-то проблемы, с которыми вы сталкиваетесь.
Facebook теперь поддерживает скрытие счета, используйте это в разметке:
data-layout="button"
Мое решение немного капот, но это работает. Что я делаю, так это просто определяю, где будет находиться номер, и использую css
надеть крышку коробки. Я думаю, вы также можете обмануть систему и добавить больше хитов, если хотите. Вот мой код, используя jquery
но это будет отличаться от других в зависимости от того, где вы разместите кнопку "Мне нравится" на вашей странице.
Не самый гламурный, но эй, безопасность заключается в том, чтобы жестко манипулировать контентом по бокам кадра.
<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>
Это сработало для меня:
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
height: 26px;
overflow: hidden;
width: 138px;
}
Добавление следующего к вашему CSS должно скрыть текстовый элемент для пользователей и держать FB Happy
.connect_widget_not_connected_text
{
display:none !important; /*in your stylesheets to hide the counter!*/
}
-- Обновить
Попробуйте использовать другой подход.
Это то, что я пробовал, и он отлично работает в ff, chrome и 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;
}
Все, что вам нужно сделать, это отредактировать код iframe, который вам дает Facebook, и изменить ширину на 47 (вам нужно изменить ее в 2 местах). Кажется, до сих пор отлично работает для меня.