2017年9月20日

本站 Blogger 開放留言上傳圖片功能

本站 Blogger 開放留言上傳圖片功能

Wayne Fu 0 A+
blogger-comment-upload-image.jpg-本站 Blogger 開放留言上傳圖片功能知名留言板外掛大多會提供圖片附件功能,例如 FB、Disqus。「一圖勝過千言萬語」,有時沒有圖片的輔助,任憑提問者花了再多文字描述,也不一定能表達出完整的原意。

雖然幾年前就想研發 Blogger 留言上傳圖片的功能,但無奈工程太過複雜。後來終於找到關鍵技術,不過又一直有事耽擱,直到現在才有機會把功能整理出來。

那麼本篇就來說明操作的方法,及簡單介紹原理。

(圖片出處: 699pic.com)


一、使用說明


在本站的留言框上方,會看到兩行資訊:


blogger-comment-upload-image-1.png-本站 Blogger 開放留言上傳圖片功能

雖然第一行資訊特別用紅字標示提問請「詳細描述狀況,並附網址或截圖」,不過還是很多讀者似乎看不到這訊息?還請麻煩提問時填寫相關網址,否則 WFU 是不會心靈感應的。

原本請留言者附截圖並不是件容易的事,不過現在第二行多了一個「上傳圖片」的按鈕,這下方便許多,按下去就對了!


blogger-comment-upload-image-2.png-本站 Blogger 開放留言上傳圖片功能

選擇圖片後,會自動上傳到 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 留言相關工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

3 則留言:

  1. 留言可以附圖,感覺人性化好多

    回覆刪除
  2. https://drive.google.com/file/d/1_eZPLF4lfY_JwV_TwIp-cnrCNjG2E4zR/view?usp=drivesdk
    測試一下附圖的結果

    回覆刪除
  3. https://drive.google.com/file/d/1DNB-aprxBRmO5_pYa-Lc2Zyi5ICj8INc/view?usp=drivesdk

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP