Показать ноль в button_count Кнопка «Мне нравится» - PullRequest
Новая
       31

Показать ноль в button_count Кнопка «Мне нравится»

7 голосов
/ 20 сентября 2011

Есть ли способ заставить кнопку «лайк» (в стиле button_count) показывать ноль лайков?

Это предпочтительное решение для соответствия Twitter и Goolge +1.

В качестве альтернативы: есть ли какие-нибудь советы по динамическому смещению интервала в зависимости от наличия счетчика кнопок?

Ответы [ 2 ]

1 голос
/ 15 декабря 2011

Вы можете подделать его, то, что я сделал, я ищу пост, на котором уже есть лайки, используя firebug, я заменил счет на «0», затем скриншот, затем обрезал ( ширина по умолчанию: 90пикселей: высота: 20 пикселей. ) кнопка «Мне нравится» с нулевым счетом и фоном кнопки «Нравится». 

<style>
    div.like {background:url(likewithzerocount.png) no-repeat left center}
</style>
<div class="like">
    <fb:like href="#" send="false" layout="button_count" width="90" show_faces="false"></fb:like>
</div>
1 голос
/ 11 октября 2011

То, что я сделал, это поместил позади кнопки «Мне нравится» на Facebook шарик с нулевым счетом, который выглядит точно так же, как Facebook. Сложная часть позиционировала его в нужном месте, так как, очевидно, ширина самой кнопки «Мне нравится» различна для каждого браузера, и нет способа зависеть от ее потока, поскольку она находится в отдельном фрейме.

Вот как это выглядит:

  • DOM (все в пределах fb_bg_count_balloon, из фрейма фейсбука): 

    <div class="fb_like_container">
    <div class="fb_bg_count_balloon">
        <table cellspacing="0" cellpadding="0"><tbody><tr>
            <td>
                <div class="fb_count_nub">
                    <s></s><i></i>
                </div>
            </td>
            <td><div class="fb_count_count">0</div></td>
        </tr></tbody></table>
    </div>
    <div class="fb_like_foreground">
        <fb:like href="http://yoururl.com/path" send="false" layout="button_count" width="90"></fb:like>
    </div>
</div>

  • SCSS (я нахожу его гораздо более читабельным, чем простой CSS - это то, что позволяет использовать здесь вложенные селекторы - вы можете легко перевести его в допустимый простой CSS, сгладив вложение): 

    .fb_like_container {
    width:90px;
    position:relative;

    .fb_bg_count_balloon {
        position:absolute;
        top: 1px;
        right: 13px;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        color: #333;
        .fb_count_nub {
            display: block;
            position: relative;
            z-index: 2;
            height: 0;
            width: 5px;
            top: -5px;
            left: 2px;

            s, i {
                display: block;
                border-style: solid;
                border-color: transparent;
                border-right-color: #D7D7D7;
                border-width: 4px 5px 4px 0;
                position: relative;
                top: 1px;
            }
            i {
                left: 2px;
                top: -7px;
                border-right-color: white;
            }
        }
        .fb_count_count {
            background-color: white;
            border-style: solid;
            border-color: #D1D1D1;
            border-width: 1px;
            height: 14px;
            margin-left: 1px;
            min-width: 15px;
            padding: 1px 2px 1px 2px;
            text-align: center;
            line-height: 14px;
            white-space: nowrap;
        }
    }
    .fb_like_foreground {
        position:absolute;
        left: 0;
        top: 0;
        z-index:3;
    }
}

  • И счастливые настройки для IE: 

    <!--[if IE 9]>
    <style type="text/css">
        .fb_like_container .fb_bg_count_balloon {
            right: 16px;
        }
    </style>
<![endif]-->
<!--[if lte IE 8]>
    <style type="text/css">
        .fb_like_container .fb_bg_count_balloon {
            top: 2px;
            right: 17px;
        }
    </style>
<![endif]-->

Проблемы с этим способом:

  1. Если facebook что-то изменит, он, вероятно, сломается (хотя бы визуально)
  2. При загрузке, пока Facebook не проанализирует ваш fb: like, у вас будет только шарик.
  3. FB "fb_count_nub" отвратительно, но я думаю, что вполне переносимо - вы можете просто заменить все это (содержимое fb_bg_count_balloon) изображением.
...