4

How can we implement Add to any social network widget to share photos in facebook,twitter etc in Mobilefirst platform. I have tried the plugin from http://www.addthis.com/ It is working on Preview in Common Resources but failing in Android and windows 8 simulators and devices.

Can anyone suggest any other plugin for MobileFirst Platform? Tried jquery share also by the following code but not working.

$('#mydiv').share({
        networks: ['facebook','pinterest','googleplus','twitter','linkedin','tumblr','in1','email','stumbleupon','digg']
    });

 <div id="mydiv"></div>
ByteCruncher
  • 133
  • 1
  • 3
  • 12

1 Answers1

5

Update: see this blog post for more information: https://developer.ibm.com/mobilefirstplatform/2015/08/03/integrating-3rd-party-cordova-plug-ins/

The mentioned "plug-in" does not seem fitting for mobile apps IMO.
You can google for Cordova social sharing plug-ins instead.

One promising such plug-in for Android, iOS and Windows Phone is the PhoneGap Social Sharing plugin.

Note: You cannot use the Cordova CLI installation steps to install the plug-in in Worklight/MobileFirst Platform. Instead, you need to follow the manual instructions that are provided.

Before doing so it would be prudent to read the MFP tutorial for working with Cordova plug-ins so you will understand how it works in MFP.


I got it to work on iOS with some extra tweaks.

Note:

  • Step 2 is required for Android and Windows Phone 8 as well in their respective environment
  • Step 2 will need to be repeated after every build in MobileFirst Studio, because this file gets over-written on every build.

Steps:

  1. There are two missing frameworks:
    • MessageUI.framework
    • Social.framework

  2. Updating (in Xcode) www\worklight\cordova_plugins.js with an extra section

     {
         "file": "../js/SocialSharing.js",
         "id": "nl.x-services.plugins.socialsharing",
         "clobbers": [
             "window.plugins.socialsharing"
         ]
     }
    

    Note: SocialSharing.js should be placed in common\js as well as be referenced to in the HEAD element in index.html

  3. Edit SocialSharing.js by wrapping the entire contents with

    cordova.define("nl.x-services.plugins.socialsharing", function(require, exports, module) {
        // file contents
    ); 
    
  4. In your HTML, choose whichever sharing option you'd like from the available ones (see plug-in documentation for those).

End result:

enter image description here

Idan Adar
  • 44,156
  • 13
  • 50
  • 89