WordPress开发源码 国内社交关注按钮（ChinaSocialFollowUsButtons）

国内社交关注按钮（ChinaSocialFollowUsButtons）

如果你想要一款简单风格的关注我们按钮，那么你可以试一试我们原创的ChinaSocialFollowUsButtons。

在使用时，只需要填写 a 标签 href 参数，图标就会自动显示出来，你可以放置在你所需要的地方。

你可以看到下面的示例图标。展示出来的图标都是我们支持的社会化网站。

只复制你需要的li标签:

• 新浪微博
• 腾讯微博
• QQ空间
• github
• github
• 微信公众号
• 百度
• twitter
• facebook
• plus.google
• pinterest
• flickr
• vimeo
• youtube
• instagram
• youtube
• wordpress
• vk
• linkedin
• soundcloud
• tripadvisor
• yelp
• 订阅我们
• 给我写信

安装步骤

1) 在网页头部加载css样式和jquery.js。注意要加载font-awesome的CSS样式，在这之前要将FONT文件夹复制到静态文件夹中，与CSS文件夹同级:

  
  
```html
 <script src="js/jquery.js"></script>
 <link rel="stylesheet" href="css/csfub.css" />
 <link rel="stylesheet" href="css/font-awesome.min.css?ver=4.4.0'" />
``` 

 

2) 复制任意的 `.menu-social` 列表到所需的位置:

  
  
 
```html
<!-- 按钮从这里开始. 复制 div到你的文档. -->
<div id="menu-social" class="menu">
 <ul id="menu-social-items" class="menu-items" style="-webkit-padding-start: 0px;">
 <li class="menu-item">
 <a title="关注我们的新浪微博" target="_blank" rel="nofollow" href="http://weibo.com"><span class="screen-reader-text">新浪微博</span></a>
 </li>
 <li class="menu-item">
 <a title="关注我们的腾讯微博" target="_blank" rel="nofollow" href="http://t.qq.com"><span class="screen-reader-text">腾讯微博</span></a>
 </li>
 <li class="menu-item">
 <a title="关注我们的QQ空间" target="_blank" rel="nofollow" href="http://qzone.qq.com"><span class="screen-reader-text">QQ空间</span></a>
 </li>
 <li class="menu-item">
 <a title="关注我们的github主页" target="_blank" rel="nofollow" href="https://github.com/yehaicao/"><span class="screen-reader-text">github</span></a>
 </li>
 <li class="menu-item">
 <a title="关注我们的人人主页" target="_blank" rel="nofollow" href="https://zhan.renren.com/"><span class="screen-reader-text">github</span></a>
 </li>
 <li class="menu-item">
 <a title="关注我们的微信公众号" target="_blank" rel="nofollow" href="http://wx.qq.com"><span class="screen-reader-text">微信公众号</span></a>
 </li>
 <li class="menu-item">
 <a title="关注我们的百度空间" target="_blank" rel="nofollow" href="http://www.baidu.com"><span class="screen-reader-text">百度</span></a>
 </li>
 <li class="menu-item">
 <a title="关注我们的twitter" target="_blank" rel="nofollow" href="http://twitter.com"><span class="screen-reader-text">twitter</span></a>
 </li>
 <li class="menu-item">
 <a title="facebook" target="_blank" rel="nofollow" href="http://facebook.com"><span class="screen-reader-text">facebook</span></a>
 </li>
 <li class="menu-item">
 <a title="plus.google" target="_blank" rel="nofollow" href="http://plus.google.com"><span class="screen-reader-text">plus.google</span></a>
 </li>
 <li class="menu-item">
 <a title="pinterest" target="_blank" rel="nofollow" href="http://pinterest.com"><span class="screen-reader-text">pinterest</span></a>
 </li>
 <li class="menu-item">
 <a title="flickr" target="_blank" rel="nofollow" href="http://flickr.com"><span class="screen-reader-text">flickr</span></a>
 </li>
 <li class="menu-item">
 <a title="vimeo" target="_blank" rel="nofollow" href="http://vimeo.com"><span class="screen-reader-text">vimeo</span></a>
 </li>
 <li class="menu-item">
 <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
 </li> 
 <li class="menu-item">
 <a title="instagram" target="_blank" rel="nofollow" href="http://instagram.com"><span class="screen-reader-text">instagram</span></a>
 </li> 
 <li class="menu-item">
 <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
 </li> 
 <li class="menu-item">
 <a title="wordpress" target="_blank" rel="nofollow" href="http://wordpress.com"><span class="screen-reader-text">wordpress</span></a>
 </li> 
 <li class="menu-item">
 <a title="vk" target="_blank" rel="nofollow" href="http://vk.com"><span class="screen-reader-text">vk</span></a>
 </li> 
 <li class="menu-item">
 <a title="linkedin" target="_blank" rel="nofollow" href="http://linkedin.com"><span class="screen-reader-text">linkedin</span></a>
 </li> 
 
 <li class="menu-item">
 <a title="soundcloud" target="_blank" rel="nofollow" href="http://soundcloud.com"><span class="screen-reader-text">soundcloud</span></a>
 </li> 
 
 <li class="menu-item">
 <a title="tripadvisor" target="_blank" rel="nofollow" href="http://tripadvisor.com"><span class="screen-reader-text">tripadvisor</span></a>
 </li> 
 
 <li class="menu-item">
 <a title="yelp" target="_blank" rel="nofollow" href="http://yelp.com"><span class="screen-reader-text">yelp</span></a>
 </li> 
 <li class="menu-item">
 <a title="订阅我们" target="_blank" rel="nofollow" href="http://www.wordpressleaf.com/feed"><span class="screen-reader-text">订阅我们</span></a>
 </li>
 <li class="menu-item">
 <a title="给我们写信" target="_blank" rel="nofollow" href="mailto:admin@wordpressleaf.com"><span class="screen-reader-text">给我写信</span></a>
 </li>
 </ul>
</div>
<!-- 按钮代码结束 -->
```

WordPressLeaf.com

 
这些<li> 代码，你可以在 index.html 示例中找到。
 
3) 在你的网页上加上javascript文件，它们都在js的文件内。另外微信二维码使用了js来加载，所以你也需要加载csfub.js。

  
  
 ```html
<script src="js/csfub.js"></script>
```

 
4) 在csfub.js中将图片地址改自己的图片地址。

  
  
 ```html
var imgurl='img/weixin.png';
```

 

下载地址

你可以在github下载： github

结束

如果你有什么疑问，可以在本页留言，获得帮助。