去年拍攝的點已變成工地了，今年便在附近再找了另一個不錯的點，一樣在 101 的東北方，不會拍到一堆煙。

覺得今年的煙火比起去年精采多了，可惜沒什麼高空煙火。

HAPPY NEW YEAR!

散場仍滿地垃圾，大家要有公德心啊，好歹也丟到垃圾桶，清潔工作人員很辛苦的。

LOVE

散場人潮很多，所以跟同事 Clerk 去通化街吃了麻辣鴨血，等人潮少了些再回家。

說實在，跟同事 Clerk 都一致認為要拍煙火便無法好好靜下心欣賞煙火施放的美景呢，有種一晃眼就到 2012 的感覺 …

無論如何，祝各位 2012 Happy New Year! 心想事成!

好久沒寫網誌了，到年底了工作開始多了起來，讓人有些煩躁。由於累積的補休假快到期，趁著這週還有些空檔，就規劃了年末的攝影行。
曾經看過石門山這個景點的星軌照，十分嚮往，最近在網上也看到許多人張貼的照片，於是心中就決定是這個點了！揪咖的過程並不容易，大家都忙，最後好不容易找到了也喜愛攝影的前同事阿泰，就決定成行了！

先貼一張星軌照當開頭吧！

為何說克難呢？因為我們沒有交通工具，所以一路都是轉搭客運；二來這是第一次去合歡山，事後發現許多準備都不夠齊全，最重要的就是保暖工作啦 … XD

本次大略行程：

Day 1

04:16 板橋車站 和欣客運
06:00 台中車站休息吃早餐
08:00 豐原客運（台中-梨山） 至 合歡山
12:30 合歡山 松雪樓 Check in & 吃泡麵
15:00 入住沒暖氣的滑雪山莊
16:00 嘗試人生第一座百岳 – 石門山(3237m)
17:00 夜晚起大霧
20:00 用完餐依然是大霧，早點睡

Day 2
01:00 睡飽了 手機上網配泡麵
10:00 爬武嶺 結霜
14:00 洗澡
20:00 用完餐 霧氣消散 前往石門山拍星軌&星空
23:00 在零下 5.5 度三小時的拍攝結束 好冷！ 滑雪山莊停水了！

Day 3
04:50 門口拍星軌
06:00 出太陽了 但仍然滿地冰霜 很冷的陽光
09:15 豐原客運 前往埔里
12:00 埔里轉搭國光客運 返回台北

本次裝備：

• 攝影類：
  • Nikon D90
  • EN-EL3e 原廠電池 x2 & 充電器
  • Nikon 原廠快門線
  • 永諾電子快門線
  • 主腳架 Manfrotto 7302YB
  • 副腳架 Velbon 43DL
  • Tokina 12-24 II
  • Nikon 18-105 & Nikon 35 1.8 （但事實上最後都沒用上 沒心力換鏡頭）
  • 黑卡
  • Nikon FM10
  • 傳統快門線
  • 軟片 Kodak E100VS
  • CREE LED 18650 手電筒
  • KATA 3N1-22 攝影包
• 保暖類：（事後發現明顯不足啊…）
  • SNOW TRAVEL AR-55 遮耳帽
  • SNOW TRAVEL WINDBLOC 防風保暖半指兩用手套
  • Uniqlo 發熱內衣
  • Uniqlo 發熱圍巾
  • Uniqlo 發熱長襪
  • 3M 口罩
  • CAT 工作靴
  • 滑雪用羽絨衣
  • 暖暖包若干

這次的 Flickr 攝影集

前一晚在阿泰家集合，討論行程，小憩後便搭計程車前往板橋車站，轉搭和欣客運前往台中。

比預計的時間早抵達台中，但尋找豐原客運卻花了不少時間，地址是：台中市中區建國路113號。找到地址卻是間店家，並不是車站啊，原來要在往停車場走，Google Maps 的街道檢視在這，下次就知道了。

聽說合歡山上買不到泡麵與飲料，於是在 7-11 吃早餐的同時就順便補貨。（泡麵若干、飲水、巧克力）

豐原客運（台中-梨山）是台小巴士，這個路線一天僅有一班，台中 08:00 發車，錯過就沒有了，這也是我們找到比較合用的無車族上合歡山方式。司機大哥一路上都會找地方停下讓乘客休息，上廁所、買午餐，所以其實午餐在這解決就好。

上山這天的天氣不佳，一路上風雨不斷。司機大哥也挺厲害的，在狹窄的道路上用對講機注意會車的情況（大卡車真的很多），終於在中午 12 時左右抵達合歡山。（於松雪樓站下車）

下車一看 LED 顯示幕，上面寫著 3.5℃，直呼真的好冷！（兩天後發現這還是小 case 哩）

我們訂的住宿地點是滑雪山莊，在松雪樓的下方約莫 15 分鐘腳程處，兩人背著行李好不容易抵達山莊門口，卻發現裏頭黑黑的一個人都沒有，電話聯繫下才發現就算住滑雪山莊，仍要在松雪樓辦理入住手續，於是又拖著行李步履蹣跚的到松雪樓去。

