Facebook Like-Button - скрыть счет?

Ответ 1

Кнопка Like, закодированная для отображения "Рекомендация", имеет ширину 84 пикселя, а кнопка "Как" - 44 пикселя, сэкономит некоторое время для ваших парней, таких как я, которым нужно скрывать, насколько непопулярна моя страница в настоящее время! Я помещаю этот код поверх своей домашней страницы, поэтому изначально я не хочу, чтобы он рекламировал, как мало мне нравится.

Ответ 2

Если вы выполняете 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;
}

Ответ 3

Принятый ответ хорош, но будьте осторожны с многоязычными страницами. Текст отличается длиной:

Русский: нравится

Голландский: Vind ik leuk

Немецкий: Gefällt mir

Просто голова.

Ответ 4

Просто включите 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>

Ответ 5

Теперь он официально поддерживается Facebook. Просто выберите макет 'Button'.

https://developers.facebook.com/docs/plugins/like-button/

Ответ 6

Если вы используете кнопку 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 предоставляет на своем сайте сейчас.

Ответ 7

Я знаю, что многие решения уже опубликованы, но мой все еще несколько отличается. Он работает для версии 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>

Ответ 8

Кажется, что 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&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;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&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;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;
}

И теперь у меня есть приличная маленькая коробка, которая отлично работает и не прыгает. Дайте мне знать, как это работает для вас, и если есть какие-то проблемы, с которыми вы сталкиваетесь.

Ответ 9

В настоящее время большинство предложений больше недействительны.

Правильное исправление на сегодняшний день заключается в использовании макета '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.

Это означает, что теперь вы можете использовать менее хакерское решение!

Ответ 10

Мое решение - небольшой капюшон, но он работает. То, что я делаю, просто в основном определяет, где будет номер, и используйте 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>

Ответ 11

это сработало для меня:

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
    height: 26px;
    overflow: hidden;
    width: 138px;
}

Ответ 12

Добавление следующего в ваш css должно скрыть текстовый элемент для пользователей и сохранить FB Happy

.connect_widget_not_connected_text
{
    display:none !important; /*in your stylesheets to hide the counter!*/
}

- Обновить

Попробуйте использовать другой подход.

http://www.facebook.com/share/

Ответ 13

Facebook теперь поддерживает скрытие счета, используйте это в разметке:

data-layout="button"

Ответ 14

Это то, что я пробовал, и он отлично работает в 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;
}

Ответ 15

Все, что вам нужно сделать, это отредактировать код iframe, который дает вам facebook, и изменить ширину на 47 (вам нужно изменить его на 2 места). Кажется, для меня все отлично работает.