New Facebook/Webplayer Integration HTML Injection Issue

Unity Engine
1

I am trying to inject some HTML above my webplayer using the new Facebook integration but having an issue.

I am using the example Facebook has here:

It works fine, but it snips off the bottom of the webplayer view by however much height the injection takes on the screen if you have a fixed height. Anyone have any ideas on how I might address this, or do I need to contact Facebook to fix this?

Thanks!

Update: Pretty sure this needs to be fixed by Facebook, since they control the template/iframe that needs to be resizing based on content. I submitted as a bug Log into Facebook but if anyone thinks I am missing something, please let me know.

2

Facebook decided to tell me this was by design and closed the ticket. UGH… They are not taking into account that there is currently no way to set the canvas height different than the webplayer height, so there is no space to inject HTML above the app without the iFrame clipping it. Using Fluid is not an option for my project and doesn’t really fix anything either, as it creates ugly vertical scroll bars when you inject.

3

That is correct. We currently aren’t focused on any HTML features at the moment. We will be working on those once the SDK is stable enough to go out of beta.

With that said, within the Facebook SDK there is the FBScreen.SetResolution(); method that will let you set the game width and height in canvas. Combine that with using javascript to modify the css on the element “unityPlayerEmbed” and you move and shrink the game how you want.

I hope that helps.

4

Thanks I was able to make something work by over sizing the canvas height in FB app settings, and then running some javascript from Unity to resize the unityPlayerEmbed. Is calling the FBScreen.SetResolution() also necessary for some reason?

Code I am using for reference and anyone else needing to do this:

        //resize webplayer height to 650 if not (facebook issue)
        string js =
        @"
        var unity = document.getElementById('unityPlayer');

        //facebook
        if(unity == null)
            unity = document.getElementById('unityPlayerEmbed');

        if(unity != null)
        {                   
            unity.style.height = '650px';
            unity.children[0].style.height = '650px';
        }
        ";

        Application.ExternalEval(js);
5

I don’t know if it’s necessary as the interface between the canvas and the webplayer is still a little unpolished (hence why we left it out of the documentation for now) . Right now the page will default to trying to use the maximum possible width and height unless told otherwise by FBScreen.SetResolution(). That will turn off the listeners to resize the unity web player when the window size is adjusted.

6

Thanks, I know I may not understand the complexities going on here, but to fix a number of issues including this one, it seems like all you guys got to do is add a couple settings to the FB app settings that adjust the HTML template. Like allowing to set webplayer size, context menu flag, etc.

7

Just wanted to say thanks for your efforts on this akasurreal. This saved me a lot of time =).

8

[quote=[RV]CWolf;1389110]
Just wanted to say thanks for your efforts on this akasurreal. This saved me a lot of time =).
[/quote]

Thanks! Glad I could help =) Still hoping that eventually they will just let us adjust all the HTML template settings in the FB app settings.

9

Hey all ,

I had similar issues…i would like to know what’s the workaround …

I have done this so far…

FB app settings : width : 760 px
height : 650 px

In unity settings : ( webplayer size : 760 x 512 px)

my unity code snippet :
{
FBScreen.SetResolution(760,512,false);

string injection = “var headerElement = document.createElement(‘img’);” +
“headerElement.src = ‘http://link_to_image/my_image.png’ ;” +
“var body = document.getElementsByTagName("body")[0];” +
"var insertionPoint = body.children[0]; " + “body.insertBefore(headerElement, insertionPoint);” +
“body.style.backgoundColor=‘#FF0000’ ;”;
Application.ExternalEval(injection);

}

10

I posted a workaround to this, just scroll up =)

11

hey akasurreal…i know that you have posted the workaround…but i just wanna know did you game stretched too even after the adjustments…I would be really glad …if u could help me figure out whether to code posted by me is right or not ? and also are you able to change the app background color from white to some other or else replace it with some image …

12

You could try playing with different CSS properties to adjust background, I haven’t tried it yet, not sure. What do you mean about game stretched? My workaround is to set the Unity player to be smaller than the canvas size, so you have space to inject other elements around it and it does work. I did not call the FBScreen.SetResolution in my tests, so I don’t know if that messes anything up or if its needed for anything.

13

i tried playing though with CSS…but hard luck mate…i am not that a good web language expert …it will be nice if you could provide me with some ref to add BG image around my facebook app… i mean the white left and right padding around the app…

and FB.screenresolution() worked just fine … :slight_smile:

14

I don’t know much about CSS either, google is your friend.

15

okkk…thanks mate :slight_smile:

16

I am also having some trouble with this. It seems that the only real fix will have to come from Facebook. I submitted (yet another) bug report on the issue.

It might give Facebook some motivation if people added comments.

17

Despite the complete lack of documentation there are actually several useful features inside the FBScreen class that let you interact with the HTML. The following line allows 160 pixels at the top of the canvas window for a banner.

FBScreen.SetResolution (FBScreen.Width,FBScreen.Height-160,false);

There are a few other functions in the class for messing with the layout as well. Makes me wonder what other stuff they have hidden away that’s not documented.