松雪樓裡頭有暖氣，很暖，辦了入住手續。想開包泡麵來吃，卻沒有熱水（飲水機要住宿處才有），拜託櫃台人員才能泡，可大廳不能吃，所以被趕到了最外邊寒冷的門口，坐著導演椅（還好有帶）快速解決… 只能說真不人性啊，這邊午餐僅有裡頭昂貴餐廳的選擇，只能摸摸鼻子囉。

休息後終於入住滑雪山莊，這裡一晚 1000，若有自備盥洗用具（毛巾、浴巾、牙刷、牙膏）則是 900（聽說前幾年是 700，嘖嘖），包含自助式早餐與晚餐（兩天菜色一樣），有飲水機（可是你得自備杯子＼瓶子，這邊沒辦法買到任何「容器」）、淋浴間（有熱水）、洗手間（無熱水）、通鋪（枕頭、床墊、棉被），但無任何暖氣設施，所以下次若也是冬季，我應該會考慮多加點錢住松雪樓 … 半夜沒暖氣真的很冷！而且最後一天滑雪山莊還忽然停水，很嘔！

稍做整理後，同住的大哥說要不要一起去爬山，我們便跟著去挑戰人生第一座百岳─石門山（3237m）。

石門山果然如同網上所說的一樣，是最平易近人的百岳，但這天的霧氣瀰漫、寒風陣陣，爬到一半還險些被吹倒，大約半小時後忽然就攻頂了。

登山的穿著要注意保暖外，防水更不能少，下山後發現褲腳已濕了一大塊，爬過數座百岳的登山大哥是穿著雨衣雨褲加雨鞋。

山頂上風大到站不穩，胡亂拍個幾張攻頂照（用手機充當高度大字報）跟風景（可是霧很大）後就趕緊下去了，冷到頭很痛！

第一天都是這種大霧，加上風吹的頭很痛，所以用過晚餐、稍作整理後，晚上八點多便早早入睡了。半夜爬起來用手機上上網，配碗泡麵也是小小的幸福～

第二日，起床一看仍是霧氣瀰漫，加上沒有交通工具，只能選擇附近的點走走，最後決定到武嶺看看。

早上的氣溫是 -1.4℃，雖然低於 0℃，但水氣不足，因此沒有看到降雪。

從松雪樓走到武嶺大概是 1 公里的上坡路，走走拍拍後抵達武嶺，這裡又是另一種風景，處處結霜。各家新聞記者皆來此地採訪，壹蘋果的記者甚至拿了爆掉的溫度計報導。

還看到一隻戴著馴鹿角的黃金獵犬，後來有看到牠上新聞喔！

武嶺 3275m

遇到熱血大學生，在武嶺脫衣服拍照

下武嶺，於松雪樓用過午餐（拉麵，250 大洋），返回滑雪山莊洗個舒服的熱水澡後，兩人開始煩惱接著要去哪探險，因為霧越來越濃了，想再去一次石門山也不適合。

於是就在松雪樓的大廳休息，不想折回滑雪山莊了，畢竟這邊才有暖氣啊 …

就這樣休息到五點多，接著吃松雪樓晚餐 … 看著窗外的霧氣，心想這次就當作探路之行吧，大概與石門山星軌照無緣了，心中不免有些失落 …

但老天對我們還是不錯的，吃飽準備返回滑雪山莊、踏出松雪樓後，一看霧氣全都散去，接著抬頭竟發現滿天的星空！真的是好感動的一刻啊！！

十分興奮的我們便趕快回到滑雪山莊整理攝影裝備，八點多便匆匆趕往石門山的停車場，準備開始這次的星軌拍攝囉！

剛到時先將 ISO 拉高，曝了張石門山星空照，真的好漂亮！未曾看到如此多的星星！心中滿滿的感動啊 …

冬季在此處拍攝實在不是件輕鬆的事情，雖說霧氣已散，但溫度卻下降的特快，出門時看到顯示幕上的氣溫是 -5.5℃，在停車場旁又正好是個風口，毫無山壁或草木的遮蔽，風強時甚至吹倒了腳架。

就算穿得厚厚的，待了三小時還是冷到手腳無知覺，必須不斷地跑跑跳跳來保持體溫，為了漂亮的美景照，就是要熱血的拚下去啊～

我們拍著拍著，先遇到了一位開車來的大哥，他也是第一次來到這拍攝，但後來他冷得受不了，叫我們年輕人繼續加油便開車走了 … 我們必須繼續拚下去！

接著是兩位香港來的朋友開車來了，聽他們說前幾日是在清境，接著就是石門山這了，也是被網上的石門山星軌照吸引來的。這兩位也真厲害，中文還不大輪轉，就遠從香港找到這裡拍攝，真佩服呀！

紀錄一下這次星軌拍攝的數值：

• Nikon D90 + Tokina 12-24 II，ISO 200、F/4、30mins，懶得一直設定所以就一張到底
• 底片機 Nikon FM10，Kodak E100VS，ISO100，大概曝 1hr，中間曾被風吹倒一次，等底片掃出來再看看成果吧 … >"<

大概五～十分鐘一台車，從大卡車到轎車都有，真的是遮黑卡遮到手軟！有些卡車甚至還停下來會車，此時加上寒風刺骨卻又不能動，心中就是髒話不斷了XD

這次只拍了三張，因為後期實在太冷，冷到手指無知覺而放進嘴巴裡回溫，再拍個幾張星空照就收拾走人了，下次夏季，我一定還要再來拍攝跟好好欣賞！

星空

冷到快失溫的我，拍一拍就躲到後面拍星空了，風口超冷！待阿泰也拍攝完畢，告別兩位熱血的香港朋友後，約莫晚間 11 點，兩人便趕快返回山莊休息。

這時候來個熱水澡是最棒的，但沒想到 … 在淋浴間脫了衣服、打開水龍頭，流了細細的水流後就停‧水‧了！！超冷的為什麼要這樣對我 ……

連洗手的水龍頭都停水，真的扯翻了，打去松雪樓櫃台也沒人接，想必是下班了吧 …

無奈之下也只好穿回衣服，躲進被窩裡直發抖，就這樣昏迷到凌晨兩點多，阿泰又跑去門口曝星軌了，其實門口除了前景不夠漂亮外，也算是可以曝啦。

早晨，本來計畫要拍日出，但兩人由於前一晚的疲憊而睡過頭，醒來時已是 06:30，太陽早就出來了。

一片萬里無雲的藍天，陽光卻也沒有帶來什麼暖意，山莊外頭地上的積水已結冰，好幾隻叫不出名字的小鳥不畏寒冷地飛飛跳跳。

前晚問過豐原客運，09:15 下山的車，所以整理行李、吃過早餐就準備要 check out 了。

好陽光！

這樣清澈的藍天，在離開前夕，讓人殺了不少記憶卡空間跟底片，倘若早些起來、行程還有一天的話，那該有多好呀～好想看看壯麗的雲海、從山上俯瞰全景 …

好久沒來一場攝影旅行，此趟合歡山之行，好累、好冷，可是好值得、好感動！這次準備不足的，下次就知道了！

感謝阿泰的陪伴！

下次，還要再來探險！

這次的 Flickr 攝影集

在 Chrome 以及 Firefox 上都可以達到上述需求，但到了 IE 上，隱藏 DIV 後再顯示，其中的 SWF 似乎並不會被重新載入，因此會停留在上次播放的最後一格，尚不知這是 IE 對於 Flash 的 Bug 或這才是正常的，經過一番討論跟摸索後試出了解決方法。

※當然也可以採用 JavaScript 呼叫 SWF 中的重新播放事件來解決，但此次並不是採用此方法解決。

下面是範例原始 HTML（節錄）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<style type="text/css">
#swf { display:none; }
</style>
</head>

<body>
      <div id="swf">
         <div id="swfcontent"></div>
      </div>

<a href="#">播放動畫</a>
</body>
</html>

接著，要將使用 SWFObject 嵌入 SWF 播放物件的 JavaScript 寫成一個 Function：

function showSwf() {
	var flashvars = { };
	var params = {};
	params.wmode = "transparent";
	params.menu = "true";
        params.quality = "high";
	var attributes = {id:"FlashID",name:"FlashID"};

	swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}

思路大概是這樣的：
開啟：頁面載入後，嵌入 SWF 播放物件（CSS 中此物件是隱藏的）到 swf DIV 中，當使用者點擊播放動畫按鈕後，以 BlockUI 方式顯示 swf DIV。
關閉：點擊 SWF 中的關閉按鈕，呼叫關閉 BlockUI 的 Close JavaScript 事件，關閉 swf DIV，此時也移除掉嵌入的 swfobject 播放物件，並再次嵌入（以確保 IE 可以重新播放）。

依此思路，寫出了第一版的解決方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
// 嵌入 SWF
function showSwf() {
	var flashvars = { };
	var params = {};
	params.wmode = "transparent";
	params.menu = "true";
        params.quality = "high";
	var attributes = {id:"FlashID",name:"FlashID"};

	swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}

// 關閉 Flash
function closeUI(){
    $.unblockUI();

    // 清掉 swf DIV 的內容
    $("#swf").html("<div id='swfcontent'></div>");
    // 再嵌入一次
    showSwf();
}

$(document).ready(function() {
    showSwf();

    $('#clickme').click(function() {
        $.blockUI({ message: $('#swf') });
    });
});
</script>
<style type="text/css">
#swf { display:none; }
</style>
</head>

<body>
      <div id="swf">
         <div id="swfcontent"></div>
      </div>

<a id="clickme" href="#">播放動畫</a>
</body>
</html>

但是很弔詭的事情，依然發生在 IE 上，在這樣開開關關幾次 DIV 後，有時 SWF 動畫就會卡住不動，但用滑鼠在 SWF 上點幾下，又或是等個幾秒它又自己開始動起來 …
看起來得針對 IE 特別做處理了。

最後跟同事討論出的最終解決方案 Code 如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
google.load("jquery", "1");
</script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
// 嵌入 SWF
function showSwf() {
	var flashvars = { };
	var params = {};
	params.wmode = "transparent";
	params.menu = "true";
        params.quality = "high";
	var attributes = {id:"FlashID",name:"FlashID"};

	swfobject.embedSWF("flash.swf", "swfcontent", "698", "608", "10.0.0","expressInstall.swf", flashvars, params, attributes);
}

// 關閉 Flash
function closeUI(){
    $.unblockUI();

    // 判斷 IE，用 swfobject 方法來移除嵌入物件
    if ( $.browser.msie ) {
	swfobject.removeSWF("FlashID");

	$("#swf").hide();
	$("#swf").html("<div id='swfcontent'></div>");

	var att = { data:"flash.swf", width:"698", height:"608" };
	var par = { flashvars:"" };
        var id = "swfcontent";
        var myObject = swfobject.createSWF(att, par, id);
    } else {
       // 清掉 swf DIV 的內容
       $("#swf").html("<div id='swfcontent'></div>");
       // 再嵌入一次
       showSwf();
    }
}

$(document).ready(function() {
    showSwf();

    $('#clickme').click(function() {
        $.blockUI({ message: $('#swf') });
    });
});
</script>
<style type="text/css">
#swf { display:none; }
</style>
</head>

<body>
      <div id="swf">
         <div id="swfcontent"></div>
      </div>

<a id="clickme" href="#">播放動畫</a>
</body>
</html>

也許用了笨方法來解決，先記下此次解法，有時間再來研究為什麼會有這些問題吧 Orz

示範環境：Visual Studio 2008 Standard

第一步：
先開啟 Visual Studio，工具→巨集 IDE

第二步：
在 MyMacros 專案中，新增一個名為 Website 的 Class。接著在 MyMacros 專案中新增參考。

第三步：
選擇「vsWebSite.Interop」加入參考。

第四步：
加入以下程式碼（再次感謝原作者的研究），儲存後編譯即可。

Option Strict Off
Option Explicit Off
Imports System
Imports EnvDTE
Imports EnvDTE80
Imports EnvDTE90
Imports EnvDTE90a
Imports EnvDTE100
Imports System.Diagnostics

Public Module Website

    Sub OpenWebsite(Optional ByVal path As String = "")

        If (String.Compare(path, String.Empty) = 0) Then

            MsgBox("不可為空白資料夾", MsgBoxStyle.OkOnly)

        Else

            Dim webPkg As VsWebSite.VSWebPackage

            webPkg = DTE.GetObject("WebPackage")

            webPkg.OpenWebSite(path, VsWebSite.OpenWebsiteOptions.OpenWebsiteOption_None, False)

        End If

    End Sub

End Module

第五步：

Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OpenVSWeb]
@="以 Visual Studio 開啟網站專案"
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OpenVSWeb\command]
@="devenv /command \\\"Macros.MyMacros.Website.OpenWebsite %1\\\""

將上面內容存檔成 reg 檔案執行，或是下載解壓縮後執行裡面的 reg 檔案。

最後：
您就可在資料夾上按右鍵，快速地開啟網站專案了。

–
詳細的概念可至原作者 Blog 文章瀏覽。

其中此篇便是讓使用者可以使用各種「動作」的新功能，就像除了某某某覺得什麼很「讚」之外，還可以增加 某某某 listen to 某專輯、某某某 cook 一道菜 這樣的動作。
這邊有相關的介紹。
※不過很可惜的是目前尚不支援中文的動作與物件。

翻譯功力尚淺，請各位前輩不吝指正，也歡迎同好一起討論：）

這份教學將會帶領你照著下面步驟建立、測試、發佈你的第一個 Open Graph 應用程式。我們會建立一個讓使用者發佈料理資訊的範例應用程式。

• Step 1: 建立 Facebook app
• Step 2: 取得使用者的時間軸授權
• Step 3: 定義 初始動作、物件與集合
• Step 4: 為你的使用者發佈動作
• Step 5: 把社群外掛加到你的應用程式中: Facepile plugin, Activity plugin, and Recommendations plugin
• Step 6: 將動作送交審閱

如果你對 Open Graph 有疑問，請造訪: Debug and Troubleshoot。為了讓你更快上手，我們亦提供了 範例 下載。

Step 1: 建立 Facebook app

先至 Dev App，點擊 「建立新的應用程式」，並輸入應用程式的名稱以及命名空間。

當你送出初始資訊，你便會進入應用程式的基本設定頁面。

1. 基本資料：
   1. 你的應用程式命名空間。這會是您的應用程序所特有的，將被用來管理你的物件和動作。
2. 選擇你的應用程式是如何跟 Facebook 結合：
   1. 選擇「網站」 （在此份教學中，我們會建立一個與 Open Graph 整合的範例網站）
   2. 輸入網站的 URL。

您已設置的基本信息後，您便可以在你的網站中加入「增加到時間軸」的外掛，定義你的 Open Graph 行為和物件。

Step 2: 取得使用者授權

