Facebook javascript SDK Share version from property files to jsp not working [webapp]

Question

I am using a property file to manage App IDs, and versions.

here is the property file :

#Facebook APP ID & Version

#My Local
facebookShareAppId = xxxxxxxxxxx

#UAT
#facebookShareAppId = xxxxxxxxxxx

#QA
#facebookShareAppId = xxxxxxxxxxx


facebookShareVersion = v2.7

============================

I am getting the value of the property from the controller using our utility, my controller method has this:

String facebookAppId = PropertyFileReader.getProperty(PropertyFileConstants.PROP_SOCIALNETWORK, "facebookShareAppId");
String facebookShareVersion = PropertyFileReader.getProperty(PropertyFileConstants.PROP_SOCIALNETWORK, "facebookShareVersion");

page.addObject("facebookAppId", facebookAppId);
page.addObject("facebookShareVersion", facebookShareVersion);
return page;

============================

My JSP then gets the values when I check it using ${facebookAppId} and ${facebookShareVersion}

<input id="facebookAppId" type="hidden" value = "${facebookAppId}"/>
<input id="facebookShareVersion" type="hidden" value = "${facebookShareVersion}"/>

when I try to log it, it displays my current value for facebookAppId, and facebookShareVersion. (Current version is "v2.7")

=====================

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : ${facebookAppId},
      xfbml      : true,
      version    : ${facebookShareVersion}
    });
  };

</script>

when I type this, it gives me an error : "Uncaught Error: invalid version specified", but when I change the version to static string "v2.7", it works. Any idea on how to fix this??

I also have this (I don't actually know what it does) :

<div id="fb-root"></div>
            <script>(function(d, s, id) {
             var js, fjs = d.getElementsByTagName(s)[0];
             if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/en_US/sdk.js";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
            </script>
                            <!-- Your share button code -->
            <div class="fb-share-button" data-href="http://www.google.com/" data-layout="button" data-size="large" data-mobile-iframe="true"></div>

EDIT : I added the code above

I'm sorry i'm kind of new to this, what do you mean by that? @CBroe — EdSniper, Sep 27 '16 at 08:59
I mean you should look at the actual HTML code your browser receives, to verify that the placeholders have been replaced with the actual variable content. // Don’t embed the SDK twice, that’s asking for trouble. Remove the second one. — CBroe, Sep 27 '16 at 09:02
Just checked it, and it returns exactly what I need it to be, I'll add it in the edit.. // When I removed the embed below (the one i added on edit) the error is removed, but the button still doesn't show, should I remove the embed above? — EdSniper, Sep 27 '16 at 09:06
You need to keep the code for the button, but embed the SDK only once. — CBroe, Sep 27 '16 at 09:10
I think the `version: ${facebookShareVersion}` line in your script should be `version: "${facebookShareVersion}"`. — Jozef Chocholacek, Sep 27 '16 at 09:11
@JozefChocholacek, when I do that, the facebookShareVersion will be a static string. — EdSniper, Sep 27 '16 at 09:14
Ok @CBroe I already removed the first embed, and changed the `js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";` to ` js.src = "//connect.facebook.net/en_US/sdk.js";` and it still behaves the same way. now how do I show this button? :( — EdSniper, Sep 27 '16 at 09:22
If you don’t really know what you are doing here, then I’d suggest you remove all that code, and start over again. Go to https://developers.facebook.com/docs/plugins/share-button#configurator, and use the configurator to create the correct code. Then put that code into your environment, and adapt where necessary (dynamic app id and version.) — CBroe, Sep 27 '16 at 09:32

score 1 · Accepted Answer · answered Sep 27 '16 at 09:45

Removed the second embed of SDK, and transferred it to my Javascript, tweaked the js.src, added the version and appId, from the hidden element in JSP, then it worked. Final code looks like :

Javascript :

var appId = $("#facebookAppId").val();
var version = $("#facebookShareVersion").val();

    (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version="+ version + "&appId=" + appId;
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

JSP :

<input id="facebookAppId" type="hidden" value = "${facebookAppId}"/>
<input id="facebookShareVersion" type="hidden" value = "${facebookShareVersion}"/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : ${facebookAppId},
      xfbml      : true,
      version    : ${facebookShareVersion}
    });
  };

</script>

Now the version and appId can be retrieved from the property files :)

Facebook javascript SDK Share version from property files to jsp not working [webapp]

1 Answers1