WFU

2015年6月2日

臉書小樂趣:建立屬於你的絕對領域!

絶対領域 @ Wikipedia via CC BY-SA 3.0 it

「勳哥,有沒有辦法按下部落格文章下方臉書分享按鈕、貼到臉書後,可以顯示《心外金城武》呢?」楊智鈞醫師繼續說:「就像顯示新思惟國際那樣。」


「水!這個想法不錯唷。」楊醫師這個點子引起我的興趣。

打破規則才有趣  樂在其中創領域


最近臉書可能改變 social plugins 顯示規則,有點類似分享實名制的感覺。既然要打卡(貼文地點名稱),不如創造有個性的自我絕對領域

所以,就這樣做一下、那樣弄一下,讓楊智鈞醫師華麗變身「心外金城武」。XD

而且,按下「心外金城武」,還會連回楊智鈞醫師部落格

(點擊圖像可放大)

經過臉友們實測(這樣這樣這樣那樣),這類顯示與外連,通常只在桌機有用;各類移動裝置與軟體過於多元碎片化,不見得會出現。

我也建立自己的絕對領域,顯示如下:

細節決定專業:網站設計之自訂文章永久連結

如何搞定這種有趣小設定?


首先,您需要有 Facebook App ID,相關設定詳見《[教學]如何申請建立 Facebook APP ID 應用程式 ID?〉一文。

過程中,點選左側欄位之「設定」,將您想要設定的文字填入底下紅框處:

在 Display Name 填入相關顯示文字,記得儲存變更(點擊圖像可放大)。

「網站 URL」與「Mobile Site URL」欄位,請填入您的網站或部落格網址。

最大重點是:記得啟動您剛剛新增的臉書 App

(某晚,忘記查核這件事,在此卡關許久。自有 app 原已啟動,後來新增 app 可能不會自行啟動 。經反覆交叉比對與實驗,最後才發現這個問題。在此,感謝熬夜陪測的諸位臉友。)

以「心外金城武」app 來說,點選左側欄位之「Dashboatrd」,若成功啟動,會顯示綠燈與「This app is public and available to all users」,如下圖:

App 成功啟動的樣態(點擊圖像可放大)

若發現下圖狀態,表示 app 仍未啟動:

App 仍未啟動的樣態(點擊圖像可放大)

此時,請點選「This app is in development mode」旁之問號,將 NO 切換成 YES 即可,如下圖:

請切換 NO 為 YES(點擊圖像可放大)

再來,部落格或網站需要安裝臉書「讚」與「分享」按鈕;相關設定可參閱臉書官方文件 Social Plugins 的 Like Button for the Web;或者,網路上有不少說明資料可以參考,這邊就給他發懶一下。XD

最後,就是在 plugin code 填入您自己申請的臉書 App ID 號碼即可。

如何在 Blogger 修改 appID?


那就以我的 Blogger 做示範。

進入後台,請先備份您的範本,因為底下步驟,屬於危險動作。XD

在後台左側欄位選擇「範本」,再按下「編輯 HTML」按鈕,如下:

(點擊圖像可放大)

此時,會進入下面這個畫面:

(點擊圖像可放大)

在程式碼框框內按下組合鍵(「Control + F」on Windows Chrome;「Command + F」on Mac Chrome)啟動搜尋框,輸入「appID」,就會找到底下黃色反白處,將後面的號碼(此例為 12006281200628,您原本的號碼一定不是這個 XD),改為您剛申請的臉書 App ID 號碼,最後按下「儲存範本」按鈕即可。

是的,就這樣成功建立屬於你的絕對領域!

當然,也歡迎來我的臉書絕對領域討論討論