Facebook button wiggle !

[bocahydro]

Hey guys, I finally got around to putting a facebook like button in my header.

It was tough finding info but I got the code and I put it in tpl_header.php

I copied it to several places until I finally found someplace I liked.

I put in the float right, my question is , when you load my site www.bocahydro.com the like button loads last, and wiggles the header. This is very annoying to me, how do I lock it all in place? I noticed the images and slideshow all load separate too, quite annoying

anyone got any advice? Here is the code.

<div class="fb-like float-right" data-href="https://www.facebook.com/pages/Boca-Hydro-LLC/197085777133637" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

<div id="fb-root"></div>
<script>(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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Here is my file,

?>

<?php
// Display all header alerts via messageStack:
if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
}
if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
echo htmlspecialchars(urldecode($_GET['error_message']));
}
if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
echo htmlspecialchars($_GET['info_message']);
} else {

}

// test if box should display
$show_languages= true;

if ($show_languages == true) {
if (!isset($lng) || (isset($lng) && !is_object($lng))) {
$lng = new language;
}

reset($lng->catalog_languages);
$languages_array = array();
$current_language = '';
while (list($key, $value) = each($lng->catalog_languages)) {
$languages_array_popup[$key] = $value['name'];
}

foreach ($languages_array_popup as $k => $v){
if ($k == $_SESSION['languages_code']) {
$current_language = $v;
}
}
}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<div id="headerWrapper">
<br>
<div class="fb-like float-right" data-href="https://www.facebook.com/pages/Boca-Hydro-LLC/197085777133637" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

