Janrain custom theme issue

Question

I am creating a custom theme for my site and with this I am interested in using Janrain as my log in.

I have tested the janrain set up on various theme downloadable through drupal and it works perfect.

I started writing my own theme from the ground up and ran into an issue...

I created everything I needed for a basic site (left sidebar, right sidebar, content, footer, etc) and placed the Janrain block inside the left sidebar.

Everything shows up in my side bar fine. I can log in perfectly with the regular log in fields. When I click one of the icons to say log in with facebook, the lightbox (popup, login alert, whatever its called) does not show up.

I inspect the fb icon element with Google Chrome and and press the fb icon again and this is the error i receive from the source tab.

Uncaught ReferenceError:RPXNOW is not defined (repeated 14 times)

This is what that error points to:

<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Log in" class="form-submit" /></div><div class="item-list"><ul class="rpx-links"><li class="rpx-link first last"><a href="https://eval.rpxnow.com/openid/v2/signin?token_url=http%3A//johnr.rrc.com/rpx/token_handler%3Fdestination%3Dnode/4" class="rpxnow" onclick="return false;" onmousedown="delete RPXNOW.default_provider;">Sign in using one of these accounts:</a><br /><a href="https://eval.rpxnow.com/openid/v2/signin?token_url=http%3A//johnr.rrc.com/rpx/token_handler%3Fdestination%3Dnode/4" class="rpxnow" onclick="return false;" onmousedown="RPXNOW.default_provider = &#039;facebook&#039;;"><div class="rpx-icon-small rpx-facebook-small" id="rpx-facebook"></div></a><a href="https://eval.rpxnow.com/openid/v2/signin?token_url=http%3A//johnr.rrc.com/rpx/token_handler%3Fdestination%3Dnode/4" class="rpxnow" onclick="return false;" onmousedown="RPXNOW.default_provider = &#039;twitter&#039;;"><div class="rpx-icon-small rpx-twitter-small" id="rpx-twitter"></div></a><a href="https://eval.rpxnow.com/openid/v2/signin?token_url=http%3A//johnr.rrc.com/rpx/token_handler%3Fdestination%3Dnode/4" class="rpxnow" onclick="return false;" onmousedown="RPXNOW.default_provider = &#039;google&#039;;"><div class="rpx-icon-small rpx-google-small" id="rpx-google"></div></a><a href="https://eval.rpxnow.com/openid/v2/signin?token_url=http%3A//johnr.rrc.com/rpx/token_handler%3Fdestination%3Dnode/4" class="rpxnow" onclick="return false;" onmousedown="RPXNOW.default_provider = &#039;yahoo&#039;;"><div class="rpx-icon-small rpx-yahoo-small" id="rpx-yahoo"></div></a><a href="https://eval.rpxnow.com/openid/v2/signin?token_url=http%3A//johnr.rrc.com/rpx/token_handler%3Fdestination%3Dnode/4" class="rpxnow" onclick="return false;" onmousedown="RPXNOW.default_provider = &#039;aol&#039;;"><div class="rpx-icon-small rpx-aol-small" id="rpx-aol"></div></a><a href="https://eval.rpxnow.com/openid/v2/signin?token_url=http%3A//johnr.rrc.com/rpx/token_handler%3Fdestination%3Dnode/4" class="rpxnow" onclick="return false;" onmousedown="RPXNOW.default_provider = &#039;openid&#039;;"><div class="rpx-icon-small rpx-openid-small" id="rpx-openid"></div></a></li>

What am I missing for my custom theme that janrain needs so it works properly?

Note: As another test i did this with a completely blank theme and still the same issue.

edit:

It looks like janrain requires the use of a footer, but I am adding in all the footer stuff I need:

<!-- Footer -->    
<div id="footer">

    <div id="footer-inside">

        <div class="footer-area first">
        <?php print render($page['footer_first']); ?>
        </div><!-- EOF: .footer-area -->

        <div class="footer-area second">
        <?php print render($page['footer_second']); ?>
        </div><!-- EOF: .footer-area -->

        <div class="footer-area third">
        <?php print render($page['footer_third']); ?>
        </div><!-- EOF: .footer-area -->

    </div><!-- EOF: #footer-inside -->

</div><!-- EOF: #footer -->

<!-- Footer -->    
<div id="footer-bottom">

    <div id="footer-bottom-inside">

        <div id="footer-bottom-left">

            <?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('class' => array('secondary-menu', 'links', 'clearfix')))); ?>

            <?php print render($page['footer']); ?>

        </div>

        <div id="footer-bottom-right">

            <?php print render($page['footer_bottom_right']); ?>

        </div><!-- EOF: #footer-bottom-right -->

    </div><!-- EOF: #footer-bottom-inside -->

</div><!-- EOF: #footer -->

Answer 1

I think you're missing $page_top and (probably more importantly) $page_bottom in your html.tpl.php. Try changing

<?php print $page; ?>

to

<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>

From the html.tpl.php pastebin that you linked to above:

• $page_bottom: Final closing markup from any modules that have altered the page. This variable should always be output last, after all other dynamic content.