Facebook Connect 4.x

Legacy documentation for Facebook Connect 4.x.

FBC:Prepare_Page template tag

In order to display and run any Facebook features like the Login button, Like button, etc, you need to make a couple modifications to your template code. It's required that you add some javascript code just above the </body> tag.

While this can be done manually, the Prepare_Page function does this work for you. The Prepare_Page tag is only doing simple string replacements on your templates, so the performance impact is very minimal. This tag is only needed on pages where you will invoke Facebook Connect functionality. If you prefer to do this manually, you can refer to the Facebook Documentation.

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'your-app-id',
            xfbml      : true,
            version    : 'v2.5'
        });
    };

    (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>

The Prepare_Page tag needs to be in the exact template that contains the </body> tag. If you use a template embed for your footer, you'll need to place the Prepare_Page tag at the top of that embedded template instead.

{exp:fbc:prepare_page}

Parameters

The following parameters are available for use:

execute= (optional)

execute="yes"

This parameter is an additional feature that allows you to prevent the Prepare_Page function from executing. Most sites usually place their footer code into an embedded template. Because of the parsing order in EE, Prepare_Page will execute prior to embedded conditionals. When you pass a value of yes to the execute parameter, the method will execute and do its job. If you pass any other value, including an empty string, the method will NOT execute. If there is no execute parameter provided, the Prepare_Page method will execute. The idea here is that you might have some pages that you don't want the Prepare_Page function to run on, and this is a way to stop it from doing so.

language=

language="en_US"

Use this parameter to change the language preference for all Facebook items. Default is US English (en_US). Facebook locales follow ISO language and country codes respectively, concatenated by an underscore. The basic format is ll_CC, where ll is a two-letter language code (in lowercase), and CC is a two-letter country code (in uppercase). For instance, en_US represents US English. For more information about Facebook and internationalization, visit the Facebook Developer Docs.

Examples

Simple

Below is some example code on how to implement the Prepare_Page tag in a simple template that contains the </body> tag:

{exp:fbc:prepare_page}

<html>
<head>
    <title>The title of your page</title>
</head>
<body>
    <h1>The title of your page</h1>
    <p>Here is some babble...</p>

    <div class="footer">
        <p>&copy; Copyright {current_time format="%Y"} Your Site.</p>
    </div>
</body>
</html>

Embedded

Below is some example code on how to implement the Prepare_Page tag in the instance your </body> tag is located in an embedded template:

Main Template:

{embed="path_to/header"}

</head>
<body>
    <h1>The title of your page</h1>
    <p>Here is some babble...</p>

{embed="path_to/footer"}

Footer Embed Template:

{exp:fbc:prepare_page}

    <div class="footer">
        <p>&copy; Copyright {current_time format="%Y"} Your Site.</p>
    </div>

</body>
</html>

Advanced Embedded (with execute parameter)

Below is some example code on how to implement the Prepare_Page tag in the instance your </body> tag is located in an embedded template along with the execute parameter (where load_fbc is just a random name chosen for this example, and can be whatever you want to call it):

Main Template:

{embed="path_to/header"}

</head>
<body>
    <h1>The title of your page</h1>
    <p>Here is some babble...</p>

{embed="path_to/footer" load_fbc="yes"}

Footer Embed Template:

{exp:fbc:prepare_page execute="{embed:load_fbc}"}

    <div class="footer">
        <p>&copy; Copyright {current_time format="%Y"} Your Site.</p>
    </div>

</body>
</html>