Search code examples
javascriptfacebookunity-game-enginefacebook-unity-sdk

Facebook and Unity3D JS injection difficulties


I'd like to display some HTML elements under my game on Facebook. Specifically, an image with a link to a website, but that's not the point of the question.

I understand what is required, and have successfully used the Application.ExternalEval() method, and the sample JS string provided by Facebook, to add some HTML text on top of the game itself.

I am following the information found on this page.

I have attempted the following permutations:

"var insertionPoint = body.children[0]; " + "body.insertBefore(headerElement, insertionPoint);";

"var insertionPoint = body.children[0]; " + "body.insertBefore(headerElement, insertionPoint.nextSibling);";

"var insertionPoint = body.children[1]; " + "body.insertBefore(headerElement, insertionPoint);";

After a couple of hours of frustrating trial and error, I have been unable to produce working JS injection code to display HTML immediately below the game itself on the canvas. Can someone help?


Solution

  • I've been trying to do the same frustrating thing for a minute, here's what I've arrived at, had to use different techniques for different browsers.

    string injection = "if(navigator.userAgent.indexOf(\"Firefox\") >= 0){;" +
    
                "var headerElement = document.createElement('div');" +
                "headerElement.innerHTML = '<img src=\"URLTOSOURCE" style=\"width: 100%; text-align: center\" />';" +
                "var body = document.getElementsByTagName('body')[0];" +
                "var insertionPoint = body.lastChild;" +
                "body.insertBefore(headerElement, insertionPoint);" +
    
                "}else{;" +
    
                "var headerElement = document.createElement('div');" +
                "headerElement.innerHTML = '<img src=\"URLTOSOURCE" />';" +
                "var body = document.getElementsByTagName('body')[0];" +
                "var insertionPoint = body.children[0]; " +
                "var unityPlayer = document.getElementById('unityPlayerEmbed');" + 
                "unityPlayer.parentNode.insertBefore(headerElement, unityPlayer.nextSibling);" +
                "var embedTag = unityPlayer.getElementsByTagName('embed');" + 
                "embedTag[0].setAttribute('style','display:block;width:1200px;height:600px');" +
    
                "};";
    
        Application.ExternalEval(injection);