Results 1 to 9 of 9
  1. #1
    Join Date
    Mar 2011
    Posts
    364
    Plugin Contributions
    0

    Default Facebook social media plugin at top of header

    I am using a custom template but I don't think that matters. On the /includes/templates/mytemplate/common/tpl_header.php I am trying to add the FB social media coding.

    Here it is

    <iframe src="blah blah blah code"></iframe>

    Can someone help me. The problem is that it is not centered above the logo. I thought using <center></center> would help but it did not. It still places the iframe to the left.

    Please see attached.
    Attached Images Attached Images  

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: Facebook social media plugin at top of header

    Give a link as we can hot suggest from a pic

    Like
    zen-cart dot com
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Mar 2011
    Posts
    364
    Plugin Contributions
    0

    Default Re: Facebook social media plugin at top of header

    http://www.zenflavor.com/demo9/




    <?php
    /**
    * Common Template - tpl_header.php
    *
    * this file can be copied to /templates/your_template_dir/pagename<br />
    * example: to override the privacy page<br />
    * make a directory /templates/my_template/privacy<br />
    * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
    * to override the global settings and turn off the footer un-comment the following line:<br />
    * <br />
    * $flag_disable_header = true;<br />
    *
    * @package templateSystem
    * @copyright Copyright 2003-2006 Zen Cart Development Team
    * @copyright Portions Copyright 2003 osCommerce
    * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
    * @version $Id: tpl_header.php 3392 2006-04-08 15:17:37Z birdbrain $
    */
    ?>

    <?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 {

    }
    ?>

    <center><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F&amp;width=960&amp;colorscheme= light&amp;connections=500&amp;stream=false&amp;header=false&amp;height=160" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:1280px; height:160px;" allowTransparency="true"></iframe></center>

    <!--bof-header logo and navigation display-->
    <?php
    if (!isset($flag_disable_header) || !$flag_disable_header) {
    ?>

    <div id="headerWrapper">

    <div id="logotop">

    <!--bof-navigation display-->
    <div id="navMainWrapper">

    <div id="navMain">
    <ul class="forward">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
    <?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
    <?php
    } else {
    if (STORE_STATUS == '0') {
    ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
    <?php } } ?>

    <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
    <?php }?>


    </ul>
    </div>
    <!-- <br class="clearBoth" /> -->
    </div>
    <!--eof-navigation display-->

    <!-- cart icon -->
    <div id="cart_top"><a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>index.php?main_page=shopping_cart"><?php echo BOX_HEADING_SHOPPING_CART; ?></a><br /><?php echo PRODUCTS_ORDER_QTY_TEXT_IN_CART; ?><?php echo $_SESSION['cart']->count_contents();?> - <?php echo $currencies->format($_SESSION['cart']->show_total());?></div>
    <!-- cart icon -->



    <a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>"><?php echo zen_image(DIR_WS_TEMPLATE.'images/logo.png'); ?></a>



    </div> <!-- logotop -->

    <div id="topmenubar">
    <div id="topmenubarinner">
    <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="tbltopmenu">
    <tr>
    <td width="34px"><a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>"><?php echo zen_image(DIR_WS_TEMPLATE.'images/cor-left.gif'); ?></a></td>
    <td style="vertical-align:middle">

    <!--bof-header ezpage links-->
    <?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 } ?>
    <!--eof-header ezpage links-->


    </td>

    </tr>
    </table></div><!-- topmenubarinner --></div><!-- topmenubar -->

    <div id="navCurrenciesWrapper">
    <div id="navCurrenciesWrapperInner">
    <div class="nav_language">

    <?php echo BOX_HEADING_LANGUAGES ?>&nbsp;

    <?php if (!isset($lng) || (isset($lng) && !is_object($lng))) {
    $lng = new language;
    }

    reset($lng->catalog_languages);

    while (list($key, $value) = each($lng->catalog_languages)) {
    echo '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . zen_image(DIR_WS_LANGUAGES.$value['directory'].'/images/'.$value['image'], $value['name'], '', '', ' style="vertical-align:middle;"') . '</a>&nbsp;';
    }
    ?>



    </div> <!-- nav_language -->

    <div class="nav_currencies">



    <?php echo zen_draw_form('currencies', zen_href_link(basename(ereg_replace('.php','', $PHP_SELF)), '', $request_type, false), 'get')?>

    <?php

    if (isset($currencies) && is_object($currencies)) {

    reset($currencies->currencies);
    $currencies_array = array();
    while (list($key, $value) = each($currencies->currencies)) {
    $currencies_array[] = array('id' => $key, 'text' => $value['title']);
    }

    $hidden_get_variables = '';
    reset($_GET);
    while (list($key, $value) = each($_GET)) {
    if ( ($key != 'currency') && ($key != zen_session_name()) && ($key != 'x') && ($key != 'y') ) {
    $hidden_get_variables .= zen_draw_hidden_field($key, $value);
    }
    }
    }

    ?><?php echo zen_draw_pull_down_menu('currency', $currencies_array, $_SESSION['currency'], ' onchange="this.form.submit();"') . $hidden_get_variables . zen_hide_session_id()?></form>



    </div> <!-- nav_currencies -->



    <div class="clearBoth"></div>


    <div class="header-search">

    <?php

    $content = "";
    $content .= zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get');
    $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
    $content .= zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id();

    $content .= '<div class="searchinput">'. zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 160px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '</div><input class="button-search-header" type="image" src="' . $template->get_template_dir('', DIR_WS_TEMPLATE, $current_page_base,'images') . '/sbutton.gif' . '" value="Serch" />' /*. zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON)*/;
    $content .= "</form>";
    echo($content);
    ?>

    </div><!-- header-search -->
    </div> <!-- navCurrenciesWrapperInner -->
    </div> <!-- navCurrenciesWrapper -->





    <div id="headerContent">






    <!-- <div id="nameWrapper"><?php //echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . STORE_NAME . '</a>' ?></div> -->

    <?php
    if (HEADER_SALES_TEXT != '') {
    ?>
    <!-- <div id="taglineWrapper"><?php// echo HEADER_SALES_TEXT ;?></div> -->
    <?php
    }
    ?>




    </div><!-- headerContent -->

    <!--bof-optional categories tabs navigation display-->
    <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php');
    ?>
    <!--eof-optional categories tabs navigation display-->

    <?php if ($this_is_home_page) { ?>

    <!-- ******************************* -->
    <!-- Slideshow effects control start -->
    <script language="javascript" type="text/javascript"><!--
    $(document).ready(function() {
    $("#slideshow").css("overflow", "hidden");

    $("ul#slides").cycle({
    fx: 'fade', //transition effects: shuffle, zoom, turnDown, curtainX
    timeout: 4000, //miliseconds between slide image change
    pause: 1,
    prev: '#prev',
    next: '#next'
    });

    $("#slideshow").hover(function() {
    $("ul#nav").fadeIn();
    },
    function() {
    $("ul#nav").fadeOut();
    });
    });

    //--></script>
    <!-- Slideshow effects control end -->
    <!-- ***************************** -->


    <!-- ************************************ -->
    <!-- slideshow display images block start -->
    <div id="slideshow" style="width: 960px; height: 250px;">
    <ul id="nav">
    <li id="prev"><a href="#">Previous</a></li>
    <li id="next"><a href="#">Next</a></li>
    </ul>

    <ul id="slides">
    <li><a href=""><img width="960" height="250" src="includes/templates/premium9a/images/.png" alt="" /></a></li>
    <li><a href="http://www.zenflavor.com/demo9/"><img width="960" height="250" src="includes/templates/premium9a/images/slide2.jpg" alt="" /></a></li>
    </ul>
    </div>

    <!-- slideshow display images block end -->
    <!-- ********************************** -->


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

    <?php } } ?>
    </div>
    <?php } ?>

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



    <!--bof-branding display-->


    <!-- <br class="clearBoth" /> -->
    <!--eof-branding display-->

    <!--eof-header logo and navigation display-->




    </div> <!-- headerWrapper -->
    <?php } ?>
    Last edited by willie bee; 21 Mar 2011 at 12:30 AM.

  4. #4
    Join Date
    Jun 2008
    Posts
    61
    Plugin Contributions
    1

    Default Re: Facebook social media plugin at top of header

    Your code is now in the "body" area... not in the template's "header" area.

    You should create a DIV block and add the code inside the DIV. Then use CSS to set the width/height of the DIV... width should be the same as the width of your custom template design, and set the left and right margin to auto (this will center the DIV)

    By the way, isn't it better to add the Facebook Like Box in a sidebox? Use any of the built-in banner sideboxes. This is easier to manage in the admin.
    Last edited by yonghs; 21 Mar 2011 at 08:42 AM.

  5. #5
    Join Date
    Mar 2011
    Posts
    364
    Plugin Contributions
    0

    Default Re: Facebook social media plugin at top of header

    Quote Originally Posted by yonghs View Post
    Your code is now in the "body" area... not in the template's "header" area.

    You should create a DIV block and add the code inside the DIV. Then use CSS to set the width/height of the DIV... width should be the same as the width of your custom template design, and set the left and right margin to auto (this will center the DIV)

    By the way, isn't it better to add the Facebook Like Box in a sidebox? Use any of the built-in banner sideboxes. This is easier to manage in the admin.
    Can you show me how? I assume create a DIV in the header file for placement. And then the settings in stylesheet.css. But that is as far as I can get with it as I do not know much.

    Also I do not use the side box because that is all it is. A link nothing more. The one I use up on top shows the peoples faces and a like button. Much more interesting since if you're logged in FB itll show people that are your friends already or close to you.

  6. #6
    Join Date
    Mar 2011
    Posts
    364
    Plugin Contributions
    0

    Default Re: Facebook social media plugin at top of header

    Any one please? I had this working in osCommerce but the files modded are diff so it's giving me a headache, ugh.

  7. #7
    Join Date
    Jun 2008
    Posts
    61
    Plugin Contributions
    1

    Default Re: Facebook social media plugin at top of header

    Quote Originally Posted by willie bee View Post
    Also I do not use the side box because that is all it is. A link nothing more. The one I use up on top shows the peoples faces and a like button. Much more interesting since if you're logged in FB itll show people that are your friends already or close to you.
    Uh, no, if you put one in the banner sidebox, it's the WHOLE Facebook Like/Fan box, with the like button, faces, news stream, header etc. Because you paste the whole Facebook iframe code (HTML code) for the banner, not image.

    A banner sidebox can be HTML or image... so you put in HTML instead of image.

    You paste EXACTLY the same iframe code into the banner sidebbox that you are now having on the tpl_header.php file.

  8. #8
    Join Date
    Jun 2008
    Posts
    61
    Plugin Contributions
    1

    Default Re: Facebook social media plugin at top of header

    If you still want to put it in the header. Instead of using the "center" tag, use this in your file and put in any location that suits you:

    <div id="facebookbox">YOUR FACEBOOK CODE</div>


    Then in the stylesheet.css file, add this:

    #facebookbox {
    width: 960px;
    height: UP-TO-YOU;
    margin-left: auto;
    margin-right: auto;
    }

  9. #9
    Join Date
    Mar 2011
    Posts
    364
    Plugin Contributions
    0

    Default Re: Facebook social media plugin at top of header

    yonghs, I do apologize for not thanking you sooner. I just saw this reply tonight and it worked! Thank you SO MUCH!

 

 

Similar Threads

  1. social media
    By Aram in forum Setting Up Specials and SaleMaker
    Replies: 3
    Last Post: 21 Sep 2015, 01:48 PM
  2. Social Media
    By karenkte in forum General Questions
    Replies: 1
    Last Post: 5 Apr 2015, 12:44 PM
  3. v150 Social media icons in header not working as expected in Chrome and Firefox
    By OLCS in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 14 Oct 2012, 02:20 PM
  4. v150 social media twitter facebook google
    By oitem in forum Basic Configuration
    Replies: 4
    Last Post: 27 May 2012, 12:11 AM
  5. Social Media Buttons Don't Align in the Header
    By mishutkadesign in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 26 Nov 2011, 03:39 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR