【像黑客一样写博客之九】微博访客

原创作品，转载请标明：http://blog.csdn.net/jackystudio/article/details/16877431

这节介绍如何往边栏添加新浪微博和进行访客统计。

1.新浪微博

1.1.创建微博页面

进入Octopress\source\_includes\custom\asides，创建weibo.html，添加如下代码

[html] view plain copy

{% if site.weibo_uid %}
<section>
<h1>Sina Weibo</h1>
<ulid="weibo">
<li>
<iframe
width="100%"
height="450"
class="share_self"
frameborder="0"
scrolling="no"
src="http://widget.weibo.com/weiboshow/index.php?width=0&height=450&fansRow={{site.weibo_fansline}}&ptype={% if site.weibo_pic %}1{% else %}0{% endif %}&speed=0&skin={{weibo_skin}}&isTitle=0&noborder=1&isWeibo={% if site.weibo_show %}1{% else %}0{% endif %}&isFans={% if site.weibo_showfans %}1{% else %}0{% endif %}&uid={{site.weibo_uid}}&verifier={{site.weibo_verifier}}">
</iframe>
</li>
</ul>
</section>
{% endif %}

1.2.设置微博参数

进入Octopress目录，打开_config.yml，添加如下代码

[cpp] view plain copy

# Weibo
# Please refer to http://weibo.com/tool/weiboshow to get your uid and verifier.
weibo_uid: 1307211523 #WeiBo uid
weibo_verifier: 3619ee9c #WeiBo verifier
weibo_showfans: false#showfans
weibo_fansline: 0 #fansline
weibo_show: true#show weibo
weibo_pic: true#show pic
weibo_skin: 10 #skin

这里的uid和verifier是我自己的，替换成你的就行了，至于其他参数的含义，请参照http://weibo.com/tool/weiboshow

1.3.添加到边栏

同样在_config.yml，在default_asides一栏中添加

[cpp] view plain copy

default_asides: [..., custom/asides/weibo.html]

1.4.生成页面，推送

[cpp] view plain copy

rake generate
rake deploy

这里没有预览是因为新浪微博秀在预览中看不到，只能deploy后看到，并且要第一次要刷新才看得到。

打开主页http://geekjacky.github.io/，如下

1.5.推送source分支

[cpp] view plain copy

git add .
git commit -m "添加新浪微博"
git push origin source

2.访客统计

访客统计的代码有很多，Octopress内置了google的统计，当然也可以选用百度等等，这里采用的是Flag Counter的代码，就是很熟悉的上面布满小国旗的那种。

官网在此http://flagcounter.com/

2.1.获取代码

进入官网，选取你要的款式，获取代码。

2.2.创建flag_counter页面

进入Octopress\source\_includes\custom\asides，创建flag_counter.html，添加如下代码，中间部分替换成你获取的代码

[html] view plain copy

{% if site.flag_count %}
<section>
<h1>Visitor</h1>
<div>
<p></p>
<center>
<ahref="http://info.flagcounter.com/3pF8"><imgsrc="http://s08.flagcounter.com/count/3pF8/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_12/viewers_3/labels_0/pageviews_1/flags_0/"alt="Flag Counter"border="0"></a>
</center>
</div>
</section>
{% endif %}

2.3.设置开关

进入Octopress目录，打开_config.yml，添加如下代码

[cpp] view plain copy

#flag_count
flag_count: true

2.4.添加到边栏

同样在_config.yml，在default_asides一栏中添加

[cpp] view plain copy

default_asides: [..., custom/asides/flag_counter.html]

2.5.生成页面，推送

[cpp] view plain copy

rake generate
rake preview
rake deploy

打开页面http://geekjacky.github.io/，如下

2.6.推送source分支

[cpp] view plain copy

git add .
git commit -m "添加flag_counter"
git push origin source

当然Octopress还有很多插件，使用原理也都差不多，可以参见Octopress的github wiki：https://github.com/imathis/octopress/wiki/3rd-party-plugins