為了發佈使用者的 Open Graph 動作，您的應用程序需要取得使用者的 publish_actions 權限。您可以使用「加入到時間軸」外掛，它會自動要求用戶的權限。

下面是一段使用 JavaScript SDK 的範例程式碼，幫助你快速進入狀況。請記得把 YOUR_APP_ID 以及範例圖片網址更新成你的喔。

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script><script type="text/javascript">// <![CDATA[
    FB.init({
        appId:'YOUR_APP_ID', cookie:true,
        status:true, xfbml:true, oauth:true
    });
// ]]></script>

&nbsp;
<h3><span style="color: grey; font-family: verdana;">
 Stuffed Cookies
 </span></h3>
<img title="Stuffed Cookies" src="http://example.com/cookie.jpg" alt="" width="550" />

您會發現，你的外掛可能會產生一個空白的預覽，並點擊「加入到時間軸」按鈕，產生一個空的權限對話框。

要將特定的 app 資訊植入 授權對話框 與 加入時間軸外掛，請參閱 Auth Dialog 指南。

Step 3: 定義動作、對象與聚合

應用程式開發中的 Open Graph 頁籤顯示了 "Getting Started" 頁籤：

定義行為類型與對象類型

Getting Started 精靈將引導你定義初始的動作與對象。

• 點擊你的應用程式中的「Open Graph」頁籤
• 接著點擊「Getting Started」

本教學中，你會建立一個使用者可以 cook a recpie 的動作（譯註：尚不知道在中文版會如何呈現這樣的行為句子）。為了達成前述目的，我們將會定義一個動作（或動詞）叫做 cook，並定義一個對象（或名詞）叫 recipe。

• 在動詞輸入框中輸入 cook ，並在名詞輸入框中輸入 recipe。（譯註：可惜的是，目前似乎尚無法輸入中文的動詞與名詞。– 2011/09/23）
• 點擊「Get Started」

下一步，你可以 定義你的動作，cook 這個動作擁有自訂屬性與範例資料。在本教學中，我們使用預設的配置。點擊 Save Changes and Continue。

下一步，定義對象，recipe 擁有自訂屬性與範例資料。在本教學中，我們使用預設的配置。點擊 Save Changes and Continue。

定義集合

下一步，定義集合。

當使用者與你的應用程式以一種有意義的方式互動，我們亦會將使用者在時間軸上的動作以特別方式顯示集合資訊。集合資訊也可以用來植入驗證對話框展示區塊。

讓我們來建立一個特別標註 receipes cooked 列表的集合資訊：

1. Date to Display - 我們需要一個 cook 動作的列表，所以在此輸入 cook。
2. Layout Style - 選擇 List
3. Sort By - 選擇 Most Recent Cook
4. Aggregation Title - 輸入一個有趣的集合資訊標題，像是「Recipes I’ve Cooked」
5. Caption Lines - 你可以參考物件的自訂屬性，或動作的屬性。在此份教學中，我們不填這欄，更多本欄的資訊，請參考這裡。
6. In Timeline - 預覽在時間軸中你的集合資訊。點擊 Save and Finish 來返回 Open Graph 資訊頁面。

當你儲存你的物件、動作與集合資訊的定義後，Open Graph 的控制台將會秀出這些資訊的綜覽。

下個單元會帶領你發布你的第一個動作並在使用者的時間軸中呈現集合資訊。

Step 4: 發佈動作

為了要發佈一個使用者的動作，你得先 建立一個對象（create an object），這是基於在 Step 3 中定義的物件。

當對象被建立後，你便可使用 Graph API 發佈一個動作。

建立物件

Open Graph 資訊頁面在 Recipe 後面提供了「Get Code」連結。Open Graph 的 meta 標籤，包含那些你要嵌入在你網頁中的動作資訊。

• 複製程式碼片段到你的網頁中。確認你的網頁是擺在 Facebook 可透過 HTTP GET 存取的主機上。
• 使用 偵錯工具 去驗證你的 meta 標籤是正確地被設置的。請試著解決所有的錯誤訊息（若有的話）。
• 記下對象的 URL，因為你將會使用它來發佈你的動作。

下面是加入 <meta> 標籤的頁面。請記得把 YOUR_APP_ID、APP_NAMESPACE、OBJECT_TYPE 以及範例圖片網址更新成你的喔。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
    xmlns:fb="https://www.facebook.com/2008/fbml"> 

<head prefix="og: http://ogp.me/ns# APP_NAMESPACE: 

http://ogp.me/ns/apps/APP_NAMESPACE#">

    <meta property="fb:app_id" content="YOUR_APP_ID" />
    <meta property="og:type" content="APP_NAMESPACE:OBJECT_TYPE" />
    <meta property="og:title" content="Stuffed Cookies" />
    <meta property="og:image" content="http://example.com/zhen/cookie.jpg" />
    <meta property="og:description" content="The Turducken of Cookies" />
    <meta property="og:url" content="http://example.com/zhen/cookie.html"> 

</head> 

