Facebook

使用 React Native 與 Amazon Cognito 實作 Google & Facebook 登入的功能

Standard

最近開始接觸 React Native 的專案了，能用前端技術跟知識同時開發 iOS/Android App 滿新奇的！雖然缺乏原生 App 的知識讓我踩了不少坑，其中不少還是非常低能的坑 XD！

這次實作的任務是要在 App 加上 Google/Facebook 登入的功能，而會員系統是建構在 Amazon Cognito 上面的，再加上 React Native 的相關套件 – react-native-facebook-login 及 react-native-google-signin 來實作 App 中的登入功能。其中有些設定上的眉角讓我花了不少時間嘗試，所以整理成本篇的筆記備忘囉～

本文大綱

本篇文章滿長的，所以先整理大綱在此，了解一下會介紹到的部份：

  • 本文的套件版本
  • AWS SDK React Native 與 Amazon Cognito
  • react-native-facebook-login
  • react-native-google-signin
  • 繼續未完的 Amazon Cognito 設定
  • 前端程式
  • 疑難排解
  • 用 Amazon Lambda 來做 Serverless API
  • Amazon API Gateway
  • 在 App 端補上註冊（register）的 function
  • Source Code
  • 參考資料

Continue reading

Pages: 1 2 3 4 5

關於 AppLinks 兩三事

Standard

App Links

前言

在行動裝置時代，使用者更常停留在 App 中瀏覽資訊（像是 Facebook），而相對地在 Web 的停留時間就降低了。過去我們在 Web 上透過超連結搭起不同網站之間的橋，而在 App 與 App 之間又如何做到這件事呢？

當然，我們可以透過 URL Scheme 開啟應用程式，但我們並無法得知世上每個 App 的 URL Scheme，甚至是應用程式某個頁面 Deep Link 的 Scheme，而且萬一哪天增修了那又該如何？

我最近一部分的工作就在研究如何加強 App 於 Mobile Web 上的連結體驗，其實各大廠早提出了自己的構想及標準，例如 Google 提出的 App Indexing，以及 Facebook 提出的 App Links。

今天就 App Links 的部份做個簡單筆記與實作參考。App Indexing 等下次有空再寫文介紹囉。

Continue reading

[Android] Facebook Home 試用，以及修改裝置名稱以安裝至 SAMSUNG S2 (i9100) 的方法

Standard

上週 Facebook 發表 Facebook Home，而於美國時間 04/12 已上架至 Google Play，但根據官方網頁消息，目前支援的機型僅有：HTC One X、HTC One X+、Samsung GALAXY S III 以及 Samsung GALAXY Note II 等。不過今天一早已經發現網上有 Facebook Home 的 apk 流出版，便下載來嘗鮮體驗看看。（筆者註：流出版的 apk 無法保證其安全性，請自行斟酌是否要下載安裝）

 

我使用的是 Samsung GALAXY S II (i9100)，並不在官方宣稱的支援機種內，故就算安裝完 Facebook Home apk 後開啟（同時也請記得從 Google Play 更新 Facebook 與 Facebook 即時通喔！），僅能看到這個畫面：

謝謝你安裝 Facebook Home。目前你的裝置尚未被支援，一旦 Facebook Home 可在你的裝置上使用，你將會收到通知。

 

還是很想試用看看的話，就得修改 Android 裝置名稱來欺騙應用程式，讓其認為這支手機是支援的機型囉！
不過必須要 root 才能進行系統檔案的修改，至於是否值得為此去 root 與冒修改系統檔案的風險，就留給讀者自己評估囉。

Continue reading

[Facebook][Javascript] Facebook 按讚鈕預設隱藏，而後顯示卻在 IE / Firefox 中無法顯示的解法

Standard

上週在做個活動案時，有個需求是希望使用者必須是某個 Facebook 專頁的粉絲才能進行遊戲，若尚未成為粉絲，則立即用 Lightbox 方式顯示按讚鈕讓使用者按讚，「讚」完就可以進入遊戲。

是個相當單純的需求，不過有個需要特別注意的地方：若一開始用 CSS 讓放置按讚鈕的容器（如 div）為 display: none;，而後才讓其顯示（本例是透過 jQuery 的 $(element).show()）的話，在 Internet Explorer 與 Firefox 上會無法讓按讚鈕顯示出來，而 Google Chrome 卻可以。

情況如圖：

可以在檢測元素工具中觀察到，Internet Explorer 與 Mozilla Firefox 瀏覽時，在容器被 show() 時，按讚元素的寬高仍為 0，但 Google Chrome 是正常的寬高。

