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. Просто выберите макет "Кнопка".

https://developers.facebook.com/docs/plugins/like-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 Docs

Документы 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&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>

И сделайте так, чтобы он всегда был английским, добавив "&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&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;
}

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

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!*/
}

-- Обновить

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

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

Это то, что я пробовал, и он отлично работает в 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 местах). Кажется, до сих пор отлично работает для меня.

Другие вопросы по тегам