SEO只是外表
技术才是我的追求

网站如何添加Facebook点赞、推特分享和Google+分享

在外国网站文章的分享一般都分享在Facebook,twitter和google+,下面的代码就是为网站添加Facebook点赞,twitter分享和google+分享的按钮,国内站暂时用不到,先记录下来备用。

代码如下:

<div class="social-icon">
    <div class="fr" style="width:55px;">
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone></g:plusone>
    </div>

    <div class="fr" style="width:80px;margin-top:2px;">
        <a href="https://twitter.com/share" class="twitter-share-button" data-via="bingwp" data-related="bingwp" data-hashtags="BingWallpaper">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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>

    <div class="fr" style="width:90px;margin-top:2px;">
        <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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0';
         fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
       <fb:like send="false" layout="button_count" width="110" show_faces="false" colorscheme="light" font="arial"></fb:like>
   </div>
</div>

对应的css样式:

.social-icon{width:290px;float:right;padding-top:2px;padding-right:10px;text-align:right;} 
.fr{float: right!important;}
提示:css样式不能照搬,要根据自己的网站的样式来调整。

最后呈现的效果如下图:

facebook like

未经允许不得转载:棋哥SEO博客 » 网站如何添加Facebook点赞、推特分享和Google+分享

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址