Move social bookmarks to the product information body

I’m getting this question all the time: How to move the social bookmark links into the body of the product information page in osCommerce

Instead of answering each time by email, I thought to make a quick post about so that anyone who is interested can do it. Instructions are same for regular osCommerce users and mini template system users

Why should somebody want to move that social bookmarks into the page body? As we know, there is a special box in osCommerce, called “bm_social_bookmarks.php” that do exactly this. Well ok, it happens that some users don’t want to have any columns, but still want to have that bookmarks

Lets start, there are 2 ways to do it

Way 1: Output the box contents to the product information page

Things are very simple here. First you need to do the changes to all of your boxes as described here

Then, all you have to do is to output the contents of box “bm_information.php” to anywhere you would like the social bookmarks to appear, like this

if (class_exists(bm_social_bookmarks)) {
$boxdata = new bm_social_bookmarks;
echo $boxdata->dataF();
}

Now, ok, you may say that you don’t want this “boxed look” on the product information page. Unfortunately data is still mixed with html in osCommerce, so, the only thing you can do is to style that box via css (an article about that will follow) or to go on with way 2

Way 2 : use the box code on the product information page

The only file to work on is catalog/product_info.php Into this file, we are going to add following code

<?php
      if (tep_not_null(MODULE_SOCIAL_BOOKMARKS_INSTALLED)) {
        $sbm_array = explode(';', MODULE_SOCIAL_BOOKMARKS_INSTALLED);
        $social_bookmarks = array();
        foreach ( $sbm_array as $sbm ) {
          $class = substr($sbm, 0, strrpos($sbm, '.'));
          if ( !class_exists($class) ) {
            include(DIR_WS_LANGUAGES . $language . '/modules/social_bookmarks/' . $sbm);
            include(DIR_WS_MODULES . 'social_bookmarks/' . $class . '.php');
          }
          $sb = new $class();
          if ( $sb->isEnabled() ) {
            $social_bookmarks[] = $sb->getOutput();
          }
        }
        if (!empty($social_bookmarks))  $social = implode(' ', $social_bookmarks);
      }
?>

There is nothing new here, it’s just the code used in the bm_socials_bookmarks.php box. Only addition is that, we do check if any social bookmarks modules are installed before we proceed, to avoid the case to look for a class if there is nothing there.

Anyway, you can place that code to anywhere you like in product_info.php. Just take care to remove the opening and clsing hp tags (<?php …. ?>) in case you are already in php mode. This code does not display the bookmarks yet, so it really doesn’t matter to where you will place it, so lets say you add it after this section

    if (tep_not_null($product_info['products_model'])) {
      $products_name = $product_info['products_name'] . '<span class="smallText">[' . $product_info['products_model'] . ']</span>';
    } else {
      $products_name = $product_info['products_name'];
    }
?>

Next part is to decide about the display of that buttons. All we have to do is, to echo or variable $social that we created with the code above. This is completely up to you and your design I will add that code just before the buttons section, that is where it says

  <div class="buttonSet">

I will also wrap that into a <p></p>, so that it looks like this

  <p class="social"><?php echo $social ?></p>

  <div class="buttonSet">

You noticed that I gave a class to my new <p>, I call it “social” but you can call it “kuku” or “titanic” or anything you like. I can now style that section as I like, for example some basic css looks like this

.social {text-align:right; padding:0 20px;}
p.social{margin:0;}
.social img{ vertical-align:middle;}

This you can add to the bottom of your stylesheet.css file

Mini template system users, please use following basic css

#product_info .social {text-align:right; padding:0 20px; position:relative; top:-20px;}
#product_info p.social{margin:0;}
#product_info .social img{ vertical-align:middle;}

and add it to file catalog/mts/themes/theme_base_001/style_custom.css

That’s all, and here is how it looks on one site where I did this

Enjoy

Image of article heading on the front page is from logorunner you can go and pick some nice icons from there

multimixer

Leave a Reply