知名留言板外掛大多會提供圖片附件功能,例如 FB、Disqus。「一圖勝過千言萬語」,有時沒有圖片的輔助,任憑提問者花了再多文字描述,也不一定能表達出完整的原意。
雖然幾年前就想研發 Blogger 留言上傳圖片的功能,但無奈工程太過複雜。後來終於找到關鍵技術,不過又一直有事耽擱,直到現在才有機會把功能整理出來。
那麼本篇就來說明操作的方法,及簡單介紹原理。
(圖片出處: 699pic.com)
在本站的留言框上方,會看到兩行資訊:
雖然第一行資訊特別用紅字標示提問請「詳細描述狀況,並附網址或截圖」,不過還是很多讀者似乎看不到這訊息?還請麻煩提問時填寫相關網址,否則 WFU 是不會心靈感應的。
原本請留言者附截圖並不是件容易的事,不過現在第二行多了一個「上傳圖片」的按鈕,這下方便許多,按下去就對了!
選擇圖片後,會自動上傳到 Picasa 圖床,請稍待幾秒,完成上傳後就會出現上圖:
使用說明很簡單,需要注意的事項也很少:
對這個按鈕出現的位置有興趣的話,可參考「讓 Blogger 留言注意事項能隨留言框移動」
想讓留言內容的連結網址,自動顯示圖片,可參考這篇「讓 Blogger 留言能顯示圖片及 Youtube 影片﹍將網址字串轉換為圖片」。
以上為主要內容,接下來的技術原理提供給有興趣的站長瞭解。
1. 上傳的圖片是存放在 Picasa 圖床,而 Picasa API 現在已經終止「新增相簿」的功能了,所以只能選擇舊有的相簿來存放圖片。
2. 想要選擇 Picasa 舊相簿來存放,得先知道舊相簿的 ID,可參考「其實 Google 相簿依然是 Picasa,你可能不太相信」→「二、Google 相簿的 RSS Feed」,利用「Google Photos RSSerator」這個網站的工具來找到。
3. 操作 Picasa API 無法由前端完成,官方只提供了 Server 端的 API,所以站長想要實現上傳圖片的功能,得瞭解後端的語言。
4. Blogger 後台、「Open Live Writer」等等能夠上傳圖片到 Picasa,都得連到後端主機,才能操作 Picasa API。
5. Picasa 官方提供的「API 說明書」非常詳細,但做起來很難,只建議工程師研究,一般人不建議。
雖然幾年前就想研發 Blogger 留言上傳圖片的功能,但無奈工程太過複雜。後來終於找到關鍵技術,不過又一直有事耽擱,直到現在才有機會把功能整理出來。
那麼本篇就來說明操作的方法,及簡單介紹原理。
(圖片出處: 699pic.com)
一、使用說明
在本站的留言框上方,會看到兩行資訊:
雖然第一行資訊特別用紅字標示提問請「詳細描述狀況,並附網址或截圖」,不過還是很多讀者似乎看不到這訊息?還請麻煩提問時填寫相關網址,否則 WFU 是不會心靈感應的。
原本請留言者附截圖並不是件容易的事,不過現在第二行多了一個「上傳圖片」的按鈕,這下方便許多,按下去就對了!
選擇圖片後,會自動上傳到 Picasa 圖床,請稍待幾秒,完成上傳後就會出現上圖:
- 畫面會顯示這張圖的連結網址,並且已經自動選取文字
- 請按紅字說明進行複製,並貼在留言框中即可
- 想確認上傳的圖片是否正確,直接點擊圖片網址,會另開視窗顯示圖片
二、注意事項
使用說明很簡單,需要注意的事項也很少:
- 應該不會有人特地拿這個工具來製作自己使用的圖片連結才是(用自己的 Blogger 後台上傳還比較方便),不過我還是做了上傳次數的限制
- 最多可以上傳 3 次圖片
- 如果真的一次留言要超過 3 張圖片,只好麻煩分批留言了
- 貼到留言框的圖片網址,會自動變成超連結,所以不必再另外使用 A 標籤語法
對這個按鈕出現的位置有興趣的話,可參考「讓 Blogger 留言注意事項能隨留言框移動」
想讓留言內容的連結網址,自動顯示圖片,可參考這篇「讓 Blogger 留言能顯示圖片及 Youtube 影片﹍將網址字串轉換為圖片」。
三、技術說明
以上為主要內容,接下來的技術原理提供給有興趣的站長瞭解。
1. 上傳的圖片是存放在 Picasa 圖床,而 Picasa API 現在已經終止「新增相簿」的功能了,所以只能選擇舊有的相簿來存放圖片。
2. 想要選擇 Picasa 舊相簿來存放,得先知道舊相簿的 ID,可參考「其實 Google 相簿依然是 Picasa,你可能不太相信」→「二、Google 相簿的 RSS Feed」,利用「Google Photos RSSerator」這個網站的工具來找到。
3. 操作 Picasa API 無法由前端完成,官方只提供了 Server 端的 API,所以站長想要實現上傳圖片的功能,得瞭解後端的語言。
4. Blogger 後台、「Open Live Writer」等等能夠上傳圖片到 Picasa,都得連到後端主機,才能操作 Picasa API。
5. Picasa 官方提供的「API 說明書」非常詳細,但做起來很難,只建議工程師研究,一般人不建議。
更多 Blogger 留言相關工具: