个性化Twitter按钮分享内容(摆脱蓝色按钮)

时间:2017-05-17 07:56:55

标签: html twitter

我有一个网站,其图标设置为在社交网络上分享。

我也有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>

如果我删除了班级=&#34; twitter-share-button&#34;它从twitter中删除了可怕的蓝色按钮并保留了我的。但如果我点击它会带我去推特但是有一个空白区域,如果我插回那个类=&#34; twitter-share-button&#34;它显示了twitter蓝色按钮,如果你点击它,它会带你到twitter但是我自己预先写好的内容(带有主题标签等)。为什么这不起作用?有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

  1. 要获取Facebook分享中的图片,请从元标记中删除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>
    
  3. 参考此链接https://dev.twitter.com/web/tweet-button/parameters#button  我希望它能解决你的问题