LIANXU.me

I create software and I design.

整合Instagram到Octopress

今天终于丢掉了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页面。

需求

  1. 需要你已经运行起来Octopress
  2. 要求你的网站可以运行动态语言。例如,我的博客支持php
  3. 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 media_id %}

该插件并不能帮你及时同步博客照片和Instagram Photo Stream。如果你是需求这种功能请到Luke博客查看安装方法。

步骤

首先增加一个“照片”页面

1
rake new_page['photos']

接着photos目录下新建一个php页面用来和Instagram同步

1
rake new_page['photos/instagram.php']

这时候你应该在source目录下看到photos目录并且下面有index.markdown和instagram.php这2个文件

手动修改index.markdown到index.php文件,打开该文件增加php include语句,修改如下:

index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
---
layout: page
title: "我的照片"
date: 2011-12-21 05:22
comments: true
sharing: true
footer: true
description: My Photos
---

<?php
include("./instagram.php");
?>

然后我们就可以在instagram.php文件里随意写php代码了。注意必须要这样做,因为直接尝试在index.php写php代码会被Jekyll解析的乱七八糟。

现在我们打开instagram.php增加需要的功能。这里我们要做的工作是从instagram取回json数据然后解析成照片列表,这样就嵌入了index.php里。

instagram.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
<?php

  $access_token='19120281.12eb222.1614fb6d1334221222d66fcd5f258fb';
  $count_images=90;
  $cache_time=60;
  $image_size='thumbnail';
  
  /**
  Output each image with HTML markup
 */
  function echoimage($val, $imagesize) {
      $image = $val["images"][$imagesize]["url"];
      $link = $val["link"];
      $tag=md5($link);
      return "<a href=\"$link\" target=\"_blank\"><img src=\"$image\"/></a>";
      }
      
  /**
  Getting the Data from the API
 */
  function getDataFromApi($token, $number){
      // Instagram API bearbeiten
      $url="https://api.instagram.com/v1/users/self/media/recent/?access_token=$token&count=$number";
      $contents = file_get_contents($url);
      return $contents;
  }
  
  /**
  Gets the Data from either the Cache or the API
 */
  function getData($token, $number, $cache_time){

      $cache_folder = "your cache path";
  
      if(!is_dir($cache_folder)){
        if(mkdir($cache_folder, 0777) == false){
          return getDataFromApi($token, $number);
        }
      }
  
      $cachefile = $cache_folder."user.cache";
  
      if (file_exists($cachefile) && time()-filemtime($cachefile)<$cache_time) {
        try{
          $contents = file_get_contents($cachefile);
        }catch(Exception $e){
          $contents = getDataFromApi($token, $number);
          file_put_contents($cachefile, $contents);
        }
  
      } else {
        $contents = getDataFromApi($token, $number);
        file_put_contents($cachefile, $contents);
      }
  
      return $contents;
  }
  
  $json = json_decode(getData($access_token, $count_images, $cache_time), true);

  echo '<div class="photosdiv">';
  foreach ($json["data"] as $value)
      echo echoimage($value, $image_size);
  echo '</div>';
  
?>

在该文件里你需要自己修改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没有过期限制,所以您取一次后就可以一直使用了。

Instagram, Jekyll, Markdown, Octopress

« 10个迷惑新手的Cocoa&Objective-c开发问题 介绍Octopress里使用Ender Javascript库 »

Comments