Titanium JIRA Archive
Appcelerator Modules (MOD)

[MOD-2180] Ti.Facebook: Support messenger API's

GitHub Issuen/a
TypeImprovement
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2016-03-09T17:44:56.000+0000
Affected Version/sn/a
Fix Version/sRelease 5.4.0
ComponentsFacebook
Labelsandroid, facebook, ios
ReporterHans Knöchel
AssigneeHans Knöchel
Created2015-12-15T21:26:04.000+0000
Updated2018-08-06T17:49:34.000+0000

Description

We should support the FBSDKMessanger API described [here](https://developers.facebook.com/docs/messenger/overview). Primary features: - Share to messenger - [Example](https://scontent-frt3-1.xx.fbcdn.net/hphotos-xat1/t39.2178-6/11409205_307418696049199_2060123166_n.png) - Messenger Button - [Example](https://scontent-frt3-1.xx.fbcdn.net/hphotos-xtp1/t39.2178-6/11405237_1630498610538936_1982804213_n.png) - URL Handling - [Example](https://scontent-frt3-1.xx.fbcdn.net/hphotos-xfp1/t39.2178-6/11057186_656472024481466_949237797_n.png)

Comments

  1. Hans Knöchel 2015-12-15

    /cc [~msamah], [~cng]
  2. Hans Knöchel 2016-02-05

    PR: https://github.com/appcelerator-modules/ti.facebook/pull/43 Features: Messenger buttons, messenger send dialog, messenger media share, invite dialog.
  3. Hans Knöchel 2016-02-23

    Will also include the changes from MOD-2200.
  4. Hans Knöchel 2016-02-24

    The PR is ready for review, demo:
       var FB = require("facebook");
       
       FB.addEventListener("requestDialogCompleted", function(e) {
           Ti.API.warn(e);
       })
       
       var win = Ti.UI.createWindow({
         backgroundColor : "#fff",
         layout: "vertical"
       });
       
       addButtonWithModeAndStyle(FB.MESSENGER_BUTTON_MODE_CIRCULAR,FB.MESSENGER_BUTTON_STYLE_BLUE);
       addButtonWithModeAndStyle(FB.MESSENGER_BUTTON_MODE_CIRCULAR,FB.MESSENGER_BUTTON_STYLE_WHITE);
       addButtonWithModeAndStyle(FB.MESSENGER_BUTTON_MODE_CIRCULAR,FB.MESSENGER_BUTTON_STYLE_WHITE_BORDERED);
       
       addButtonWithModeAndStyle(FB.MESSENGER_BUTTON_MODE_RECTANGULAR,FB.MESSENGER_BUTTON_STYLE_BLUE);
       addButtonWithModeAndStyle(FB.MESSENGER_BUTTON_MODE_RECTANGULAR,FB.MESSENGER_BUTTON_STYLE_WHITE);
       addButtonWithModeAndStyle(FB.MESSENGER_BUTTON_MODE_RECTANGULAR,FB.MESSENGER_BUTTON_STYLE_WHITE_BORDERED);
       
       var btn = Ti.UI.createButton({
           title: "Share media to messenger"
       });
       btn.addEventListener("click", function(e) {
           var media = [
               Ti.UI.createView({height: 30,width:30,backgroundColor: "#ff0"}).toImage(), // Image blob
               Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "test.gif").read(), // GIF Blob
               Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "movie.mp4").read() // Video Blob
           ];
       
           var options = Ti.UI.createOptionDialog({
               options: ["Photo", "GIF", "Video", "Cancel"],
               cancel: 3
           });
           options.addEventListener("click", function(e) {
               if (e.index == 3) {
                   return;
               }
               FB.shareMediaToMessenger({
                   media: media[e.index],
                   metadata: "Ti rocks!",
                   link: "https://appcelerator.com",
                   //renderAsSticker: true
               });
           });
           options.show();
       });
       
       var btn1 = Ti.UI.createButton({
           title: "Invite people"
       });
       
       btn1.addEventListener("click", function(e) {
           FB.presentInviteDialog({
       	  appLink: "https://fb.me/814669901978535",
       	  appPreviewImageLink: "https://www.mydomain.com/my_invite_image.jpg"
       	});
       });
       
       win.add(btn);
       win.add(btn1);
       win.open();
       
       function addButtonWithModeAndStyle(mode, style) {
           var btn = FB.createMessengerButton({
             top: 20,
             mode: mode,
             style: style
           });
       
           btn.addEventListener("click", shareOnMessenger);
           win.add(btn);
       }
       
       function shareOnMessenger() {
           FB.presentMessengerDialog({
               title: "Hi",
               description: "More infos",
               link: "https://appcelerator.com",
               to: []
           });
       }
       
    Make sure to have the tiapp.xml configured properly, like this:
       <ios>
               <plist>
                   <dict>
                       <!--  Ti.Facebook -->
                       <key>FacebookAppID</key>
                       <string>517802691665259</string>
                       <key>FacebookDisplayName</key>
                       <string>Ti.Tests</string>
                       <key>CFBundleURLTypes</key>
                       <array>
                           <dict>
                               <key>CFBundleURLName</key>
                               <string>de.hansknoechel.testapp</string>
                               <key>CFBundleURLSchemes</key>
                               <array>
                                   <string>testapp</string>
                                   <string>fb517802691665259</string>
                               </array>
                           </dict>
                       </array>
                       <key>LSApplicationQueriesSchemes</key>
                       <array>
                           <string>fbapi</string>
                           <string>fbapi20130214</string>
                           <string>fbapi20130410</string>
                           <string>fbapi20130702</string>
                           <string>fbapi20131010</string>
                           <string>fbapi20131219</string>
                           <string>fbapi20140410</string>
                           <string>fbapi20140116</string>
                           <string>fbapi20150313</string>
                           <string>fbapi20150629</string>
                           <string>fbauth</string>
                           <string>fbauth2</string>
                           <string>fb-messenger-api</string>
                           <string>fb-messenger-api20140430</string>
                       </array>
                   </dict>
               </plist>
           </ios>
       
  5. Hans Knöchel 2016-03-10

    PR (titaniun_mobile/master): https://github.com/appcelerator/titanium_mobile/pull/7820
  6. Harry Bryant 2016-07-27

    [~hansknoechel] Reviewed the above demo code, I am able to use all the buttons to send a message to another user, and I am able to share a video file via messenger. However I receive an error message when trying to send a Photo / GIF file: Can't Send Message: Something went wrong, please try again. Any idea on what could be causing this? The photo / GIF files appear correctly in the preview window before sending, but fails to send after numerous app / device restarts.
  7. Eric Merriman 2018-08-06

    Cleaning up older fixed issues. If this issue should not have been closed as fixed, please reopen.

JSON Source