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

Question

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

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

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

Answer 1

样式数量有限，您可以使用 Facebook 选择 API。您可以更改 "layout"，而不是 "icon"。默认布局之一是 "icon_link".

如果您想使用自己的style/image：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>

Answer 2

创建您的自定义 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

Answer 3

我费了好几个小时才做出一个只有一张图片和一个弹出窗口的自定义分享，这是对我有用的唯一方法。

从顶部 post 中列出的 link 按钮配置器中获取代码 "Facebook-Social-Button-Plugin"
添加配置器下方显示的调整后的元数据
重写css

`.fb-share-button, .fb_iframe_widget, #facebook { 宽度：70px ！重要；高度：70px ！重要；保证金：0自动； margin-top: -46px !important; 背景：url(../img/like.png) no-repeat !important; background-size：包含！重要； }

.fb-share-button一个{ 宽度：70px；高度：70px； }

.fb_iframe_widget 跨度 { 显示：inline-block；位置：相对； vertical-align：底部；宽度：70px ！重要；高度：70px ！重要； text-align：证明； }

.fb_iframe_widget iframe { 位置：绝对；宽度：70px ！重要；高度：70px ！重要； }

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

._2tga._3e2a { 背景：透明！重要；颜色：透明！重要； border-radius: 35px !important; 宽度：70px ！重要；高度：70px ！重要； }

路径[属性样式] { 填充：透明！重要； }`
删除锚点中的"Share"（我的布局只是一张图片）或更改它
可选：如果你想显示引用的文本，只需像这样将其添加到 link 的末尾（你也可以更改 link 的标题和描述像这样)

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：如果你想share/open把link当成popup，在anchor

上添加window.openonclick函数

完整的 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>

（data-size 和 data-layout 不重要，因为 css 被覆盖了）

我确定有更好的方法，但我找不到！我尝试使用 FB.ui 但它没有用。

希望对大家有所帮助！

Button looked like this

Answer 4

这就是我 done.I 使用此页面上的信息：Make Your Own Social Media Sharing Buttons。但是我无法在弹出窗口中打开共享对话框 window。在此页面中，在 Martina 的回答（可选 2）中，我发现 solution.Thanks.I 希望这个综合能对人们有所帮助。

<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>

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

Can i add a custom facebook icon for facebook share button?

javascript

sdk

facebook