Need help for Facebook-Plugin


Author Message
Marco

Posted: 9/4/2012
Quote message 

Hi, i try to generate an facebook Plugin for Artisteer.

I´m no Programmer so it is not as easy as i thought ;)

maybe someone can help me with these two questions:

1. Adding CodeSnippet which will be automatically in exportet sites. That means, i need a peace of code, which is automatically in the BODY SECTION of the exportet html-template
2. Changing width: Facebook only allows a max width of 810px. How can i told the template, that the exportet site only can be 810px width?

Thx for your help!
 
Marco

Posted: 9/4/2012
Quote message 

to Point 1:
e.g. I have a codesnippet like this:
"<style type="text/css"> body {width:810px;margin:0; padding:0; border:0;} </style> <div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({status: true, cookie: true, xfbml: true}); FB.Canvas.setAutoResize(); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>"

how can i embed it in the (i think) template.js, so that this part be filled in the generated index.html within the "body-section"?

Hope you understand my horrible school-english
 
D2

Posted: 9/4/2012
Quote message 

I've almost got a solution for you, but what is the code you listed supposed to do?
 
Marco

Posted: 9/4/2012
Quote message 

Hi D2. It´s only a sknippet which is needed to make the (from facebook) fixed height of the iframe higher if it´s needed.

So, can you tell me, how and where to put that snippet in?
In the exportet .html it has to be placed in the body-tag (at the end).

bR and thanks for you help?!
 
Marco

Posted: 9/4/2012
Quote message 

oh, and the body width should be, because the templates width can only be (at largest) 810px´s...
 
Khachatur

Posted: 9/5/2012
Quote message 

Quote :
2. Changing width: Facebook only allows a max width of 810px. How can i told the template, that the exportet site only can be 810px width?


in this case you may check the width of template, and if it is larger then 810px, save a single readme file with instructions.


result.remove("")
result.write("readme.txt", "blah blah blah")

 
D2

Posted: 9/5/2012
Quote message 

This last part of the code I can not seem to get to show up in the exported html. I think it has to do with the javascript call.
<script type="text/javascript"> window.fbAsyncInit = function() { FB.init({status: true, cookie: true, xfbml: true}); FB.Canvas.setAutoResize(); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

SDK FAQ Says:
Can I use asynchronous JavaScript calls during the export?
No, the current version of SDK does not support asynchronous calls.

I've stopped programming on this for now, but I will revisit it if artisteer starts allowing javascript to be exported

The only other option is to edit your root page found in

C:\Program Files\Artisteer 4\Library\Data\Templates\DefaultView\Files\page.html

Sorry!


 
D2

Posted: 9/5/2012
Quote message 

By the way: Your script is 2 part

HEADER:
<style type="text/css"> body {width:810px;margin:0; padding:0; border:0;} </style>

BODY:

<script type="text/javascript"> window.fbAsyncInit = function() { FB.init({status: true, cookie: true, xfbml: true}); FB.Canvas.setAutoResize(); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

The header portion of the code works - it resizes the whole output to 810px.
 
Marco

Posted: 9/5/2012
Quote message 

this will be 1 solution with the fixed width.
Where have i to put the code in?

bR Marco
 
D2

Posted: 9/5/2012
Quote message 

template.js

Find
 html.children("head").html("{page_head}");


Replace with:

 html.children("head").html("{page_head}<style type='text/css'> body {width:810px;margin:0; padding:0; border:0;}</style>");