:::

訂製Facebook分享連結:Facebook 分享連結產生器 / How to Share to Facebook with Custom Parameters: Facebook Share Link Builder

image

作為一位網站管理者,總是希望使用者可以更容易地將網站訊息分享到Facebook上。除了使用AddThisSumoMe之外,我們也可以直接使用網址來開啟分享到Facebook的功能,還能夠客製化引言、圖片、網址標題、網址介紹、網站標題等資訊,讓使用者分享訊息更為搶眼喔!

我參考「Share to Facebook with custom parameters」這篇的做法,製作了一個「Facebook 分享連結產生器」供大家使用,讓大家也能夠提升社群媒體的整合力吧!


Facebook分享連結產生器 / Facebook Share Link Builder


小結 / In Closing

關於使用Facebook分享資料的做法,大致上有兩種:sharer.php跟Facebook應用程式。

在這篇「Facebook 分享連結產生器」使用的是連線到 https://www.facebook.com/sharer/sharer.php?u=[URL] 的傳統做法。比較簡單,但是這個網址可接受的參數似乎一直在改。有些早期的做法是使用p[url]這種的參數,例如「Facebook share button and custom text」這篇,但這種做法已經無法正常運作。這種傳統做法現在是使用u、title等參數,其中「Share to Facebook with custom parameters」是我看過最完整的使用介紹。可惜該網頁的介面不太容易操作,所以我乾脆另外自己寫一個給大家用。

另一種做法是使用Facebook的SDK,以FB.ui()來開啟分享的視窗。這做法在Facebook開發者官方的網頁「Dialogs」上有詳細的敘述。我本來也想要用這種方式來作,但開始設定的時候發現困難重重。要使用SDK必須先申請Facebook開發者、建立Facebook應用程式。而Facebook的應用程式會限制可分享的網域,必須是Facebook認證的網域才能拿來分享。因為我有需要分享不固定網域的需求,這種在應用程式上的分享方式就不太適合我,因此作罷。

image

這個「Facebook 分享連結產生器」所應用的第一個作品是「滑塊拼圖遊戲 Image Puzzle」,大家有興趣的話也可以來玩玩看滑塊拼圖,並且幫我分享到Facebook吧。

總共5 則留言, (我要發問)

  1. 有可能寫成通用的 bookmarklet 嗎? (不用填表格, 可以像 https://chrome.google.com/webstore/detail/share-to-facebook/kbgplcfihfeioiaddclapccnefggiddn?utm_source=chrome-app-launcher-info-dialog 的使用方式一樣)

    回覆刪除
    回覆
    1. 可以啊,換成locatio.href就可以了

      在書籤列加入這段JavaScript的按鈕吧:

      ````js
      javascript:window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURI(location.href), "_blank", "toolbar=0,status=0")
      ````

      刪除
  2. 布丁大,請問如何在blogger上實現類似這篇文章的線上工具功能?

    回覆刪除
  3. 你好,

    請使用iframe
    https://www.w3schools.com/tags/tag_iframe.asp

    回覆刪除
    回覆
    1. 了解,謝謝布丁大迅速回覆

      刪除

留言工具: