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进行选择。您可以更改“布局”，而不是“图标”。其中一个默认布局是“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>

Answer 2

这就是我所做的。我使用了此页面上的信息：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>

Answer 3

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

我只用了几张图片和一个弹出窗口来制作自定义共享，这让我感到很挣扎，这是它对我有用的唯一方式。

从顶部“Facebook-Social-Button-Plugin”帖子中列出的链接中获取按钮配置器中的代码
添加调整后的元数据显示在配置程序
重写css

`.fb-share-button，.fb_iframe_widget，＃facebook {     宽度：70px！重要;     身高：70px！重要;     保证金：0自动;     margin-top：-46px！important;     background：url（../ img / like.png）no-repeat！important;     background-size：包含！important; }

.fb-share-button a {   宽度：70px;   身高：70px; }

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

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

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

._ 2tga._3e2a {     背景：透明！重要;     颜色：透明！重要;     border-radius：35px！important;     宽度：70px！重要;     身高：70px！重要; }

path [Attributes Style] {       填充：透明！重要; }`
删除锚点中的“分享”（我的布局只是一张图片）或更改
可选：如果您想显示引用的文字，只需将其添加到链接的末尾，就像这样（您也可以更改链接的标题和说明）

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函数添加到锚点

带有弹出和引号的完整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

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

4 个答案: