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

Question

В диалоге настройки для кнопки «лайк» есть только два варианта макета:

К сожалению, цифры для веб-сайта моего работодателя не приближаются к 22'000, поэтому полномочия решили, что мы не должны показывать количество «лайков», пока указанное число не станет немного в нашу пользу. Насколько я знаю, у меня нет доступа к макету кнопки через Javascript или CSS (это в фрейме, обслуживаемом Facebook). Есть ли другие способы скрыть счет?

Answer 1

Если вы сделаете 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;
}

Answer 2

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

Английский: лайк

Голландский: Винд ик лейк

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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

<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>

Answer 7

Если вы используете кнопку «Мне нравится» в 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;
}

Markup:

<span class="no_overflow">
<fb:like></fb:like>
</span>

Мы все еще используем разметку fb: like. Я не проверял это с новой разметкой на основе div, которую Facebook теперь предоставляет на своем сайте.

Answer 8

Большинство предложений уже не действуют.

На сегодняшний день правильным решением является использование макета «кнопки».

например. <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.

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

Answer 9

Кажется, что 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;
}

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

Answer 10

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

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