Html 如何将 Twitter 和 Facebook 社交媒体按钮添加到我的网站？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19198507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add Twitter and Facebook social media buttons to my web site?
提问by B. Clay Shannon
I want to add Twitter and Facebook social media buttons to my HTML5 app / web site. Does anybody have any "drop-in" code for that?
我想将 Twitter 和 Facebook 社交媒体按钮添加到我的 HTML5 应用程序/网站。有没有人有任何“插入”代码？
采纳答案by Tito Tito
For facebook, see what button do you want to add, and use facebook's wizard for generation your custom code:
对于 facebook，查看您要添加的按钮，并使用 facebook 的向导生成您的自定义代码：
http://developers.facebook.com/docs/plugins/
http://developers.facebook.com/docs/plugins/
and this one for twitter:
这是推特的：
回答by Shanti Kate Grafton
I downloaded button images as jpegs and added a link to the image (using Kompozer software). Once they were added I also added target="_blank" before the link address to make sure a new tab is opened rather than redirecting the web user to someone else's site :)
我将按钮图像下载为 jpeg，并添加了图像链接（使用 Kompozer 软件）。添加它们后，我还在链接地址之前添加了 target="_blank" 以确保打开新选项卡，而不是将网络用户重定向到其他人的站点 :)
target="_blank" href="https://twitter.com/username
回答by Ulad Kasach
Find suitable icons for yourself off line and add links to your facebook/twitter/linked in etc pages.
为自己离线寻找合适的图标，并在等页面中添加指向您的 facebook/twitter/linked 的链接。
That way you have control over the design.
这样你就可以控制设计。
回答by B. Clay Shannon
Add this to your html page, right after the body and before header:
将此添加到您的 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>
(If you're using the Razor view engine in ASP.NET, add the above script to the _SiteLayout.cshtml file if you want the buttons on multiple pages).
（如果您在 ASP.NET 中使用 Razor 视图引擎，如果您想要多个页面上的按钮，请将上述脚本添加到 _SiteLayout.cshtml 文件中）。
Then add this at the spot where you want the button[s] to appear:
然后在您希望按钮 [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>
Replace "http://www.awardwinnersonly.com" with your web site's URL, the Twitter "data-text" value with what you want a tweet to say by default, and the Twitter "data-via" (not to be confused with Pancho Villa) value with your Twitter handle.
将“ http://www.awardwinnersonly.com”替换为您网站的 URL，将 Twitter 的“data-text”值替换为您希望推文默认说的内容，以及 Twitter 的“data-via”（不要混淆与 Pancho Villa) 值与您的 Twitter 句柄。
Also, add this, if you want a Facebook comments button (from Tito Tito's accepted answer):
另外，如果您想要一个 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>
