Question

我想在我的HTML5应用/网站上添加Twitter和Facebook社交媒体按钮。有人有任何“插入”代码吗？

Answer 1

对于Facebook，请查看您要添加的按钮，并使用Facebook的向导生成自定义代码：

http://developers.facebook.com/docs/plugins/

这个用于推特：

https://dev.twitter.com/

Answer 2

我将按钮图像作为jpeg下载并添加了图像链接（使用Kompozer软件）。添加完成后，我还在链接地址前添加了target =“_ blank”，以确保打开新标签，而不是将网络用户重定向到其他人的网站：）

target="_blank" href="https://twitter.com/username

Answer 3

为您自己离线寻找合适的图标，并添加指向您的脸书/推特/链接等页面的链接。

这样你可以控制设计。

Answer 4

只需添加 facebook、twitter 或您想要的图标，并将此网站的 URL 超链接到您想要重定向观众的位置。

Answer 5

将此内容添加到您的html页面，就在正文之后和标题之前：

<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/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

（如果您在ASP.NET中使用Razor视图引擎，如果您想要多个页面上的按钮，请将上述脚本添加到_SiteLayout.cshtml文件中）。

然后在您希望按钮[s]出现的位置添加：

<div style="display:inline-block;vertical-align:top">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.awardwinnersonly.com" data-text="Czech out the books, movies, and music that won major awards" data-via="BClayShannon">Tweet</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>
</div>
<div style="display:inline-block;vertical-align:top" class="fb-like" data-href="http://www.awardwinnersonly.com" data-send="false" data-width="450" data-show-faces="false" data-font="segoe ui">
</div>

将“http://www.awardwinnersonly.com”替换为您网站的网址，将Twitter“数据文本”值替换为您希望推文默认发布的内容，以及Twitter“数据通过”（不要与之混淆） Pancho Villa）价值与您的Twitter处理。

另外，如果您想要一个Facebook评论按钮（来自Tito Tito的接受答案），请添加此项：

<div class="fb-comments" data-href="http://www.awardwinnersonly.com" data-colorscheme="The color scheme used in the plugin" data-numposts="5" data-width="450"></div>

如何将Twitter和Facebook社交媒体按钮添加到我的网站？

5 个答案: