Html 如何像按钮一样改变facebook的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4095946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change color of facebook like button
提问by coure2011
using the guide at http://developers.facebook.com/docs/reference/plugins/like
使用http://developers.facebook.com/docs/reference/plugins/like 上的指南
I am trying to put a like button on my web page. How can i change the color of text [Be the first of your friends to like this.]
我想在我的网页上放一个赞按钮。我怎样才能改变文字的颜色 [成为第一个喜欢这个的朋友。]
采纳答案by joni
It's in an iframe, so you cannot change the color of the text.
它位于 iframe 中，因此您无法更改文本的颜色。
回答by graham
You can change the colour theme of the whole button to either light or dark, but those are the only options allowed. See their brand guidelines:
您可以将整个按钮的颜色主题更改为 light 或 dark，但这些是唯一允许的选项。查看他们的品牌指南：
While you may scale the size to suit your needs, you may not modify the Like button in any other way (such as by changing the design).
虽然您可以缩放大小以满足您的需要，但您不能以任何其他方式（例如通过更改设计）修改“赞”按钮。
回答by OleSchmitt
Yes, it can be done. I will give you the first steps (just to REMOVE COLOR), then you can do a further research on -webkit-filter: hue-rotateto change the color, if you don't want just to remove it.
是的，这是可以做到的。我会给你第一步（只是为了去除颜色），然后你可以对-webkit-filter:hue-rotate做进一步的研究来改变颜色，如果你不想只是删除它。
First, add an #id to your FB code:
首先，在您的 FB 代码中添加一个 #id：
<div id="fboverlay" class="fb-like" data-href="YOURFACEBOOKADDRESS" data-width="300" data-layout="button_count" data-show-faces="false" data-send="false"></div>
You can leave your code as it is right now, just add that id="fboverlay"over there.
你可以保留你现在的代码，只需在那里添加id="fboverlay" 即可。
Then edit your css and add:
然后编辑您的 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%);
}
Or whatever else you'd like. And that's it.
或者其他任何你想要的。就是这样。
Surely it's using CSS3, therefore it's not 100% compatible (specially with old browsers), but you know how it is...
当然它使用的是 CSS3，因此它不是 100% 兼容的（特别是与旧浏览器），但你知道它是如何......
回答by Stijn de Witt
YESit can be done
是的，可以做到
NOFacebook's brand guidelines don't seem to allow it
没有Facebook 的品牌指南似乎不允许这样做
See below for technical details or try out the Facebook Button Colorizertool I built.
请参阅下面的技术细节或试用我构建的Facebook 按钮着色器工具。
Turning the button red (Chrome, Firefox, Safari, Opera)
将按钮变为红色（Chrome、Firefox、Safari、Opera）
It is possible to change the color of the button through CSS/SVG filters. These can influence the appearance of the contents of the iframe. Thanks to OleSchmitt for putting me on this track.
可以通过CSS/SVG 过滤器更改按钮的颜色。这些会影响 iframe 内容的外观。感谢 OleSchmitt 让我走上这条轨道。
Webkit
网络套件
With this code I am currently able to make the color of the button red on Webkit-based browsers:
使用此代码，我目前可以在基于 Webkit 的浏览器上将按钮的颜色设置为红色：
stylesheet.css:
样式表.css：
.fb-like {
-webkit-filter: hue-rotate(120deg);
}
Only tested on Chrome, but as it is a Webkit feature, should also work on Safari and Opera as these are also both Webkit-based.
仅在 Chrome 上进行了测试，但由于它是 Webkit 功能，因此也应该适用于 Safari 和 Opera，因为它们也是基于 Webkit 的。
Firefox
火狐
Firefox doesn't support the CSS equivalents of the SVG filters yet, but you can get hue-rotate to work by linking to an .svg filter. Create an svg filter (either external or internal) and refer to that in your css:
Firefox 尚不支持 SVG 过滤器的 CSS 等效项，但您可以通过链接到 .svg 过滤器来使hue-rotate 工作。创建一个 svg 过滤器（外部或内部）并在您的 css 中引用它：
External SVG file
外部 SVG 文件
filters.svg:
过滤器.svg：
<svg>
<filter id="fb-filter">
<feColorMatrix type="hueRotate" values="120"/>
</filter>
</svg>
Internal SVG fragment
内部 SVG 片段
page.html
页面.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>
stylesheet.css:
样式表.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);
}
Only one svg reference is needed, either to an external file or to an inline svg fragment. Not both at the same time.
只需要一个 svg 引用，无论是外部文件还是内联 svg 片段。不能同时进行。
Tested on Chrome, Firefox and Opera, should also work on Safari. Have a look at this jsFiddle.
在 Chrome、Firefox 和 Opera 上测试过，应该也适用于 Safari。看看这个jsFiddle。
UPDATE: It seems Chrome and Firefox treat the URL passed to the (-webkit-)filter rule slightly different. One browser is resolving it against the stylesheet the rule is in, the other against the html document. I had the strange situation that internal filters were working for Chrome but not Firefox and external filters were working for Firefox but not Chrome. So if it's not working for you, have a very close look at the URL. In the end I just placed the style rule that ties the SVG fragment to the fb-like button inline as well. That works on both browsers.
更新：似乎 Chrome 和 Firefox 处理传递给 (-webkit-) 过滤器规则的 URL 略有不同。一个浏览器根据规则所在的样式表解析它，另一个是针对 html 文档。我遇到了一个奇怪的情况，即内部过滤器适用于 Chrome 但不适用于 Firefox，而外部过滤器适用于 Firefox 而不适用于 Chrome。因此，如果它不适合您，请仔细查看 URL。最后，我只是放置了将 SVG 片段与类似 fb 的按钮内联联系起来的样式规则。这适用于两种浏览器。
What about Internet Explorer?
Internet Explorer 呢？
IE is lagging behind on CSS support, but they wil get there eventually no doubt. Until then I welcome any suggestions for dealing with IE.
IE 在 CSS 支持方面落后，但毫无疑问他们最终会达到目标。在此之前，我欢迎任何有关处理 IE 的建议。
回答by Will
What I did, cause I just had the same issue, is I changed the background color from dark gray to white (which I isolated the like button with the title of the page) So I changed the color of the title, the background to white and now you can see the dark lettering. It's the best I could do cause I can't change the font color.
我所做的，因为我刚刚遇到了同样的问题，是我将背景颜色从深灰色更改为白色（我将类似按钮与页面标题隔离）所以我将标题的颜色，背景更改为白色现在你可以看到深色字体了。这是我能做的最好的事情，因为我无法更改字体颜色。
回答by alex
It is in an iframeelement on a different domain; you can notchange it.
它位于iframe不同域的元素中；你不能改变它。
You can choose from light or dark theme.
您可以选择浅色或深色主题。
回答by Pekka
All incarnations of the "Like" button are iframes, so you can't change them yourself.
“Like”按钮的所有化身都是iframes，所以你不能自己改变它们。
As far as I can see, "light" and "dark" are the only customization options that Facebook offers.
据我所知，“浅色”和“深色”是 Facebook 提供的唯一自定义选项。
Somewhat understandable from Facebook's point of view - they have a brand to protect. But sad for the site owner, of course.
从 Facebook 的角度来看，这是可以理解的——他们有一个品牌需要保护。但当然，网站所有者很难过。
回答by Mutiu O'Balogun
@Mohammad Samim Samir inspired this alternate solution... he stated .fb-like-box, it didn't work for @isherwood only because of the appended "-box", ".fb-like" on it's own with followed by "{background:#f5f5f5;}", it would have worked.
@Mohammad Samim Samir 启发了这个替代解决方案......他说.fb-like-box，它对@isherwood 不起作用只是因为它自己附加了“-box”，“.fb-like”，然后是“{background:#f5f5f5;}”，它会起作用。
".fb-like {
position: relative;
top: 3px;
left: -10px;
background-color: white;
width: 220px;
height: 20px;
color: white;
}"
What it looks like after applying the above style to stylesheet.css
回答by Mohammad Samim Samimee
It is possible, just create a css class by the name of .fb-like-box { background:#f5f5f5; }
有可能，只需创建一个名为 .fb-like-box { background:#f5f5f5; 的 css 类。}
