Victor Hung%27s Diary

「教學」使用 Facebook 帳號快速註冊登入 WordPress 網站

Victor Hung — Tue, 25 Jun 2019 12:00:57 +0000

曾經因為註冊要輸入太多資料覺得麻煩而直接關掉網頁嗎？架設了自己的網站或商城之後，是否擔心使用者也這樣對待你呢？本篇教您如何使用 Nextend Social Login 外掛來實現讓使用者以 Facebook 帳號，註冊、登入 WordPress 網站以及 WooCommerce 商城會員。

外掛網址
https://tw.wordpress.org/plugins/nextend-facebook-connect/

安裝完成之後來到設定頁，Nextend Social Login 支援 Facebook、Google、Twitter 等多種社群帳號登入，本篇以 Facebook 為例，點擊「Getting Started」開始

以臉書帳號登入 Facebook for Developers https://developers.facebook.com/apps/ 並「建立新的應用程式」填寫顯示名稱、聯絡電子郵件等資料，最後按「建立應用程式編號」接著在新增產品頁面選擇「Facebook 登入」並確認。

填寫「應用程式網域」只要網址中網域的部分即可，並在「隱私政策網址」填寫網站上隱私政策頁面的網址，如果沒有隱私政策頁面的話趕緊建立一個吧！填寫完成後記得「儲存變更」

回到網站後台，將 Getting Started 第 11 個步驟提供的 Valid OAuth redirect URIs 網址複製起來。

再回到 Facebook for Developers 在左側欄產品選擇「Facebook 登入」並按「設定」依照示範外掛 Nextend Social Login 提供的 Valid OAuth redirect URIs 網址，貼入「有效的 OAuth 重新導向 URI」欄位，最後「儲存變更」。

左邊側欄選擇「設定」按「基本資料」在這裡可以找到應用程式編號 App ID 跟應用程式密鑰 App Secret 複製起來。最後記得點一下右上方的開關「關閉（狀態：調整中）」打開，打開之後會顯示「開啟（狀態：已上線）」

回到網站後台將剛剛複製的應用程式編號 App ID 跟應用程式密鑰 App Secret 貼上、儲存設定。

此時驗證資訊已經儲存，按「Verify Settings」測試驗證。

此時會跳出臉書登入認證的地方，應該會正確顯示剛剛設定的 Facebook App 名稱、圖片以及要求取得的資訊，並且使用當前登入的個人 Facebook 帳號的身份繼續。如果沒登入臉書的話，則會先要求登入臉書。

繼續後如果驗證成功應該會跳回網站後台，提示驗證成功，但網站登入功能還沒啟用，按「Enable」啟用。

先登出網站或以無痕模式開啟網站後台，應該可以看到登入按鈕下方出現了「Continue with Facebook」的社群登入按鈕了。

在 Nextend Social Login 設定中 buttons 頁籤也可以將按鈕改為中文的自訂文字。

如果你架設了一個 WooCommerce 商城，可能對 YITH 這家外掛比較熟悉，所以如果使用 YITH WooCommerce Social Login 的使用者，也是一樣透過 Callback URL、App ID 以及 App Secret 來完成驗證設定，同樣適用本篇教學。

這篇文章「教學」使用 Facebook 帳號快速註冊登入 WordPress 網站最早出現於 TaskingHouse。

「教學」在 WordPress 網站上安裝新版 Messenger 聊天氣泡

Victor Hung — Tue, 15 Jan 2019 12:00:05 +0000

之前寫過一篇「用 FB2WP 將臉書 Messenger 聊天機器人加入 WordPress 網站」讓顧客能在網站上直接使用臉書訊息聯絡我們，最近筆者突然發現其中一個網站的聊天氣泡沒有顯示，查看 Console 發現可能是臉書有更新 SDK 或 API 所以原本的程式碼失效了。

看了一下其他網站，發現確實聊天氣泡的樣式也更新了。因此這篇就來分享如何用更簡單的方式，在網站上安裝新版 Messenger 聊天氣泡。

