Faryne的程式設計館

嘛～前一篇都寫了 Google+1 的， 所以這篇當然是要寫一下 Facebook 作平衡報導。 因此廢話不多說， 請大家 直接看原始碼 作吧！ 如果要demo的話，請往這裡 。 ＝＝＝＝＝＝我是說明的分隔線＝＝＝＝＝＝ 為了避免有人懷疑我騙錢， 以下還是說一下FB這套跟Google的差別好了。 基本上Google的+1是不管怎樣， 全部都繫結（bind）一個函式， 因此會變成很多的程式邏輯都會寫在這個函式裡面。 （當然是可以拆開啦～只是說很多人會立刻先寫一堆後才發現不妙） Facebook的話會把要繫結的函式增至兩個， 這樣大致上會減少一點內容， 看起來可能會比較美觀這樣。 總而言之， Facebook的讚就是這樣了， 有問題歡迎留言， 至於回不回又是另一回事了 :D

今天是講 Google+1按鍵 的功能， 請要看Facebook的人可以離開了喔～（拖走 想看Facebook的，請往 這裡 。 如圖所示，這是Google+1按鍵的取得頁面， 上面的主要選項就不解釋了， 這裡就從進階選項那一區說明： 「加入計數」和「剖析」這兩項不在本文討論的範圍， 因此有需要的請自己去找資料； 這裡只解釋下方的兩個選項，也就是「JavaScript Callback函式」與「+1網址」。 這個JavaScript Callback函式是當使用者按了Javascript時會觸發的JavaScript事件， 所以你可以填入一個JavaScript函式名稱， 以便使用者+1後可以作一些事情（這方面請自行想像）； 至於「+1網址」則是代表這個+1的分數（？）要算在哪個網址上。 解釋了兩個對本文比較有點關係的進階選項後， 接下來就是進入正題了。 當你填好這兩個選項後， Google會產生類似以下的code： <script src="https://apis.google.com/js/plusone.js" type="text/javascript"> </script> <g:plusone callback="<你設定的JavaScript Callback函式>" href="<你設定的+1網址>"></g:plusone> 接著請把這段Code貼在應該出現的地方， 然後我們要寫一段javascript，以便應付使用者點擊+1按鍵後的回呼動作。 首先假設這裡設定的callback函式是「thankyou」， 所以就會有以下的js內容： // o是一個物件，至少會包含「state」和「href」這兩個元素 function thankyou (o) { if (o.state.toLowerCase() == "ok") { // 當使用者高興地（？）按了+1時 alert("感謝您的支持"); } else { // 當使用者之前按了+1，之後又取消的狀況 alert(...

以鄙人自己寫的 Pixiv抓圖器 來說， 每個抓到的圖片位址都是像「http://ha2.tw/pixiv/{pixiv_id}_xxx.jpg」， 不過這樣代表我把圖片放在這台所謂ha2.tw的主機上嗎？ 答案就不一定了。 事實上我是把實體圖片放在Amazon S3上， 每次有人存取時，我會到S3弄下圖片原檔經由PHP輸出。 為什麼這麼做， 因為不想讓使用者直接連我的S3啊（茶）。 （再怎麼說給其他人直連的話對我的信用卡而言可能會造成傷害Orz） 所以回到主題，要怎麼樣用PHP輸出圖檔呢？ 這裡提供一個最簡單的實作方法： <?php header('Content-Type:image/jpeg'); $content = file_get_contents('sample.jpg'); echo $content; ?> 以上的方法會讓你覺得很簡單到不可思議， 但其實也沒什麼， 畢竟圖片和文字檔都是數位內容， 只是因為載具和解讀的方式的不同， 而會有不同的輸出結果。 不相信嗎？ 那麼你可以把第一行的header......註解掉後再重跑一次， 你會發現瀏覽器根本只跑出一堆你看不懂的亂碼。 原因在於第一行是我們為了讓瀏覽器知道這是甚麼類型的檔案而做的， 那一行代表我們告訴瀏覽器「等一下要載入一個圖片檔案，麻煩用圖片的方式解讀」， 有了這一行後瀏覽器才不會搞不清楚狀況用錯的解讀方式處理。 圖片的輸出大概就是這樣， 那麼下次有機會就說明一下防盜連的事吧。 （其實搞不好哪天又忘了這回事也不一定XD）

