Javascript 我可以为facebook共享按钮添加自定义facebook图标吗？

我可以为facebook共享按钮添加自定义facebook图标吗

以下是我尝试过的代码，但我无法用自定义图标替换默认徽标

<div class="fb-share-button"
  data-href="<?php echo SITE_URL;?>product/<?php echo $this->uri->segment(2);?>"  
  data-layout="link"></div>

---

使用Facebook API可以选择的样式数量有限。您可以更改“布局”，而不是“图标”。默认布局之一是“图标链接”

如果要使用自己的样式/图像：

其他简单但原始的方法：

<a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com">
    <img src="./youimage.png" alt="share icon">
    Link text
</a>

创建自定义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){});
    });


$（'a.facebook-bg'）。单击（函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
FB.ui({
方法：'共享'，
href:'http://url_of_your_page'
}，函数（响应）{}；
});

之前不要忘记加载fb SDK

我花了几个小时的时间，只需一张图片和一个弹出窗口就可以自定义共享，这是我唯一的方式


从“Facebook社交按钮插件”顶部的帖子中列出的链接中获取按钮配置器的代码

添加调整后的元数据，如配置器下方所示

重写css

`.fb共享按钮、.fb_iframe_小部件、#facebook{
宽度：70px！重要；
高度：70px！重要；
保证金：0自动；
利润率顶部：-46px！重要；
背景：url（../img/like.png）不重复！重要；
背景尺寸：包含！重要；
}

.fb共享按钮a{
宽度：70px；
高度：70像素；
}

.fb_iframe_小部件范围{
显示：内联块；
位置：相对位置；
垂直对齐：底部对齐；
宽度：70px！重要；
高度：70px！重要；
文本对齐：对齐；
}

.fb_iframe_小部件iframe{
位置：绝对位置；
宽度：70px！重要；
高度：70px！重要；
}

.fb_iframe_widget iframe#facebook.inlineBlock{
显示：内联块；
缩放：1；
背景：透明！重要；
宽度：70px！重要；
高度：70px！重要；
}

._2tga._3e2a{
背景：透明！重要；
颜色：透明！重要；
边界半径：35px！重要；
宽度：70px！重要；
高度：70px！重要；
}

路径[属性样式]{
填充：透明！重要；
}`

删除锚点中的“共享”（我的布局只是一张图片）或更改它

可选：如果您想显示引用的文本，只需像这样将其添加到链接的末尾（您也可以像这样更改链接的标题和说明）



-可选2：如果要以弹出窗口的形式共享/打开链接，请将window.open onclick函数添加到锚点

完整的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&amp;src=sdkpreparse&quote=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&amp;src=sdkpreparse&quote=here+comes+the+quote"></a></div>



（数据大小和数据布局不重要，因为css被覆盖）

我肯定有更好的方法，但我找不到任何方法！我试过使用FB.ui，但没用

我希望这能帮助别人

这就是我所做的。我使用了此页面上的信息：。但无法在弹出窗口中打开共享对话框。在这一页中，在Martina的回答（可选2）中，我找到了解决方案。谢谢。我希望这个语法对人们有帮助





请发布所有关于您尝试更改图标的代码。javascript代码：window.fbAsyninit=function（）{FB.init（{appId:'appId'xfbml:true，version:'v2.3'}）；}；（函数（d，s，id）{var js，fjs=d.getElementsByTagName（s）[0]；if（d.getElementById（id））{return；}js=d.createElement（s）；js.id=id；js.src=“//connect.facebook.net/en_US/sdk.js”；fjs.parentNode.insertBefore（js，fjs）；}（文档，'script'，'facebook jssdk'）；编辑您的问题，并使用适当的标记设置代码格式。没有人会在评论中查看你的代码。我可以用我的自定义图标更改facebook共享的默认图标吗？请确保在此处包含示例，而不是发布链接（这违反SO政策）。试着解释一下你做了什么（用相关的片段），以及你是如何做出这个决定的。对不起，我不知道，我是新来的。谢谢你的提示：）我已经编辑过了。我想既然它也是开着的，所以不要写两遍同样的东西。不用担心，看起来不错！我只是建议您查看一下要遵循的编辑语法