設定顧客洽談功能

首先我們到臉書粉絲專頁的後台，點選「設定」找到「Messenger 開放平台」

跳至「設定顧客洽談功能」區塊並點選「設定」

首先選擇語言，例如「中文(台灣)」並且設定問候語，也就是聊天氣泡跳出後顯示的訊息。

接著可以選擇回覆的時間，可以使用預設「自動設定回覆時間」讓臉書幫你計算，在這邊也可以設定聊天氣泡的主色系，方便搭配品牌或網站的視覺。

最後一個步驟非常重要，這邊必須填入你的網站網域名稱，有加入白名單的網域聊天氣泡才會正常顯示。設定完成後點選程式碼，複製到剪貼簿。

如果你是使用 WordPress 架設網站，筆者推薦「Insert Headers and Footers」這個外掛，將程式碼插入到網站的每個頁面中。臉書建議將程式碼插入在標籤後方，因此我們可以貼在 Scripts in Footer 的欄位。

現在到網站前台，確認聊天氣泡有沒有跳出來。

如果想要啟用聊天機器人的功能，或是在 WordPress 設定更進階的臉書功能，可以使用 Chun 開發的 FB2WP 的外掛，並督促作者常常更新外掛喔（無誤）

https://tw.wordpress.org/plugins/fb2wp-integration-tools/

這篇文章「教學」在 WordPress 網站上安裝新版 Messenger 聊天氣泡最早出現於 TaskingHouse。

「教學」透過臉書訊息下載完整尺寸的 IG 大頭貼

Victor Hung — Tue, 11 Dec 2018 12:00:13 +0000

上一篇教學中「教學」下載 IG 原圖：網址列加字取得 Instagram 高畫質照片透過官方的方法，直接在 Instagram 網頁版取得完整尺寸的貼文圖片，但個人資料大頭貼則沒有給到這麼高的解析度，即使是許多串接官方的 API 的 Instagram 下載網站，通常也無法取得完整尺寸的個人檔案照片。

包含 instadp 在內的幾個下載網站，其實都曾經支援下載完整尺寸的個人檔案照片，但這些功能時好時壞，原因可能是 Instagram 官方修改 API 規則，或是網站原本就是使用非正規的方式抓取資料，因此在官方把漏洞修復後就失效了。

但 Instagram 的母公司 Facebook 可能就不受這些 API 的規範所限制了，筆者發現透過 Facebook Messenger 分享 Instagram 的個人檔案，就可以透過臉書的權限來取得完整尺寸的 Instagram 個人檔案照片。

透過臉書訊息傳送 Instagram 個人檔案連結

以 Chrome 瀏覽器開啟 https://www.messenger.com/ 並將想要下載的 Instagram 個人檔案連結，透過臉書訊息傳送，傳給自己或任何人都可以。傳送完成後確認臉書自動產生了 Instagram 個人檔案的預覽。

透過 Chrome 開發者工取抓取圖片網址

選單位置在「檢視」－「開發人員選項」－「開發者工具」
也可以直接在要抓圖的網頁上按鍵盤快速鍵：
Windows Ctrl + Shift + I
Mac Command + Option + I

點選預覽的圖片，在開發者工具應該可以看到下方「Styles」頁籤，顯示藍色的圖片網址，在網址上按右鍵「Open in new tab」開啟圖片，此照片就是 Instagram 個人資料大頭貼的原圖。

從 Chrome 分頁上可以看到此範例 ID 所上傳的大頭貼相片解析度為 900×900，在照片上右鍵另存新檔即可下載。從網址列中可以看到 &w=960&h=960 這樣的字串，由此可猜測目前 Instagram 上傳大頭貼裁切的大小為 960×960（最大尺寸）

延伸閱讀

「教學」Chrome IG Story 如何從電腦下載 Instagram 限時動態

「教學」下載 IG 原圖：網址列加字取得 Instagram 高畫質照片

「教學」下載推特 Twitter 上傳的照片原始檔

這篇文章「教學」透過臉書訊息下載完整尺寸的 IG 大頭貼最早出現於 TaskingHouse。

「教學」用 FB2WP 將臉書 Messenger 聊天機器人加入 WordPress 網站

Victor Hung — Sat, 04 Aug 2018 05:27:32 +0000

在網站上安裝 Live Chat 線上客服可以留住一些懶得填寫表單或撰寫 Email 的客戶，線上 Live Chat 服務有很多選擇，例如常見的 Zendesk(Zopim)、台灣的 Cami、Kerebro 或免費的 Tawk.to，不過根據筆者自己的經驗，除了必須要安裝 Live Chat 自有的客服軟體（或一直開啟管理後台）而且若顧客使用 Live Chat 沒有即時得到回覆，之後再收到客服回覆的電子郵件，可能也不會繼續諮詢了。

如果是使用 Facebook Messenger 當作線上客服系統，首先臉書已經有很完善的粉絲專頁管理工具，只要有顧客傳送訊息，粉絲專頁管理員的裝置就會收到推播通知，可以即時回覆顧客。就算沒有即時回覆，顧客稍後還是會從電腦或手機的 Facebook Messenger 收到通知，相較電子郵件比較不容易被忽略。最值得一提的是，目前 Facebook Messenger 還可以達到基本的自動回覆功能，也就是這幾年很熱門的聊天機器人，絕對是維持顧客關係的一大利器。

原本安裝與設定 Customer Chat Plugin (顧客洽談外掛程式) 還是多少需要一點程式概念，不過現在透過 Chun 開發的 FB2WP 的外掛，就可以輕鬆的在 WordPress 後台安裝與設定 Customer Chat Plugin。

安裝 FB2WP 外掛

直接在安裝外掛頁面搜尋 FB2WP 就可以找到啦！

XX2WP Integration Tools

或是直接點連結也可以下載。

設定 Facebook App

在 FB2WP 的設定中，最重要的就是這四個欄位：

應用程式編號
應用程式密鑰
粉絲頁編號
粉絲頁應用程式授權碼

那我們在哪裡可以找到這些東西呢？就跟著本文一步一步來設定吧！

建立臉書應用程式

目前 Messenger 開放平台是透過臉書應用程式管理的，因此我們可以用臉書帳號登入 Facebook for Developers 來建立新的應用程式。網址是：https://developers.facebook.com/ 登入後點擊上方我的應用程式、新增應用程式。

接著設定應用程式的名稱，例如：大頭的部落格，聯絡電子郵件就填寫工作用或慣用的電子郵件即可。最後點選「建立應用程式編號」

進入到應用程式頁面後，新增「Messenger」功能，在「Messenger」下方點選「設定」

應用程式編號

還記得剛剛 FB2WP 的設定中，要填寫的第一個欄位就是應用程式編號，你可能已經看到了，就在應用程式頁面的上方，點擊就可以複製。

應用程式密鑰

在左側選單、設定、基本資料，應用程式編號的右邊，可以找到應用程式密鑰的欄位，預設是隱藏起來的，點選右側的「顯示」輸入臉書密碼驗證後，就可以顯示了，一樣複製貼回到 FB2WP 設定。

粉絲頁編號

接著，因為是透過 Facebook Messenger 回覆顧客，因此勢必要以粉絲專頁的身份來回覆，粉絲專頁你應該已經有了，在粉絲專頁的「關於」頁面最下方可以找到粉絲專頁編號。

粉絲頁應用程式授權碼

回到剛剛的 Facebook for Developers 應用程式頁面，點選左側選單、Messenger、設定，找到「權杖產生」的區塊，從下拉式選單選擇要使用的粉絲專頁，這時會跳出確認授權的視窗：

這邊授權的權限，大致上就是應用程式可以使用粉絲專頁的權限與顧客傳送訊息，並且取得一些顧客的基本資料。

確認權限之後產生出一長串的存取權杖，對了，這就是所謂的「粉絲頁應用程式授權碼」請複製起來並回到 FB2WP 設定貼上吧！

Facebook Webhooks 設定

接著來到 FB2WP 第二個頁籤，Facebook Webhooks 設定，這邊 FB2WP 已經自動產生一個回呼網址，你只要在想一個回呼驗證權杖就可以了，這邊沒有什麼限制，隨便一個單字都可以，例如：apple、banana，隨便就好了。

再回到 Facebook for Developers 應用程式頁面，剛剛「權杖產生」區塊下方，可以找到「設定 Webhooks」的按鈕，點選，並貼上 FB2WP 自動產生的回呼網址，以及剛剛隨便想的單字驗證權杖。

接著很重要，在訂閱欄位中，我們要勾選訂閱 messages、messaging_postbacks、standby、messaging_handovers 這四個事件，其實在 FB2WP 上面還有提到 conversations、feed、ratings，但這三個必須要在 Facebook for Developers 的 Webhook 功能另外設定，因此我們就先勾選前面四個。

最後點選「驗證並儲存」

這樣子 Webhooks 就驗證完成了。

接著在下拉式選單選擇粉絲專頁，訂閱。

設定 Messenger 開放平台

回到粉絲專頁設定，點選 Messenger 開放平台

回覆方式

在一般設定中，如果之後想要設定聊天機器人的話，回覆方式可以選擇「回覆有部分是自動操作，並以部分人工操作輔助」若是單純管理員人工回覆，也可以選擇「所有回覆都是由真人提供」

剛剛在應用程式 Webhooks 設定中有訂閱粉絲專頁了，如果沒有出現，可以在下方「連結應用程式到你的粉絲專頁」用應用程式編號，把應用程式加入。此時將應用程式設為 Primary Receriver；Page Inbox 則設為 Secondary Receriver。

允許網域

這也是相當重要的一個步驟，在下方「允許清單中的網域」欄位將「網站的網址」加入並儲存。

其實照理說到這個步驟完成後，Customer Chat Plugin 應該已經可以正常使用了，但是在近期臉書隱私問題大地震，臉書開發者權限也跟著大混亂，因此做到這邊，網站前台還是會發生錯誤，聊天視窗是無法正常顯示的。

設定顧客洽談外掛程式

我們回到粉絲專頁的 Messenger 開放平台

找到「顧客洽談外掛程式」區塊，點選「設定」

語言選擇「中文(台灣)」，問候訊息等一下我們可以使用 FB2WP 來設定，可以先跳過，點選「繼續」

回覆時間可以使用預設的「自動設定回覆時間」，外觀一樣可以等一下使用 FB2WP 來設定，點選「繼續」

再次貼上網站的網址並儲存。程式碼的部分 FB2WP 那邊已經處理好了，所以也不需要複製，直接點選「完成」

大功告成

前台成功出現顧客洽談外掛程式了，包含了預設的問候語跟臉書代表色。

在 FB2WP 的 Facebook 外掛功能設定中，我們可以更改問候語以及外觀顏色。

更改之後的樣子

顧客點選開始洽談後，就可以直接與粉絲專頁對話。

粉絲專頁管理員則會收到通知，並且可以在網頁收件匣或手機應用程式回覆顧客，右側也會顯示顧客的基本資料，如果是有進行銷售，追蹤付款與備註的這些功能也相當完善。

包含輸入中、已讀功能在前台都能正常向顧客顯示。

本文示範圖檔所使用的帳戶、使用者、粉絲專頁以及應用程式名稱、編號等資訊經過變造，以及隨臉書應用程式、粉絲專頁或外掛改版，可能會造成內容與介面與本文有些許不同，請自行對照當前版本。

這篇文章「教學」用 FB2WP 將臉書 Messenger 聊天機器人加入 WordPress 網站最早出現於 TaskingHouse。