<body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({
            appId:'YOUR_APP_ID', cookie:true,
            status:true, xfbml:true, oauth:true
        });
        </script>

        <fb:add-to-timeline></fb:add-to-timeline>

        <h3>
            <font size="30" face="verdana" color="grey">
                 Stuffed Cookies
            </font>
        </h3>
        <p>
            <img title="Stuffed Cookies"
                            src="http://fbwerks.com:8000/zhen/cookie.jpg"
                            width="550"/><br />
        </p>
    </body>
    </html>

發佈動作

發佈一個使用者與對象連結的動作。Open Graph 資訊頁面的 Action 後方，擁有「Get Code」連結，這包含了 curl 程式碼片段，你可複製到終端機中並直接執行。

發佈動作涉及建立一個 HTTP POST 要求送到 me/[namespace]:[action_type] Graph API 端點，帶有以下參數：

• [object_type]: 一個鏈接到一個網頁，代表一個對象。
• access_token: 一個有效的用戶 access_token publish_actions權限。

下面範例是傳送一個 POST 到：

https://graph.facebook.com/me/APP_NAMESPACE:ACTION_TYPE?OBJECT_TYPE=OBJECT_URL&access_token=ACCESS_TOKEN

這將會發佈一個 cook 的動作，recipe 與提供的 OBJECT_URL 相應。請把 OBJECT_URL 更換為你的網頁 URL。

下面是更新了行為與 Cook 按鈕的範例應用程式。請記得把 YOUR_APP_ID、APP_NAMESPACE、OBJECT_TYPE、ACTION_TYPE 以及範例圖片網址更新成你的喔。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
     xmlns:fb="https://www.facebook.com/2008/fbml"> 

<head prefix="og: http://ogp.me/ns# APP_NAMESPACE: 

http://ogp.me/ns/apps/APP_NAMESPACE#">

    <meta property="fb:app_id" content="YOUR_APP_ID" />
    <meta property="og:type" content="APP_NAMESPACE:OBJECT_TYPE" />
    <meta property="og:title" content="Stuffed Cookies" />
    <meta property="og:image" content="http://example.com/cookie.jpg" />
    <meta property="og:description" content="The Turducken of Cookies" />
    <meta property="og:url" content="http://example.com/cookie.html"> 

    <script type="text/javascript">
    function postCook()
    {
        FB.api('/me/YOUR_NAMESPACE:ACTION_TYPE' +
                    '&OBJECT_TYPE=http://example.com/cookie.html','post',
                    function(response) {
            if (!response || response.error) {
                    alert('Error occured');
            } else {
                alert('Post was successful! Action ID: ' + response.id);
                }
        });
    }
    </script>
</head> 

<body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({
            appId:'YOUR_APP_ID', cookie:true,
            status:true, xfbml:true, oauth:true
        });
        </script>

        <fb:add-to-timeline></fb:add-to-timeline>

        <h3>
            <font size="30" face="verdana" color="grey">
                Stuffed Cookies
            </font>
        </h3>
        <p>
            <img title="Stuffed Cookies"
                            src="http://example.com/cookie.jpg"
                            width="550"/><br />
        </p>       

        <form>
            <input type="button" value="Cook" onclick="postCook()" />
        </form>
    </body>
    </html>

點 cook 按鈕，如果發佈是成功的，你將會取得一個返回的 id，其代表新的發佈。恭喜！你已經成功發佈一個動作，並完成讓 Open Graph 應用程式運作的基礎階段了。

為了檢視你時間軸上的聚合資訊，我們還得要建立一些動作。使用上面的步驟，建立幾個物件，並引發幾個動作。你需要發佈至少五個動作，才能看到時間軸上的集合資訊。

在 Facebook 的時間軸上，你應該會看到你應用程式的集合資訊：（譯註：集合資訊這塊筆者尚未成功試出來…僅有在一開始允許加入到時間軸時可看到這個資訊，不知是否因為尚在改版之故）

Step 5: 加入社群外掛

加入一個或更多的 Social Plugins 供 Open Graph 應用程式使用。

在你的對象網頁中，你可以加入任何外掛去標註 Open Graph 動作。在我們的教學中，讓我們加入 Activity Plugin。

Activity

Activity Plugin 已經更新，以標註你應用程式的 Open Graph 動作。

加入 Activity Plugin：

<fb:activity actions="APP_NAMESPACE:ACTION_TYPE"/></fb:activity>

下面是整份教學範例，加上 Add to Timeline、張貼動作，以及 Activity plugin。請記得把 YOUR_APP_ID、APP_NAMESPACE、OBJECT_TYPE、ACTION_TYPE 以及範例圖片網址更新成你的喔。

<head prefix="og: http://ogp.me/ns# APP_NAMESPACE: 

