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

Question

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

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

Answer 1

您可以将整个按钮的颜色主题更改为浅色或深色,但这些是唯一允许的选项.查看他们的品牌指南:

虽然您可以根据需要缩放尺寸,但您不能以任何其他方式修改"喜欢"按钮(例如通过更改设计).

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过滤器更改按钮的颜色.这些可以影响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-)过滤规则的URL略有不同.一个浏览器根据规则所针对的样式表解析它,另一个浏览器针对html文档解析它.我有一个奇怪的情况,内部过滤器正在为Chrome而不是Firefox,外部过滤器适用于Firefox而不是Chrome.因此,如果它不适合您,请仔细查看URL.最后,我只是放置了将SVG片段与内联类fb按钮联系起来的样式规则.这适用于两种浏览器.

那么Internet Explorer呢？

IE在CSS支持方面落后,但他们最终无疑会到达那里.在此之前,我欢迎任何有关处理IE的建议.

Answer 4

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