翻閱了 Facebook Developer 文件中提到 FB.XFBML.parse() 方法可重新解析頁面（或指定）的元素，讓 Facebook 的外掛元件得以重新被解析一次。

果然，在主控台中手動呼叫該方法後，按讚框成功地顯示出來了！

Continue reading

[Facebook][C#] 透過 Graph API 上傳照片至粉絲專頁（Page）並將之設為封面照片（Cover）

Standard

最近看到一個有趣的 Facebook 網路行銷案例，是 Nescafe 的 Facebook 粉絲專頁活動。它們的封面照片（Cover）一開始是一張滿是咖啡豆的圖片，隨著粉絲數的增加，封面照片的咖啡豆會越來越少，最後會露出它們的新產品。
影片在這：

從技術端來看，就對「如何自動更換粉絲專頁的封面照片」這件事感到好奇了。當然粉絲數增加不快的話，用手動換也是可行的，但我想應該還能串上其他的應用吧！讓換粉絲專頁的封面照片是即時又有趣的。

總之來看如何實作囉。

Continue reading

[Facebook][ASP.NET] 透過 signed_request 變數取得應用程式於粉絲專頁中的資訊（是否已按讚、傳遞參數）

Standard

這東西應該很久了，但最近有這個需求就做一下筆記囉。

我們在製作 Facebook 粉絲專頁的頁籤應用程式時，會有傳遞參數的需求，但若用一般方式丟參數進去，會發現接不到 :/

https://www.facebook.com/{page_id}?sk=app_{app_id}&key=value

這樣是不行的…

上 stackoverflow 找了一下，原來要透過 app_data 這個參數丟，並透過 signed_request 去解析。

是這樣丟的：

https://www.facebook.com/{page_id}?sk=app_{app_id}&app_data={"key1":"value1","key2":"value2"}

Continue reading

[Facebook][jQuery] 讓「讚」顯示完整的數字

Standard

我們在網頁中嵌入 Facebook 的「讚」按鈕，當被讚超過一定數量，就不會顯示明確的數字，如下圖：

但這個案子希望能顯示完整的數字，要怎麼解決呢？

對了，順帶一提，「讚」的數字包含「讚」以及「分享」次數。（ The count on the Like button will include all likes and shares — from Faceook Developer, Like Button）

 

思路是這樣，將原有的數字藏起來，然後加入我們用 Graph API 查詢出來的明確數字，噢對，你還得準備數字對話泡泡的圖檔。

註：不知道這樣的解法是否有違反 Facebook 使用規範 品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕 中的「你可以依照所需調整大小，但是不能以其他任何形式修改「讚」按鈕 （如變動設計樣式）」。

Continue reading

[Facebook] Open Graph（開放社交關係圖） 動作設定教學

Standard

Facebook 於 2011/09/23 發佈了新的 Open Graph 開發者教學，在應用程式中出現了 Open Graph（開放社交關係圖） 頁籤，項目相當多，因此快速做了簡單的翻譯，方便未來研究之用。

其中此篇便是讓使用者可以使用各種「動作」的新功能，就像除了某某某覺得什麼很「讚」之外，還可以增加 某某某 listen to 某專輯、某某某 cook 一道菜 這樣的動作。
這邊有相關的介紹。
※不過很可惜的是目前尚不支援中文的動作與物件。

翻譯功力尚淺，請各位前輩不吝指正，也歡迎同好一起討論：）

這份教學將會帶領你照著下面步驟建立、測試、發佈你的第一個 Open Graph 應用程式。我們會建立一個讓使用者發佈料理資訊的範例應用程式。

如果你對 Open Graph 有疑問，請造訪: Debug and Troubleshoot。為了讓你更快上手，我們亦提供了 範例 下載。

Continue reading

Facebook 政策條款的案例與解釋

Standard

2012 更新：
目前官方也有中文版囉！小弟翻譯的這篇，就當作參考吧~

==

由於前陣子做的案子(Facebook App)動不動就被刪掉，Facebook 官方判斷應用程式是否違規的準則究竟為何實在沒個準，因此就來稍微整理一下官方文件中關於 policy 的案例與解釋。
（雖然有些時候根本就是誤判，沒什麼違反的也被刪除，但還是整理一下以供參考吧）

PS. 請原諒小弟的英文能力 2266，若有翻譯錯誤或不洽當的請不吝告知。也希望這篇相關規定能在實際製作 Facebook App 上幫助各位避開違反規定的條款。

主要分為 廣告、「讚」按鈕、照片、發佈訊息、條款與商標 四大單元。
Continue reading