How To Add A Social Media Share Bar In ZenCart

Add A Cool Share Bar Into Zen Cart And Keep Your Customers Engaged ...

We mentioned to a client of ours that the social media sharing on their Zen Cart™ powered Audio Visual Installation Website was somewhat lacking in user interaction, so we suggested using a rather neat little share bar from ShareThis.

This would allow for a fully functioning social media share bar whilst keeping their business contact telephone number prominent on the page as website visitors scrolled down deeper into the page to find information on services and products.

How To Find The Share Bar And Add A Logo

Visit the ShareThis Website ...

Click on the 'Get The Button Box' (currently green in colour as we write this)

This will open up a second page where you can select the type of website format onto which to add the share bar.

Choose the 'www platform' as the type

There are many other options available however for zen-cart integration this is the best platform available

Once you have selected the box then look to the far right and click on 'Pick A Style'

The style of share bar we chose was one that places sharing buttons at the top of the page but is only visible when a website user scrolls down the page ..

This allows the website theme to be fully visible without being crowded out by the share bar. It also allows for the addition of a logo to the share bar where the company logo and telephone number is always visible to any potential customer.

The logo is sized at 300 pixels by 40 pixels and we suggest that a vector image is created and saved as a gif type image. We utilized a free service to achieve this from gimp. You will need to upload this image to a web server as this is how the share bar imports the logo.

The final step is the 'Share Bar Customization'

We recommended inserting ticks into both the  available boxes, this will allow you to track who is sharing what and where.

In addition to this you will need to provide the url of the company logo with telephone number and finally choose the share buttons you would like to add and position them accordingly. We chose in this case, Facebook, Google+, Twitter, Linkedin, Pinterest, Blogger, Reddit, Stumbleupon, Delicious, Folkd, ShareThis & Email Yhis To A Friend options in that order. There are many more sharing websites you could add, however for display purposes we recommend no more than 12 choices

When you are satisfied with your share bar then click on 'Get The Code', this will then trigger a pop up for you to register with share this to allow you to track your shares. The very final page shows you the necessary code to add to your zencart templates.

How To Enter The Share Bar Code Into Zen Cart

The 'head section code' should be added into the header.html file under all other calls for javascript

The 'CSS code' should be entered into the stylesheet_main.css file... N.B. during this process we recommend deleting the <style type="text/css"> line at the beginning of the code along with the </style> at the end of the same piece of code ... we discovered it was causing issues with the way that the share bar was being presented on screen.

Finally, for the 'code to be placed at the end of the page', we added this to the tpl_footer.php file under all the other php script at the bottom.

Everything should then be displaying correctly and ready to share your zen cart website with the world. Here are example pictures of what the share bar looks like once integrated into zencart.

If you have any questions or need assistance in integrating a share bar in zen cart, then give us a call and we will be happy to assist.

No comments:

Post a Comment