http://ogp.me/ns/apps/APP_NAMESPACE#">

    <meta property="fb:app_id" content="YOUR_APP_ID" />
    <meta property="og:type" content="APP_NAMESPACE:OBJECT_TYPE" />
    <meta property="og:title" content="Stuffed Cookies" />
    <meta property="og:image" content="http://example.com/cookie.jpg" />
    <meta property="og:description" content="The Turducken of Cookies" />
    <meta property="og:url" content="http://example.com/cookie.html"> 

    <script type="text/javascript">
    function postCook()
    {
        FB.api('/me/APP_NAMESPACE:ACTION_TYPE' +
                    '&OBJECT_TYPE=http://example.com/cookie.html','post',
                    function(response) {
            if (!response || response.error) {
                    alert('Error occured');
            } else {
                alert('Post was successful! Action ID: ' + response.id);
                }
        });
    }
    </script>
</head> 

<body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({
            appId:'YOUR_APP_ID', cookie:true,
            status:true, xfbml:true, oauth:true
        });
        </script>

        <fb:add-to-timeline></fb:add-to-timeline>

        <h3>
            <font size="30" face="verdana" color="grey">
                Stuffed Cookies
            </font>
        </h3>
        <p>
            <img title="Stuffed Cookies"
                            src="http://example.com/cookie.jpg"
                            width="550"/><br />
        </p>       

        <form>
            <input type="button" value="Cook" onclick="postCook()" />
        </form>
        <fb:activity actions="APP_NAMESPACE:ACTION_TYPE"></fb:activity>
    </body>
    </html>

Step 6: 將你的你的動作送交審閱

在你的應用程式可以向所有使用者發佈 Open Graph 動作之前，我們會採用一個輕量級審查和核准程序。

在我們驗證你的 Open Graph 使用方式符合標準，我們將會核可應用程式對所有 Facebook 的使用者發佈動作。請注意，我們並非核可你的應用程式，而只是 Open Graph 動作的使用。

更多細節請參照 這裡 。

故障排除

下面是當你遇到應用程式動作或對象問題時，幾個有幫助的技巧提示：

如何驗證你的對象（Object）

• 使用 object debugger，你可驗證你的對象是否使用了必要的 meta 標籤。

如何驗證你的行為已被發佈

• 使用 object debugger 確保你的對象是正確地被定義的
• 確認你在 API 呼叫時使用正確的命名空間。記得當命名空間被儲存後便不能修改。
• 確認在你建立 Graph API 呼叫前，已經從 access_token 中移除了 &expires token。
• 確認你可在 Graph API POST 呼叫後取得返回的 id

為什麼我在發佈動作後得到「This method must be called with an app access_token」的錯誤？

• 在應用程式開發頁，你的動作類型中取消勾選「Require app access token to write」選項。

範例程式碼

此份教學在我們的 Samples and How-To 中已可取得。

而這邊是筆者製作的範例。

翻譯有誤或有任何需修正的部分，請不吝指正，大家一起討論 ：）

下面就是整合這兩種方法的 Code：

首先，要支援 Gears，要先在 head 標籤引入此 js：

<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>

接著，下面是主要的 JavaScript：

// 瀏覽器支援 HTML5 定位方法
if (navigator.geolocation) {

    // HTML5 定位抓取
    navigator.geolocation.getCurrentPosition(function(position) {
        mapServiceProvider(position.coords.latitude, position.coords.longitude);
    },
    function(error) {
	    switch (error.code) {
	        case error.TIMEOUT:
	            alert('連線逾時');
	            break;

	        case error.POSITION_UNAVAILABLE:
	            alert('無法取得定位');
	            break;

	        case error.PERMISSION_DENIED://拒絕
	            alert('想要參加本活動，\n記得允許手機的GPS定位功能喔!');
	            break;

	        case error.UNKNOWN_ERROR:
	            alert('不明的錯誤，請稍候再試');
	            break;
	    }
    });

} else { // 不支援 HTML5 定位

    // 若支援 Google Gears
    if (window.google && google.gears) {
    	try {
              // 嘗試以 Gears 取得定位
              var geo = google.gears.factory.create('beta.geolocation');
              geo.getCurrentPosition(successCallback,errorCallback, { enableHighAccuracy: true,gearsRequestAddress: true });
        } catch(e){
              alert("定位失敗請稍候再試");
        }
    }else{
        alert("想要參加本活動，\n記得允許手機的GPS定位功能喔!");
    }
}

// 取得 Gears 定位發生錯誤
function errorCallback(err) {
    var msg = 'Error retrieving your location: ' + err.message;
    alert(msg);
}

// 成功取得 Gears 定位
function successCallback(p) {
      mapServiceProvider(p.latitude, p.longitude);
}

// 顯示經緯度
function mapServiceProvider(latitude, longitude) {
      alert("經緯度：" + latitude + ", " + longitude);
}

以上，如此便能確保在舊版 Android 瀏覽器中也能正確取得定位了。
在 HTC Magic, iPhone 3GS, iPhone 4, Samsung i9000, Samsung i9100 上實測過。

PS.對了，過程中也測過 Google AJAX API 的 IP 定位方式，也就是透過 google.loader.ClientLocation 的方式，但大概是對台灣的 IP 定位資料庫很不準吧，在台北市卻將我定位在台中。因此就沒有採用此方法了。

參考資料：
如何在 Mobile Web App 中取得座標
Google Geolocation API
Gears Geolocation Demo

