как изменить цвет кнопки Facebook like

вы можете изменить цветовую тему всю кнопку к светлому или темному, но это единственные разрешенные варианты. Смотрите их бренда:

пока вы можете масштабировать размер в соответствии с вашими потребностями, вы не можете изменить кнопку Like каким-либо другим способом (например, путем изменения дизайна).

Да, это можно сделать. Я дам вам первые шаги (просто чтобы удалить цвет), затем вы можете сделать дальнейшие исследования по - webkit-filter: hue-поворот изменить цвет, если вы не хотите, чтобы просто удалить его.

во-первых, добавьте #id к вашему коду FB:

<div id="fboverlay" class="fb-like" data-href="YOURFACEBOOKADDRESS" data-width="300" data-layout="button_count" data-show-faces="false" data-send="false"></div>

Вы можете оставить свой код, как он есть сейчас, просто добавлю, что id= "fboverlay" туда.

затем отредактируйте css и добавьте:

#fboverlay {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

или все, что пожелаете. И это все.

конечно, он использует CSS3, поэтому он не совместим на 100% (особенно со старыми браузерами), но вы знаете, как это...

да это можно сделать

нет рекомендации бренда Facebook, похоже, не позволяют это

см. ниже для технических деталей или попробуйте Facebook Кнопка Colorizer я построил.

включение красной кнопки (Chrome, Firefox, Safari, Opera)

можно изменить цвет кнопки через CSS/SVG фильтры. Они могут влиять на внешний вид содержимого из iframe. Благодаря OleSchmitt поставив меня на этот трек.

в WebKit

С помощью этого кода я в настоящее время могу сделать цвет кнопки красным в браузерах на основе Webkit:

стилей.css:

.fb-like {
    -webkit-filter: hue-rotate(120deg);
}

тестируется только на Chrome, но поскольку это функция Webkit, она также должна работать на Safari и Opera, поскольку они также оба На основе Webkit.

в Firefox

Firefox еще не поддерживает CSS-эквиваленты SVG-фильтров, но вы можете заставить hue-rotate работать, связавшись с an .svg фильтр. Создайте svg-фильтр (внешний или внутренний) и обратитесь к нему в css:

внешний SVG файл

фильтры.svg:

<svg>
    <filter id="fb-filter">
        <feColorMatrix type="hueRotate" values="120"/>
    </filter>
</svg>

внутренний SVG фрагмент

страница.HTML-код

<div class="fb-like" data-href="http://facebook.com"
    data-layout="button_count" data-action="like" 
    data-show-faces="false" data-share="false"></div>

<svg height="0" width="0">
    <filter id="fb-filter">
        <feColorMatrix type="hueRotate" values="120"/>
    </filter>
</svg>

стилей.css:

.fb-like {
    /* simplest way, but currently only supported by webkit */
    /* -webkit-filter: hue-rotate(120deg); */

    /* Internal svg filter */
    -webkit-filter: url(#fb-filter);
    filter: url(#fb-filter);

    /* External svg filter */
    -webkit-filter: url(filters.svg#fb-filter);
    filter: url(filters.svg#fb-filter); 
}

требуется только одна ссылка svg, либо на внешний файл, либо на встроенный фрагмент svg. Не оба одновременно.

протестировано на Chrome, Firefox и Opera, также должно работать на Safari. Взгляните на это jsFiddle.

обновление: кажется, Chrome и Firefox обрабатывают URL-адрес, переданный (- webkit -) правило фильтрации немного отличается. Один браузер разрешая это против стилей правило, другой против HTML-документа. У меня была странная ситуация, что внутренние фильтры работали для Chrome, но не Firefox, а внешние фильтры работали для Firefox, но не Chrome. Поэтому, если он не работает для вас, очень внимательно посмотрите на URL. В конце концов, я просто разместил правило стиля,которое связывает фрагмент SVG с встроенной кнопкой fb-like. Это работает на обоих броузеры.

как насчет Internet Explorer?

IE отстает от поддержки CSS, но они в конечном итоге доберутся туда без сомнения. До тех пор я приветствую любые предложения по работе с IE.

Что я сделал, потому что у меня была та же проблема, я изменил цвет фона с темно-серого на белый (который я выделил кнопку like с заголовком страницы), поэтому я изменил цвет заголовка, фон на белый, и теперь вы можете видеть темные буквы. Это лучшее, что я мог сделать потому что я не могу изменить цвет шрифта.

Это iframe элемент в другом домене; вы можете не изменить.

вы можете выбрать светлую или темную тему.

все воплощения кнопки "Нравится" являются окне iframes, поэтому вы не можете изменить их самостоятельно.

насколько я вижу, "светлый" и "темный" - единственные параметры настройки, которые предлагает Facebook.

Это понятно с точки зрения Facebook - у них есть бренд, чтобы защитить. Но печально для владельца сайта, конечно.

@Mohammad Samim Samir вдохновил это альтернативное решение... - заявил он .fb-like-box, он не работал для @isherwood только из-за добавленного "- box", ".fb-как" самостоятельно с последующим " {background:#f5f5f5;}", это сработало бы.

".fb-like {
    position: relative;
    top: 3px;
    left: -10px;
    background-color: white;
    width: 220px;
    height: 20px;
    color: white;
}"

как это выглядит после применения вышеуказанных стилей в таблице стилей.в CSS

возможно, просто создайте класс css по имени .FB-like-box { background:#f5f5f5;}