今天终于丢掉了Wordpress,拥入Octopress的怀抱。其中最大的原因我想是因为比较geek,自己有能力用Octopress。另一方面的原因是看了Matt Gemmell写的 Blogging With Octopress 说它如何如何好(Matt是我喜爱的Mac程序员之一)。 所以呢,如果你不确定是不是要使用Octopress,那么就看看这篇文章介绍它的优势。 不过说实话,其实我是一个不太喜欢写东西的人,相比较而言我更喜欢拍东西。所以在自己的博客加入Instagram对我来说非常重要。这篇文章算是我开始使用Octopress的第一篇hack文,介绍如何把你的Instagram照片及时更新在博客上。
目的
我要达到的目的很简单:每次我用手机拍一张照片,都希望在我的博客上立即更新出来。但是Octopress(Jekyll)生成一个纯静态网站,所以要做到这点有些困难,不过方法肯定是有的。大家可以看我的照片里就是及时更新的Instagram照片流。
理论
让固定页面(照片页面),里面嵌入一段动态语言代码,例如php代码,来抓去Instagram的照片。虽然Jekyll解析成了html页面,但Jekyll允许我们指定文件扩展名。这样就可以增加一个php页面。
需求
- 需要你已经运行起来Octopress
- 要求你的网站可以运行动态语言。例如,我的博客支持php
- Instagram账户,并且申请到Application Key。请到 http://instagram.com/developer/ 查看详情
注意
刚开始做这个工作时候,用google搜到了Luke Karrys的 Instagram Liquid Tag Plugin for Jekyll and Octopress 这篇文章。 文章提到了如何利用 Instagram ruby gem 开发的一个Jekyll的插件 instagram.rb。
但是经过进一步阅读代码,发现这个插件并不满足我的要求。因为它还是属于解析成静态页面的类型。
例如:你在用Markdown写你的文章时候使用这样的脚本可以解析成一张Instagram照片。
1
| |
该插件并不能帮你及时同步博客照片和Instagram Photo Stream。如果你是需求这种功能请到Luke博客查看安装方法。
步骤
首先增加一个“照片”页面
1
| |
接着photos目录下新建一个php页面用来和Instagram同步
1
| |
这时候你应该在source目录下看到photos目录并且下面有index.markdown和instagram.php这2个文件

手动修改index.markdown到index.php文件,打开该文件增加php include语句,修改如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | |
然后我们就可以在instagram.php文件里随意写php代码了。注意必须要这样做,因为直接尝试在index.php写php代码会被Jekyll解析的乱七八糟。
现在我们打开instagram.php增加需要的功能。这里我们要做的工作是从instagram取回json数据然后解析成照片列表,这样就嵌入了index.php里。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | |
在该文件里你需要自己修改2个变量, $access_token和$cache_folder。从instagram注册application api后你可以的到Client ID和Client Secret字符串。然后通过oauth就可以取得access_token。这个过程比较规范我就不详细说了。cache_folder就是一个临时缓存目录随便设置吧,有写权限就可以了,主要保存从instagram取回的json文件。
最后
如果你需要在你的导航栏内添加照片页面的链接,记得修改sorce/_includes/custom/navigation.html文件。这样更新Octopress后就和我的博客一样有一个实时更新的照片页面了。
现在拿起你的手机拍照吧,你的家人和朋友会在你的博客上第一时间看到你的照片。
额外帮助
很多朋友向我询问,不知如何取得access token。我这里提一下,access token是oauth认证标准的结果,当在instagram develper哪里注册了账户后会取得Client ID和Client Secret这2个比较重要的值,用来oauth认证中的请求标示。这个过程从编程来看还是比较复杂的,懂得朋友自然明白。但是如果你不清楚,也没关系,instagram提供了方便的管理工具。在manage页面点左侧菜单API Console 然后点地址栏左侧的锁头图标,选择OAuth,管理工具会自动帮你Oauth登陆并返回access token,您可以发送一个users/self/feed请求,查看Request头信息取得access_token数据。由于instagram返回的token没有过期限制,所以您取一次后就可以一直使用了。