如何改变facebook的颜色就像按钮一样

Question

使用指南 http://developers.facebook.com/docs/reference/plugins/like

我想在我的网页上添加一个类似的按钮。我怎样才能改变文字的颜色[成为你喜欢的第一个朋友。]

Answer 1

您可以更改整个按钮to either light or dark的颜色主题，但这是唯一允许的选项。查看他们的brand guidelines：

  

虽然您可以扩大尺寸以满足您的需求，   你不能以任何其他方式修改Like按钮   （例如通过改变设计）。

Answer 2

是的，可以做到。我将给你第一步（只是删除颜色），然后你可以进一步研究 -webkit-filter：hue-rotate 来改变颜色，如果你不想只是为了删除它。

首先，在你的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>

您可以保留现在的代码，只需在那边添加 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％兼容（特别是旧浏览器），但你知道它是怎么回事......

Answer 3

是可以完成

否 Facebook的品牌指南似乎不允许

请参阅下面的技术详情或试用我制作的Facebook Button Colorizer工具。

---

将按钮变为红色（Chrome，Firefox，Safari，Opera）

可以通过CSS/SVG filters更改按钮的颜色。这些可以影响iframe内容的外观。感谢OleSchmitt让我踏上了这条赛道。

<强>的Webkit

使用此代码，我目前能够在基于Webkit的浏览器上将按钮的颜色设置为红色：

stylesheet.css中：

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

仅在Chrome上进行了测试，但由于它是Webkit功能，因此也适用于Safari和Opera，因为它们也都是基于Webkit的。

<强>火狐

Firefox还不支持SVG过滤器的CSS等价物，但您可以通过链接到.svg过滤器来获得hue-rotate。创建一个svg过滤器（外部或内部）并在css中引用它：

外部SVG文件

filters.svg：

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

内部SVG片段

page.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中：

.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似乎将传递给（-webkit-）过滤规则的网址略有不同。一个浏览器根据规则所针对的样式表解析它，另一个浏览器针对html文档解析它。我有一个奇怪的情况，内部过滤器正在为Chrome而不是Firefox，外部过滤器适用于Firefox而不是Chrome。因此，如果它不适合您，请仔细查看URL。最后，我只是放置了将SVG片段与内联类fb按钮联系起来的样式规则。这适用于两种浏览器。

Internet Explorer怎么样？

IE在CSS支持方面落后，但他们最终会毫无疑问地到达那里。在此之前，我欢迎任何处理IE的建议。

Answer 4

它位于iframe中，因此您无法更改文本的颜色。

Answer 5

我做了什么，因为我遇到了同样的问题，我将背景颜色从深灰色改为白色（我用页面标题隔离了类似的按钮）所以我改变了标题的颜色，背景为白色，现在你可以看到黑暗的刻字。这是我能做的最好的因为我无法改变字体颜色。

Answer 6

“赞”按钮的所有版本都是 iframe s，因此您无法自行更改。

据我所知，“光明”和“黑暗”是Facebook提供的唯一自定义选项。

从Facebook的角度来看，有些可以理解 - 他们有一个可以保护的品牌。但当然，网站老板很难过。

Answer 7

它位于不同域中的iframe元素中;你可以不改变它。

您可以选择浅色或深色主题。

Answer 8

@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

Answer 9

有可能，只需要创建一个名为.fb-like-box的css类{background：＃f5f5f5; }