Search code examples
javascriptgigya

Gigya custom Share Bar


I'm using Gigya's javascript API to set up a social share bar but need custom icons. It seems that the showShareBarUI does not allow facebook/twitter/etc. icons to be changed but it does allow the user to preview the post they will make. Conversely, publishUserAction will allow custom icons to publish with login but does not give any preview of the user's content.

Is there any way to have custom icons for the share bar and preview the post content while employing Gigya?

I'm trying both :

  var act = new gigya.socialize.UserAction();

  act.setTitle("This is my title");  // Setting the Title
  act.setLinkBack("http://www.gigya.com");  // Setting the Link Back
  act.setDescription("This is my Description");   // Setting Description
  act.addActionLink("Read More", "http://www.gigya.com");  // Adding Action Link

  var params = 
  {
    userAction:act,
    shareButtons:[
      { // Twitter Tweet button
        provider:'twitter-tweet',
        tooltip:'Share on Twitter',
        defaultText:'Twitter message'
      },
      { // Google +1 button
        provider:'google-plusone',
        tooltip:'Recommend this on Google',
        userMessage:'default user message'
      }
    ],
    showCounts:'none',
    containerID:'shareBar'
  }

  gigya.socialize.showShareBarUI(params); 

OR -

 function twitterLogin() {
    gigya.services.socialize.login({provider:'twitter',callback:twitter});
 }

  function twitter(){
    var act = new gigya.socialize.UserAction();

    act.setTitle("This is my title");  // Setting the Title
    act.setLinkBack("http://www.gigya.com");  // Setting the Link Back
    act.setDescription("This is my Description");   // Setting Description
    act.addActionLink("Read More", "http://www.gigya.com");  // Adding Action Link

    var params = 
      {
      userAction:act,
      enabledProviders:"twitter"
      };

  // Publishing the User Action     
  gigya.socialize.publishUserAction(params);
}

HTML -

<div id="shareBar" > 
    <a href="#" onclick="javascript:twitterLogin()">
       <img src="images/custom-twitter-icon.png" /> 
    </a> 
</div>

Solution

  • So after many hours working on this the solution is frustrating because it is so easy and on the showShareBarUI page but not emphasized in any way.

    For custom share bar icons you must use the Gigya style button names not the reserved provider names. So use 'twitter' not 'twitter-tweet'...

      var params = 
        {
          userAction:act,
          shareButtons:[
            { // Twitter Tweet button
              provider:'twitter',
              tooltip:'Share on Twitter',
              defaultText:'Twitter message'
            },
          ],
          showCounts:'none',
          containerID:'shareBar'
        }
    
      gigya.socialize.showShareBarUI(params);