但由於是用 ASP.NET 3.5 製作，似乎在 4 之前的版本，文字框控制項尚不支援 HTML5 的眾多 type 屬性，若強制更改會造成編譯錯誤。
網上搜尋了一下解法，果真有相關的討論，其實做法就如同在文字框控制項加上 keydown 屬性一樣，在 code behind 那邊加上即可。

以本例來說，就會像這樣：

this.txtPhone.Attributes.Remove("type");
this.txtPhone.Attributes.Add("type", "tel");

成果圖：

一般的文字框輸入鍵盤

type 設成 tel 的電話輸入鍵盤

這個需求看似相當容易，使用 ORDER BY NEWID() 就好了呀，但列表還要分頁呢，使用者若按下一頁，第二頁又不該出現第一頁的物件。
想到很多方法 … 可以用臨時表作、也或許可以做一隻已經亂數排好的資料 xml 以 jQuery 方式載入呈現 …

不過在拜請 Google 大神後發現一個相當有趣的作法，以 T-SQL 將某個種子值以 md5 方式編碼，並作為排序的依據。此種子值可在使用者進入頁面後給予，並塞入 Session 中，確保此使用者翻頁時還是同一種子值。

如同 StackOverflow 上 ccook 前輩所提供的範例 Code：

--宣告一種子值，實際在 ASP.NET 中使用，可以將此值塞入 Session 中，確保使用者翻頁時是使用同一種子值
declare @seed as int;
--可試著將 @seed 值改變，可發現每一種 @seed 值都各有固定排序
set @seed = 10;

--建立一範例使用的表
create table temp (
id int,
date datetime)

--塞入幾筆資料
insert into temp (id, date) values (1,'20090119')
insert into temp (id, date) values (2,'20090118')
insert into temp (id, date) values (3,'20090117')
insert into temp (id, date) values (4,'20090116')
insert into temp (id, date) values (5,'20090115')
insert into temp (id, date) values (6,'20090114')

--將種子值以 md5 方式編碼，並以此作為排序依據
select *, HASHBYTES('md5',cast(id+@seed as varchar)) r
from temp order by r
--1 2009-01-19 00:00:00.000     0x6512BD43D9CAA6E02C990B0A82652DCA
--5 2009-01-15 00:00:00.000     0x9BF31C7FF062936A96D3C8BD1F8F2FF3
--4 2009-01-16 00:00:00.000     0xAAB3238922BCC25A6F606EB525FFDC56
--2 2009-01-18 00:00:00.000     0xC20AD4D76FE97759AA27A0C99BFF6710
--3 2009-01-17 00:00:00.000     0xC51CE410C124A10E0DB5E4B97FC2AF39
--6 2009-01-14 00:00:00.000     0xC74D97B01EAE257E44AA9D5BADE97BAF

--將範例表刪掉
drop table temp

資料來源：http://stackoverflow.com/questions/458175/pseudo-random-sort-in-ms-sql-not-newid-and-not-rand

Base64 的變數名為 imageData，請用 POST 方式丟。
※另外要注意，在 IIS 中，ASP 針對存入圖檔的目錄需另外開啟 IUSR 角色寫入的權限。

<%@Language="VBScript" CodePage=65001 %>
<%
On Error Resume Next

Function getTimeToString()
  Dim MyNewRandomNum
  Randomize
  MyNewRandomNum = Int(Rnd * 100)+1
  d = Now()
  getTimeToString = Year(d) & "_" & Month(d) & "_" & Day(d) & "_" & Hour(d) & "_" & Minute(d) & "_" & Second(d) & "_" & MyNewRandomNum
End Function

Dim filename
filename = getTimeToString() & ".jpg"

Dim xml : Set xml=Server.CreateObject("MSXML2.DOMDocument")
Dim stm : Set stm=Server.CreateObject("ADODB.Stream")
xml.resolveExternals=False
xml.loadXML "<?xml version='1.0'?><data><![CDATA[" & Request.Form("imageData") & "]]></data>"
xml.documentElement.setAttribute "xmlns:dt","urn:schemas-microsoft-com:datatypes"
xml.documentElement.dataType = "bin.base64"
stm.Type=1 'adTypeBinary
stm.Open
stm.Write xml.documentElement.nodeTypedValue
stm.SaveToFile Server.MapPath("upload") & "/" & filename
stm.Close
Set xml=Nothing
Set stm=Nothing 

IF err.number<>0 THEN
	Response.Write "Result=Failed&msg=發生錯誤"
ELSE
	Response.Write "Result=" & filename '輸出檔名
END IF
%>

經實際測試後發現果真如此，但只要將 IE 切到 IE8 模式（按 F12 的開發工具功能表最後兩欄可切換）就一切正常。

尋找 FCKeditor 官方論壇上的解法，最簡單的解法（省得還要更新 FCKeditor 版本）是在該頁面的 head 標籤中加上：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

使 IE9 模擬成 IE8 模式在跑，就可解決此問題。
另外，提醒一下，若是以頁框組來載入不同頁面的 FCKeditor 編輯器，則該行需加在頁框組的頁面上。