:::

訂製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吧。

總共7 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  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. 了解,謝謝布丁大迅速回覆

      刪除
  4. 打擾了,想請教一下測試您的產生器,發現分享時顯示的縮圖並非您範例內指定的「http://lh3.googleusercontent.com/-6qwdHih3tFk/Vv6N0dTaICI/AAAAAAACuRA/AsKTNm9c_Bg/s0/post-avatar.png」,而是其他預覽圖,這是什麼原因呢?

    另一方面,若將產生器稍微修改僅將網址換為「https://www.google.com」,分享時則不會有任何預覽圖片,請問如果要產生預覽圖片、自訂標題、自訂描述,這個要件是什麼?謝謝。

    回覆刪除
    回覆
    1. 您好,

      Facebook修改了API,這個方法現在沒辦法指定縮圖。

      Facebook會抓取網站裡面的內容,找出最適合的圖片作為網址的縮圖。
      如果網頁裡面有指定Facebook偏好的<meta>標籤,那Facebook會優先抓取標籤內的參數,例如:
      <meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

      詳細資訊請參考Facebook的說明:
      https://developers.facebook.com/docs/sharing/webmasters/

      如果在Facebook分享網址時,它沒有抓到任何預覽圖片
      表示該網頁預設是不提供圖片給Facebook的爬蟲抓取
      很多使用AJAX動態產生、變化的網頁都有這種設計

      刪除