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

Answer 1

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 :)