如何自定义/设置Facebook共享按钮

时间:2017-09-12 13:50:02

标签: html css html5 facebook css3

我搜索并尝试了很多方法为Facebook分享按钮制作自己的风格(此按钮可让您分享当前页面)

https://developers.facebook.com/docs/plugins/share-button/

由于按钮是iframe,我们无法访问它并设置样式,我理解这一点。但我不知道一些网站如何拥有不同风格的分享按钮?



<!DOCTYPE html>
<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(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/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>
</body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

许多网站都有自己的社交分享按钮实现,而不是调用Facebook API。这就是他们如何定制它。

例如,看一下The Next Web上的任何Arcticle

此外,这个this的副本说明了使用自定义共享/类似按钮实际实现开放式图形API需要做多少工作。

答案 1 :(得分:1)

设置社交按钮的唯一方法是使用

创建自己的按钮

可靠的社交分享按钮

https://rrssb.netlify.com/