logo标签列表

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

javascriptfacebooksdk
4

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

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

<div class="fb-share-button"
  data-href="<?php echo SITE_URL;?>product/<?php echo $this->uri->segment(2);?>"  
  data-layout="link"></div>
请发布您尝试更改图标的所有代码。 - Daniel B
JavaScript 代码：<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '应用程序 ID' xfbml : true, version : 'v2.3' }); }; (function(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/zh_CN/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> - Viraj Kaulkar
请编辑您的问题并使用适当的标签格式化代码。没有人会在评论中浏览您的代码。 - Daniel B
我能用自定义图标更改Facebook分享的默认图标吗？ - Viraj Kaulkar
4个回答
7

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

如果您想使用自己的样式/图像：我可以在不使用分享按钮的情况下使用共享对话框吗？

另一种简单但原始的方法是：

<a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com">
    <img src="./youimage.png" alt="share icon">
    Link text
</a>
1
这是我所做的。我使用了这个页面上的信息：制作自己的社交媒体分享按钮。但我无法实现在弹出窗口中打开共享对话框。在这个页面上，在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&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>

0

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

0

我曾经苦苦挣扎了数小时，试图创建一个只包含图片和弹出窗口的自定义分享功能，而这是唯一让我成功的方法。

  • 从顶部帖子中列出的链接“Facebook-Social-Button-Plugin”中获取按钮配置器的代码

  • 添加下面显示的调整后的元数据到配置器中

  • 重写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; }`

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

  • 可选：如果您想显示引用文本，只需在链接末尾添加它，如下所示（您也可以像这样更改链接的标题和描述）

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，但它没有起作用。

我希望这能帮助到某些人！

按钮看起来像这样

请确保在此处包含示例，而不是发布链接（这违反了SO政策）。尝试解释您所做的事情（带有相关片段），以及您如何达成此解决方案。 - AP.
抱歉，我不知道，我是新来的。谢谢你的提示 :) 我已经编辑过了。我以为既然在SO上也有，就不用再写一遍了。 - martina
没问题，看起来很好！我建议查看StackOverflow Editing Markdown以便遵循编辑语法。 - AP.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接