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

Question

В setup dialog для Like-Button, есть только два варианта компоновки:

Dead link - Alternative 1 Dead link - Alternative 2

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

Answer 1

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

Answer 2

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

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

- Обновление

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

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

Answer 3

Просто охватывает 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> 

Answer 4

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

Answer 5

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

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

Answer 7

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

Answer 8

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

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

голландский: VIND Ik Лойке

Немецкий: gefällt Mir

Всего ХА.

Answer 9

Если вы используете JavaScript на Facebook кнопка (так что вы можете захватить как события), как, вот, что мы должны были сделать:

В связи с изменением Facebook недавно сделал в комментарии диалоги дисплее образом, мы должны были измените, как мы это скрывали. То, как они показывают диалог комментариев, было «перемещение» содержимого внутри моего переполнения: скрытый элемент, чтобы кнопка выглядела действительно странно для пользователя после нажатия кнопки подобного типа.

В дополнение к добавлению оберточную элемента с «переполнения: нет» стиля, вам нужно будет скрывать комментарий элемент, который 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 10

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

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

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

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

Answer 12

Кажется, что FaceBook недавно изменил код - всякий раз, когда я нажал «Like», содержимое подскочило влево, таким образом испортив интерфейс. Никакие трюки CSS/JS не заставили его работать. Я пошел с более простым решением, используя iframe.

УВЕДОМЛЕНИЕ - Хотя некоторые устройства уже поддерживают iFrames, не все мобильные устройства. iFrames на самом деле старые и вообще не рекомендуются, но это помогло мне.

Позволяет использовать сценарий с похожим генерации по умолчанию из facebook и создать поле типа iFrame;

Click here to generate like button

Перейти к стилю "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> 

И сделать это так, чтобы это всегда английский, добавив «& локали = en_US» в URL. Это для предотвращения странных макетов в других странах - на голландском языке это будет «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; 
} 

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

Answer 13

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

Правильное решение на сегодняшний день - использовать макет кнопки.

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

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

Answer 14

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

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

Answer 15

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

data-layout="button"