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

Кнопка Like, закодированная для показа «Рекомендация», имеет ширину 84 пикселя, а кнопка «Like» – 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, установите ширину в ширину кнопки, установите переполнение в скрытое, т.е.

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

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

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

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

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

Стили:

 span.no_overflow { overflow: none; width: 50px; } .no_overflow span.fb_edge_comment_widget.fb_iframe_widget { display: none; } 

Разметка:

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

Я знаю, что многие решения уже опубликованы, но мой все еще несколько отличается. Он работает для версии HTML5 подобной кнопки и использует только css, чтобы скрыть поле count. Не забудьте добавить appId для тестирования.

CSS:

FB Like Button:

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

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

Давайте возьмем сценарий подобного поколения по умолчанию из facebook и создадим iFrame like box;

Нажмите здесь, чтобы создать кнопку

Перейдите к стилю «Box_Count» со счетчиком сверху.

Когда вы нажимаете «Захватить код», переходите на код iFrame. Вы получите что-то подобное этому;

Теперь давайте оберните там div.

Дайте ему следующий CSS:

 .like_wrap { width:55px; height:25px; overflow:hidden; } 

Теперь вы, вероятно, увидите левый верхний угол счетчика. Теперь нам нужно исправить iFrame. Дайте ему class;

И сделайте так, чтобы он всегда был английским, добавив «URL & locale = en_US» в URL. Это для предотвращения странных макетов в других странах – на голландском языке это будет «Vind ik leuk» и на английском языке «Like». Я думаю, каждый, на каждом языке, знает «как», поэтому давайте придерживаться этого.

Теперь мы добавим еще CSS для as_box;

 .like_box { margin-top:-40px; } 

Таким образом, весь код выглядит следующим образом (я удалил app_id, поскольку мне это не нужно)

HTML:

CSS:

 .like_wrap { width:55px; height:25px; overflow:hidden; } .like_box { margin-top:-40px; } 

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

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

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

например.

Документы FB, похоже, еще не полностью обновлены … если вы прокрутите вниз, вы увидите, что они заявили, что доступны только 3 макета, но в раскрывающемся меню предлагается 4.

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

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

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

Мое решение – небольшой капюшон, но он работает. То, что я делаю, просто в основном определяет, где будет число, и использовать css чтобы иметь над ним коробку. Думаю, вы также можете обмануть систему и добавить больше хитов, если хотите. Вот мой код с использованием jquery но он будет отличаться от других в зависимости от того, где вы размещаете подобную кнопку на своей странице.

Не самый гламурный, но эй, безопасность – это жесткий, чтобы манипулировать содержимым в стороне кадра.

  направо  

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

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

— Обновить

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

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

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

 data-layout="button" 

Это то, что я пробовал, и он отлично работает в ff, chrome и ie8:

 /* set width for the  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-х местах). Кажется, для меня отлично работает.