在网页中增加赞的按钮，比如 twitter，facebook，g+

最近我们公司的一个项目的官网要改版，刚好我负责去做了一下首页的界面调整，其中就需要在页面的底端，加上一些赞的按钮，比如twitter，facebook，g+等等，

其实现在很多网站都有这些赞的按钮。

为了方便以后在做这些按钮的时候再去寻找，干脆就把它们记下来了

1. twitter 按钮 

 

官网demo地址:  https://twitter.com/about/resources/buttons#tweet

代码如下

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
        <script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
        </script>    

 

 

2.g+ 按钮

 

官网demo地址:   https://developers.google.com/+/web/+1button/#example-basic

代码如下

<g:plusone size="medium"></g:plusone>
        <script type="text/javascript">
            window.___gcfg = {
                lang: 'en-US'
            };
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
        </script>

 

注意: 在使用 twitter按钮或者g+按钮的时候，一定要在head头部加一个  <link rel="canonical" href="你的站点" />

canonical 这个属性一定要有，并且要指向一个站点

(我当初在做这个的时候，就没有加，导致g+都不能用，后来对照了一下官网，发现就少了这个，结果就不能用了，然后把它加上去，就可以用了)

 

 

3.facebook按钮

 

官网demo地址 :   https://developers.facebook.com/docs/reference/plugins/like/

代码如下:

<div class="fb-like" data-href="你的站点" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
        <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>

 

 

最后是一张截图