因為我太無聊了，所以才寫這篇文章（拖走） 基本上我算是個 Chrome 的忠實使用者（使用Chrome之前是用 Firefox )， 因此針對自己的需求寫一些extension也是很正常的事情。 也因為我都研究了，所以就順便把研究心得寫出來好了。 基本上，Chrome的extension的構成元件通常是這些部份： 幾個尺寸的圖片：至少要有16*16和128*128以上的圖片各一張 mainfest.json 這個extension的基本資訊 一個或多個html。當你需要撰寫較複雜的功能時會需要。不過由於是淺論，這裡不會特別提到這塊。 當你知道有這些內容時， 接著就可以來寫一個簡單的Chrome Extension了。 首先打開你的文字編輯器， 然後先敲下以下的code試試看吧： { "name": "連到Yahoo!奇摩", "description": "不用懷疑，就只是新開一個分頁然後連到Yahoo!奇摩", "permissions": [], "version": "1.0", "icons": { "128": "128.png", "16": "16.png" }, "app":{ "launch": { "web_url": "http://tw.yahoo.com/" } } } 敲完以後，請在你放檔案的地方開一個新目錄， 嗯......名字就叫作「chrome_test」吧， 把以上的內容存成「manifest.json」到上述目錄中。 除此之外，還要再弄出16*16、128*128的圖各一張放在該目錄。 接著開啟Google瀏...

你或許會很好奇， 為啥我在 plurk 上貼一個 youtube 連結後， plurk會把他轉換成其他人只要一點開就能播放且有縮圖的連結； 或者是你貼了一個flickr連結後， plurk會幫你轉換成那張圖片，並且設定好連結。  這些（大概）都是透過oEmbed這個機制所弄出來的。 （因為我又沒問plurk的人是怎麼弄的w）  那什麼是 oEmbed 呢， 詳情請翻翻看 維基百科 上的說明。 如果不想看的話， 這裡就簡單一點說：「oEmbed是個開放格式，可以讓你知道想要的東西資源在哪裡該如何使用blahblah」。 至於詳細內容在上面所提及的oEmbed官網大概就提的差不多了， 所以請務必看看（不然我也沒打算再說更多了）。  所以說該怎麼實作勒？ 就以實作Youtube的以oEmbed取資源為例， 首先你必須要知道Youtube的oEmbed資源在那個Uri， 基本上你可以在 Youtube這篇部落格文章 找到， 不過我可以先貼出來參考： http://www.youtube.com/oembed?url={youtube影片網址}&format=json  當你組出這段網址後， 你可以用你上手的語言去作一個http get的動作， 如果順利的話， 你的程式應該會收到一段json， 至少會有type、version、title等元素， 請參照oEmbed官網中所提及的response type，  去取用你所需要的項目， 就算是大功告成了。 行文至此應該會有人要問：「那我怎麼知道哪些網站有支援這個機制？」 基本上幾個比較大手的網站都已經實做這種格式了， 你可以在oEmbed的官網首頁的最後部份看到那些網站的清單。 當然oEmbed還有一個Discovery機制， 也可以讓你知道這個網站是否支援， 只是因為本期稿擠（實際上是天氣好熱不想多打字）， 所以改天有機會再來開新文說明好了。 

用過 Amazon S3 服務的人都會知道， 當檔案傳到S3後，如果要access那個檔案的話， 要用 http://{bucket-name}.s3.amazonaws.com/{檔案路徑名稱} 才行。 但是這個方法太麻煩了， 所以就可以為這個bucket設置一個像是 store.example.com 的 CNAME 方便存取。 那麼以下就以 store.example.com 的網域（當然這裡的網域請替換成你自己的）為例子吧： 請先到 Amazon S3 的控制台， 新增一個名叫「 store.example.com 」的bucket 接著再到你的dns管理介面新增一組cname，如名稱是「 store 」CNAME的值則為「 store.example.com.s3.amazonaws.com 」 以上兩個步驟就完工了。 接著你就可以在瀏覽器輸入 store.example.com 這個網域看看有沒有問題。 如果出現404之類的狀態的話就代表你設定好， 請檢查上述設定是否有確實做好。

現在網站為了避免不必要的機器人進行一堆操作， 大多會要求使用者輸入指定圖片中的文字， 以作為對人類的考驗（？）。 若是操作者答錯的話， 程式端會認為彼端的操作者不是人類而是機器人就會拒絕接下來的操作。 這就是一般所稱呼的 CAPTCHA 。 當然啦， 隨著製造程式機器人的成本變低， 現在隨時都有一堆機器人覬覦某些網站， 被這些機器人盯上的話輕則被挖資料，重則...... 所以你或許有需要評估一下在自己的網站上使用CAPTCHA機制的需要性。 這也就是寫這篇文章的原因。 回到主題， 本文主要是講述 reCAPTCHA 在自家網站的應用。 那麼就開始教學（？）吧。 請先到 reCAPTCHA的網站 申請一組key（包含公鑰和私鑰其功能下述）， 申請完成後， 你可以到 這裡 抓個語言使用的plugin檔案， 並且應用在你的網站之中， 其使用方法在Google所提供的文件中都有述及， 所以就根據你常用的語言自己去參考文件吧～ （如果還有機會的話）下一篇會說明怎樣客製化這個reCAPTCHA輸入框， 以便符合你網站上的風格。