В диалоговом окне для кнопки Like-Button есть только два варианта макета:
Мертвая ссылка - Альтернатива 1 Мертвая ссылка - Альтернатива 2
К сожалению, цифры для сайта моего работодателя нигде не близки к 22'000, поэтому власти, которые должны были решить, что мы не должны показывать количество "понравившихся", пока указанный номер немного больше в нашу пользу. Насколько я знаю, у меня нет доступа к макету кнопки через Javascript или CSS (это в iframe, обслуживаемом facebook). Есть ли другие способы скрыть счет?
Кнопка Like, закодированная для отображения "Рекомендация", имеет ширину 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;
}
Принятый ответ хорош, но будьте осторожны с многоязычными страницами. Текст отличается длиной:
Русский: нравится
Голландский: Vind ik leuk
Немецкий: Gefällt mir
Просто голова.
Просто включите iframe в div, установите ширину в ширину кнопки, установите переполнение в скрытое то есть.
<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. Просто выберите макет 'Button'.
Если вы используете кнопку javascript на Facebook (чтобы вы могли захватывать как события), вот что нам нужно было сделать:
Из-за изменения Facebook, недавно сделанного в том, как отображались диалоговые окна комментариев, нам пришлось изменить способ их скрытия. То, как они показывают диалог комментариев, - это "перемещение" содержимого внутри моего переполнения: скрытый элемент, чтобы кнопка выглядела действительно странно для пользователя после нажатия кнопки типа.
В дополнение к добавлению оберточного элемента с стилем "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 markup. Я не тестировал это с новой разметкой div, которую Facebook предоставляет на своем сайте сейчас.
Я знаю, что многие решения уже опубликованы, но мой все еще несколько отличается. Он работает для версии HTML5 подобной кнопки и использует только css, чтобы скрыть поле count. Не забудьте добавить 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 недавно изменил какой-то код - всякий раз, когда я нажимал "Like", содержимое прыгало влево, тем самым испортив интерфейс. Никакие трюки CSS/JS не заставили его работать. Я пошел с более простым решением, используя iframe.
УВЕДОМЛЕНИЕ. Хотя некоторые устройства уже поддерживают iFrames, не все мобильные устройства. iFrames на самом деле старые и вообще не рекомендуются, но это помогло мне.
Давайте возьмем по умолчанию script из 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>
И сделайте так, чтобы он всегда был английским, добавив к URL-адресу "& locale = en_US". Это для предотвращения странных макетов в других странах - на голландском языке это будет "Vind ik leuk" и на английском языке "Like". Я думаю, каждый, на каждом языке, знает "как", поэтому давайте придерживаться этого.
Теперь мы добавим еще CSS для as_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;
}
И теперь у меня есть приличная маленькая коробка, которая отлично работает и не прыгает. Дайте мне знать, как это работает для вас, и если есть какие-то проблемы, с которыми вы сталкиваетесь.
В настоящее время большинство предложений больше недействительны.
Правильное исправление на сегодняшний день заключается в использовании макета 'button'.
например. <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.
Это означает, что теперь вы можете использовать менее хакерское решение!
Мое решение - небольшой капюшон, но он работает. То, что я делаю, просто в основном определяет, где будет номер, и используйте 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!*/
}
- Обновить
Попробуйте использовать другой подход.
Facebook теперь поддерживает скрытие счета, используйте это в разметке:
data-layout="button"
Это то, что я пробовал, и он отлично работает в 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 места). Кажется, для меня все отлично работает.