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

Question

我想在我的HTML5应用/网站中添加Twitter和Facebook社交媒体按钮。有没有任何“即插即用”的代码可供使用？

- B. Clay Shannon-B. Crow Raven

Answer 1

对于Facebook，看一下你想要添加哪个按钮，使用Facebook的向导生成你的自定义代码：

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

而这个网站是给Twitter用的：

https://dev.twitter.com/

- Tito Tito

Answer 2

我下载了按钮图片作为JPEG格式，并使用Kompozer软件添加了图像链接。添加后，我在链接地址前加上target="_blank"，以确保打开一个新标签页而不是将Web用户重定向到其他网站 :)

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

- Shanti Kate Grafton

Answer 3

离线寻找适合自己的图标，并在Facebook/Twitter/Linkedin等页面上添加链接。

这样你就可以掌控设计了。

- Ulad Kasach

Answer 4

只需添加 Facebook、Twitter 或其他想要的图标，并将您想要重定向受众的网站 URL 进行超链接即可。

- RONI JUTT

Answer 5

将以下代码添加到您的HTML页面中，在body标签后、header标签前：

<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文件中。

然后在您想要出现按钮的位置添加以下内容：

<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" 替换为您网站的 URL，将 Twitter "data-text" 值替换为您想要默认推文的内容，将 Twitter "data-via"（不要与 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>

- B. Clay Shannon-B. Crow Raven