个性化 twitter 按钮以分享内容（摆脱蓝色按钮）

Question

我有一个带有图标集的网站，可以在社交网络上分享。

我的 Twitter 和 Facebook 也有问题。

图标的实际代码如下所示

<li class="wow fadeInUp" data-wow-delay="0.3s">
    <a href="#"><i class="ion-social-facebook"></i></a>
</li>                           
<li class="wow fadeInUp" data-wow-delay="0.4s">
    <a href="#"><i class="ion-social-twitter"></i></a>
</li>

如果是 Facebook（正在工作）将您带到您的墙上发布该网站的链接（我想包括一张图片），到目前为止没有积极的结果。

这是包含在 facebook 中的代码：

<a href="https://www.facebook.com/sharer/sharer.php?u=https://website.com/index.html" target="_blank"><i class="ion-social-facebook">

以及标题中的这 2 个元属性：

<meta property="og:image" content="https://www.website.com/images/tricki.png"/>
<meta property="og:image:secure_url" content="https://www.website/images/tricki.png" />

以 Twitter 为例，代码如下：

<a href="https://twitter.com/share" class="twitter-share-button" data-url="www.website.com/index.html" data-text="Check out this new game!!" data-hashtags="trickigame">
<i class="ion-social-twitter"></i></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

如果我删除 class="twitter-share-button" 它会从 twitter 中删除可怕的蓝色按钮并保留我的。但是如果我点击它会带我去推特但有一个空白区域，如果我插入回那个 class="twitter-share-button" 它会显示推特蓝色按钮，如果你点击它会带你去推特但是有我自己预先编写的内容（带有主题标签等）。为什么这不起作用？有什么帮助吗？

Answer 1

1. 要在 facebook 分享中获取图片，请从 meta 标签中删除 secure_url，请使用以下标签：

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

2. Twitter 分享按钮不能与“twitter-share-button”一起使用，因为 twitter 使用此类来发现共享内容。您只能更改按钮的大小。通过使用下面的代码

   <a class="twitter-share-button" href="https://twitter.com/share" data-size="large" data-text="custom share text" data-url="https://dev.twitter.com/web/tweet-button" data-hashtags="example,demo" data-via="twitterdev" data-related="twitterapi,twitter">Tweet</a>
   

参考此链接https://dev.twitter.com/web/tweet-button/parameters#button 希望能解决你的问题