沒穿方服

備料

在 React 專案，採用 Floating UI 的 FloatingPortal 作為圖片容器，用一個 atom 記錄目前要預覽的 URL，然後在 <a> 的 mouse 事件操作它們。

根據所在連結的 URL 判斷是否為圖片，是的話就載入，onLoad 時設定維度，讓 Floating UI 自己判斷位置。

打磨

• 問題：圖片在畫面邊緣會跳動

  圖片切到畫面邊緣時，Floating UI 會嘗試重新定位，造成跳動。

  更糟的是，因為 mouseover 會更新滑鼠位置，而且「載入中」的圖片尺寸、載入後的圖片尺寸調整都會變更最終維度，以致跳動可能循環，看起來就是不斷抖動。

  不好解決，最後用騙的，把容器的 pointer-events 關掉避免重複滑鼠事件，再用 CSS 動畫讓圖片先保持透明，100 ms 後才看得見，這時閃爍多半也結束了。

  參考 commit 817b816。

• 問題：手機上沒有 mouse 事件

  手機上無法用 mouseover/mouseout 事件來偵測到需要預覽，會變成 touch 的時候啟動預覽。

  雖然仍有基本可用性，但無法用 mouseout 關閉預覽，且再度 touch 時，到底會再度預覽，還是變成 touch 連結而開啟，行為差異很細微，使用者難以預期。

  解決方式是另外處理 touch 事件（onTouchStart, onTouchEnd, onTouchCancel），自己處理預覽行為，唯有當 touch 按住超過一定時間後，才交還瀏覽器內建的處理器（打開連結）。

  參考 commit dbf3fe4 和 3d56fce。

成果

這個功能做在 Feeders 事實選集和地圖留言中，原始碼都在 GitHub。

成果

Greasyfork → Facebook 取得帶標題連結，原始碼也放在 GitHub。

在頂端塞一個小元件，把文章的「時間戳記連結」拖曳進去，就會找出「帶標題的連結」，顯示在一個小對話框，可以複製 HTML。

研究

每篇貼文的連結 URL，大家都是由網頁上「時間戳記」的部分取得（臉書主要只曝露在這裡），然而根據貼文露出方式（在動態牆、彈出對話框、影片推廣等），同一篇貼文有多種不同連結，點進去看到的可能也不一樣。

只能盡量列舉處理，想辦法轉換成「標題最完整」的連結構造。

也參考 Facebook 登入牆移除器（有提供「永久連結／標準網址」功能）已處理的各種格式，它還有從網頁 meta 甚至 JS relay（臉書的內部實作）偵測標準連結的實作（我沒有做）。

目前已知的格式

• 使用者貼文 /{user}/posts/{id}

  例如 https://www.facebook.com/twreporter/posts/pfbid0bDDP6YCaEfULbAjBruvVbHVySX2iemoHCQRnaeKipNtbpDcx2Tz71WUqDnQZdWDTl?__cft__[0]={省略}&__tn__={省略}

  把追蹤參數移除即可，標準網址為： https://www.facebook.com/twreporter/posts/pfbid0bDDP6YCaEfULbAjBruvVbHVySX2iemoHCQRnaeKipNtbpDcx2Tz71WUqDnQZdWDTl

• 群組內的貼文 /groups/{group}/posts/{id}

  例如 https://www.facebook.com/groups/Show.YMSNP/posts/1532962150583712/?__cft__[0]={省略}&__tn__={省略}

  也是移除追蹤參數即可。

• 有永久連結參數 /groups/{group}/?multi_permalinks={id}

  例如 https://www.facebook.com/groups/667899516591545/?multi_permalinks=26147630041525142&notif_id={省略}&notif_t=feedback_reaction_generic&ref=notif

  移除追蹤參數，並統一轉為 posts/{postId} 格式： https://www.facebook.com/groups/667899516591545/posts/26147630041525142

• 影片：Reel /reel/{id}

  例如 https://www.facebook.com/reel/1421756105769991/?__cft__[0]={省略}&__tn__={省略}

  移除追蹤參數，並統一轉為 video.php?v= 格式： https://www.facebook.com/video.php?v=1421756105769991

• 影片：Watch /watch/?v={id}

  例如 https://www.facebook.com/watch/?v=1221241823458045

  移除追蹤參數，並統一轉為 video.php?v= 格式： https://www.facebook.com/video.php?v=1221241823458045

• 影片：使用者貼文 /{user}/videos/{id}/

  例如 https://www.facebook.com/FANCA.Taiwan/videos/653740892754035/

  這個形式帶有 user 資訊，比前面只有 id 的品質好，所以移除參數即可，盡量保留原狀。

無能為力

• 時間戳記的卵連結

  從「時間戳記」取得連結有一個限制，就是連結剛出現時，上面 URL 的值是隱蔽、編碼過的，這是臉書的設計，要等使用者互動時（例如滑鼠移到該連結上）才會動態變換為我們要的 URL。

  沒辦法，只好麻煩使用者手動滑一下。

• 實在抓不到標題

  前面的研究，最後仍無法 100% 應付所有情境，有發現一些貼文出現在首頁動態牆時，看起來是有文字敘述的，但從那個連結就是只能連到降級的網頁，除非進入貼文作者的頁面找出原文，否則就是拿不到文字。

  不強求，只要最後拿到標題仍是「Facebook」這樣，就放棄，顯示警告就是了：