<div id="fb-root"></div>
<script>(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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--bof-branding display-->
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<!--eof-branding display-->

<div>
<!--bof-header ezpage links-->
<div class="topper-menu float-right">

<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
</div>
<!-- Languages/currency -->
<div class="languages-wrapper">
<?php
$languges_object = new language;
if (count ($languges_object->catalog_languages) > 1){
?>
<div class="languages">
<?php require($template->get_template_dir('tpl_languages_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_languages_header.php'); ?>

<div id="langPopup" class="popup popup-win">
<img class="close-pic float-right" src="<?php echo ($template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images'). '/close_pic.gif'); ?>" alt="close" />
<?php require(DIR_WS_MODULES . zen_get_module_directory('header_languages.php')); ?>
</div>
</div>
<?php
}
?>

<?php
if (isset($currencies) && is_object($currencies) && count ($currencies->currencies) > 1){
?>
<div class="currency">
<?php require($template->get_template_dir('tpl_currency_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_currency_header.php'); ?>

<div id="currPopup" class="popup popup-win">
<img id="close-pic" class="close-pic float-right" src="<?php echo ($template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images'). '/close_pic.gif'); ?>" alt="close" />
<ul class="list-popup">
<?php foreach ($currencies_array_popup as $k=>$v) { ?>
<li><a href="<?php if ((stripos($_SERVER['REQUEST_URI'], '.php')) !== false ) echo $_SERVER['REQUEST_URI']; else echo '?'; ?><?php echo '&amp;currency='.$k; ?>"><?php echo $v; ?></a></li>
<?php }?>
</ul>
</div>
</div>
<?php
}
?>
</div>
<!--eof-header ezpage links-->


<div class="clearRight"></div>

<?php
require($template->get_template_dir('tpl_top_nav.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_top_nav.php');
?>

<?php
if ($this_is_home_page) {
if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerOne" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
}
}
}
?>

</div>
<div class="clearBoth"></div>
<!-- tools section -->
<div class="tools-wrp">
<div id="tools_wrapper" class="align-center">
<div id="search-panel">
<div class="float-left td-search-header">
<div class="search-header float-left">
<?php require($template->get_template_dir('tpl_search_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_search_header.php');?>
<div class="advanced_search float-left">
<a href="index.php?main_page=advanced_search"><?php echo HEADER_ADVANCED_SEARCH; ?></a>
</div>
</div>
</div>
<div align="right" class="cart-header-wrapper">
<!-- header cart section -->
<table align="right" class="align-center cart-header">
<tr>
<td></td>
<td class="cart-img-td">
<?php require($template->get_template_dir('tpl_shopping_cart_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_shopping_cart_header.php');
echo $content;?>
</td>
<td id="delim"></td>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<td class="orange-link">
<a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
</td>
<?php } else { ?>
<td class="blue-link">
<a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
</td>
<?php } ?>
</tr>
</table>
</div>
</div>
</div>

<!-- mobile header -->
<div id="top_nav_mobile">
<div id="tab_nav_mobile">
<ul class="list-style-none">
<li class="tm-catalog <?php echo $active;?>">
<span class="dlm"></span>
<a id="catalog"><?php echo '<img src="'. $template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images') . '/spacer.gif" width="50" height="50" alt="" />'; ?></a>
</li>

<?php
if ($current_page_base == 'account' || $current_page_base == 'login' || $current_page_base == 'account_edit' || $current_page_base == 'address_book' || $current_page_base == 'account_password' || $current_page_base == 'account_newsletters' || $current_page_base == 'account_notifications') { $active = 'tab-active';
} else { $active = '';
}?>
<li class="tm-account <?php echo $active;?>"><span class="dlm"></span><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo '<img src="'. $template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images') . '/spacer.gif" width="50" height="50" alt="" />'; ?></a></li>

<?php
if ($current_page_base == 'shopping_cart') { $active = 'tab-active'; $item_id = '';
} else { $active = ''; $item_id = 'cart-icon';
}?>
<li class="tm-cart <?php echo $active;?>"><span class="dlm"></span>
<a class="<?php echo $item_id; ?>" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo '<img src="'. $template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images') . '/spacer.gif" width="50" height="50" alt="" />'; ?>
<?php if ($product_amount > 0) { ?><span class="cart-amount"><?php echo $product_amount; ?></span><?php } ?>
</a>
</li>

<?php
if ($current_page_base == 'advanced_search') { $active = 'tab-active';
} else { $active = '';
}?>
<li class="tm-search <?php echo $active;?>"><span class="dlm"></span><a href="index.php?main_page=advanced_search"><?php echo '<img src="'. $template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images') . '/spacer.gif" width="50" height="50" alt="" />'; ?></a></li>
</ul>
</div>
<?php require(DIR_WS_MODULES . $template_dir . '/categories_popup.php');
echo $content; ?>
</div>
<!-- /mobile header -->

<!-- cart popup -->
<div id="cart_popup" class="cart-dropdown-wrapper popup">
<div class="cart-tab-wrapper"><img src="<?php echo $template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images')?>/spacer.gif" width="1" height="1" alt="" /></div>
<div class="popup-border">
<div class="content-wrapper">
<div class="cart-scrolling-wrapper">
<?php require($template->get_template_dir('tpl_shopping_cart_popup.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_shopping_cart_popup.php');
echo $content; ?>
</div>

<div class="popup-cart-link-box">
<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL')?>"><?php echo CART_POPUP_VIEW_CART; ?></a>
<a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
</div>
</div>
</div>
</div>
<!-- /cart popup -->

</div>
<!-- /tools section -->
</div>
<?php } ?>

[bocahydro]

the like button loads last on this page too lolol ( refresh the page )

[Trinity14]

I don't see the fb button in your header using FireFox?
Have you made changes?

[bocahydro]

I put it in banner box on bottom left, it will still move everything below when it loads

facebook buttons seem to load last on all sites, but most viewers wont see it because they watch the top half of sites when they click

so its less noticeable.

but its still very much there.

[Trinity14]

Ah, I see the wiggle you speak of... Did you experience this before you added the social media links?

Perhaps the images you are loading are taxing the system (just shy of 200MB not including your slider).