javascript 我可以为 facebook 分享按钮添加自定义 facebook 图标吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29698897/
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
Can i add a custom facebook icon for facebook share button?
提问by Viraj Kaulkar
Can i add a custom facebook icon for facebook share button??
我可以为 facebook 分享按钮添加自定义 facebook 图标吗？
following is code i tried but i could't replace default logo with a custom icon
以下是我尝试过的代码，但我无法用自定义图标替换默认徽标
<div class="fb-share-button"
data-href="<?php echo SITE_URL;?>product/<?php echo $this->uri->segment(2);?>"
data-layout="link"></div>
回答by Tymek
There is limited number of styles, that you can choose from using Facebook API. You can change "layout", not "icon". One of, and default, layout is "icon_link".
样式数量有限，您可以使用 Facebook API 进行选择。您可以更改“布局”，而不是“图标”。默认布局之一是“icon_link”。
If you want to use your own style/image: Can I use the Share Dialog without using the Share Button?
如果您想使用自己的样式/图像：我可以在不使用共享按钮的情况下使用共享对话框吗？
Other simple, but primitive way to do this:
其他简单但原始的方法来做到这一点：
<a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com">
<img src="./youimage.png" alt="share icon">
Link text
</a>
回答by ibomi
This is what I've done.I used the information at this page: Make Your Own Social Media Sharing Buttons.But I couldn't achieve to open share dialog in a pop up window. In this page,in Martina's answer (Optional 2) I've found the solution.Thanks.I hope this syntesis will be helpfull to the people as an example.
这就是我所做的。我使用了此页面上的信息：制作自己的社交媒体共享按钮。但我无法在弹出窗口中打开共享对话框。在这个页面中，在 Martina 的回答（可选 2）中，我找到了解决方案。谢谢。我希望这个综合作为一个例子对人们有所帮助。
<ul class="sharing-buttons">
<li>
<a class="fb-xfbml-parse-ignore" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdengdeney.blogspot.com.tr%2F&src=sdkpreparse','popup','width=600,height=500'); return false; " href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdengdeney.blogspot.com.tr%2F&src=sdkpreparse">
<img src="
https://drive.google.com/uc?id=0B6hjXoGtqTbPRDN0cG9BVnozdEk" border="0" /></a>
</li>
</ul>回答by Kostiantyn
Create your custom html element and trigger the facebook share dialog by clicking on it.
创建您的自定义 html 元素并通过单击它来触发 facebook 共享对话框。
<a href="#" class="facebook-bg"><i class="fa fa-facebook"></i></a>
$('a.facebook-bg').click(function(event){
event.preventDefault();
event.stopPropagation();
FB.ui({
method: 'share',
href: 'http://url_of_your_page'
}, function(response){});
});
Don't forget to load fb SDK before.
之前不要忘记加载fb SDK。
https://developers.facebook.com/docs/sharing/reference/share-dialog
https://developers.facebook.com/docs/sharing/reference/share-dialog
回答by martina
I was struggling for hours to make a custom share with just an image and a popup, and this is the only way it worked for me.
我花了几个小时努力只用一个图像和一个弹出窗口进行自定义共享，这是它对我有用的唯一方法。
Taking the code from the button configurator from the link listed in the post on top "Facebook-Social-Button-Plugin"
Adding the adjusted meta data showed below the configurator
Rewriting the css
`.fb-share-button, .fb_iframe_widget, #facebook { width: 70px !important; height: 70px !important; margin: 0 auto; margin-top: -46px !important; background: url(../img/like.png) no-repeat !important; background-size: contain !important; }
.fb-share-button a { width: 70px; height: 70px; }
.fb_iframe_widget span { display: inline-block; position: relative; vertical-align: bottom; width: 70px !important; height: 70px !important; text-align: justify; }
.fb_iframe_widget iframe { position: absolute; width: 70px !important; height: 70px !important; }
.fb_iframe_widget iframe #facebook .inlineBlock { display: inline-block; zoom: 1; background: transparent !important; width: 70px !important; height: 70px !important; }
._2tga._3e2a { background: transparent !important; color: transparent !important; border-radius: 35px !important; width: 70px !important; height: 70px !important; }
path[Attributes Style] { fill: transparent !important; }`
Removing the "Share" in anchor (my layout was just a picture) or changing it
Optional: if you want to display quoted text just add it on the end of the link like this (you can also change the title and description of the link like that)
从顶部“Facebook-Social-Button-Plugin”帖子中列出的链接中获取按钮配置器中的代码
添加显示在配置器下方的调整后的元数据
重写css
`.fb-share-button, .fb_iframe_widget, #facebook { width: 70px !important; 高度：70px！重要；边距：0 自动；边距顶部：-46px ！重要；背景： url(../img/like.png) no-repeat !important; 背景大小：包含！重要；}
.fb-share-button a { 宽度：70px; 高度：70px；}
.fb_iframe_widget span { display: inline-block; 位置：相对；垂直对齐：底部；宽度：70px！重要；高度：70px！重要；文本对齐：对齐；}
.fb_iframe_widget iframe { 位置：绝对；宽度：70px！重要；高度：70px！重要；}
.fb_iframe_widget iframe #facebook .inlineBlock { display: inline-block; 缩放：1；背景：透明！重要；宽度：70px！重要；高度：70px！重要；}
._2tga._3e2a { 背景：透明！重要；颜色：透明！重要；边界半径：35px！重要；宽度：70px！重要；高度：70px！重要；}
路径[属性样式] { 填充：透明！重要；}`
删除锚中的“共享”（我的布局只是一张图片）或更改它
可选：如果您想显示引用的文本，只需将其添加到链接的末尾（您也可以像这样更改链接的标题和描述）
-Optional 2: if you want to share/open the link as a popup, add window.open onclick function to the anchor
- 可选2：如果你想分享/打开链接作为弹出窗口，添加window.open onclick函数到锚点
Full div example with popup and quote without text :
带有弹出窗口和引号的完整 div 示例，没有文本：
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"e=here+comes+the+quote','popup','width=600,height=500'); return false;" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"e=here+comes+the+quote"></a></div>
(the data-size and data-layout are not important cause the css is overwritten)
（数据大小和数据布局并不重要，因为 css 被覆盖）
I'm sure there are better ways of doing it but i couldn't find any! I tried with the FB.ui but it didn't work.
我相信有更好的方法可以做到，但我找不到任何方法！我尝试使用 FB.ui 但它没有用。
I hope this helps somebody!
我希望这对某人有所帮助！
