我可以为Facebook分享按钮添加一个自定义Facebook图标吗？

我可以为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>

来源

2015-04-17 Viraj Kaulkar

请，张贴所有关于你尝试更改图标你的代码。 –

JavaScript代码：

\t –

编辑您的问题并使用正确的标签格式化代码。没有人会在评论中查看代码。 –

有款式数量有限，取代默认的标志，你可以使用Facebook的API选择。您可以更改“布局”，而不是“图标”。其中一种和默认布局是“icon_link”。

如果你想用你自己的风格/图片：Can I use the Share Dialog without using the Share Button?

其他简单，但是原始的方式来做到这一点：

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

来源

2015-04-17 12:38:59 Tymek

谢谢，它为我工作 –

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

以前不要忘记加载fb SDK。

https://developers.facebook.com/docs/sharing/reference/share-dialog

来源

2016-01-23 07:45:33 stakantin

我挣扎了几个小时做一些针对性的份额只是一个形象和一个弹出，而这仅仅是它为我工作的方式。

从在上面“Facebook的社交键式插件”
岗位将调整的元数据中列出的链接按钮配置以代码显示，配置如下
重写css

`.fb-share-button，.fb_iframe_widget，#facebook { width：70px！important; 身高：70px！重要; margin：0 auto; margin-top：-46px！important; background：url（../ img/like.png）no-repeat！important; background-size：contains！important; }

.fb-share-button a { width：70px; height：70px; }

.fb_iframe_widget span { display：inline-block; 位置：相对; vertical-align：bottom; 宽度：70px！重要; 身高：70px！重要; text-align：justify; }

.fb_iframe_widget iframe { position：absolute; 宽度：70px！重要; 身高：70px！重要; }

.fb_iframe_widget iframe #facebook .inlineBlock {display：inline-block; zoom：1; 背景：透明！重要; 宽度：70px！重要; 身高：70px！重要; }

._2tga._3e2a background：transparent！important; 颜色：透明！重要; border-radius：35px！important; 宽度：70px！重要; 身高：70px！重要; }

路径[Attributes Style] { fill：transparent！important; }`
删除锚“共享”（我的布局只是一个图片）或者改变它
可选：如果要显示引用的文本只是将它加入像链路结束这个（你也可以更改标题和这样的链接的描述）

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse&quote=here+comes+the+quote

- 可选2：如果你想分享/打开链接的弹出窗口，添加window.open的onclick functi到锚

与弹出和报价没有文字全部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，但没有奏效。

我希望这可以帮助别人！

Button looked like this

来源

2017-03-21 16:26:15 martina

请确保在这里包含示例，而不是发布链接（这是违反SO policy_）。试着解释你做了什么（_with related snippets_），以及你如何来到这个分辨率 –

对不起，我不知道，我是新来的。感谢提示:)我已经编辑它。我认为既然它也是这样，所以不要两次写同样的东西。 – martina

不用担心，看起来不错！我只是建议看[StackOverflow Editing Markdown]（http://stackoverflow.com/editing-help）来编辑语法 –

这就是我done.I用在这个页面中的信息：Make Your Own Social Media Sharing Buttons。但我无法实现弹出窗口中打开共享对话框。在这个页面中，在Martina的答案（可选2）中，我找到了解决方案。谢谢。我希望这个syntesis可以帮助人们作为例子。

<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&amp;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&amp;src=sdkpreparse"> 
 
     <img src=" 
 
https://drive.google.com/uc?id=0B6hjXoGtqTbPRDN0cG9BVnozdEk" border="0" /></a> 
 
    </li> 
 
</ul>

来源

2017-03-22 19:56:46 ibomi

我可以为Facebook分享按钮添加一个自定义Facebook图标吗？

回答

相关问题