In the previous post, I have guided you how to add a Facebook Like button to your product page. That’s good, right? How’s about going further by actually have your own Facebook fan box for your store so that you can show people how popular your store is? Today, we will begin to implement static CMS block to build a Facebook fan box in your sidebar and from the concept that I teach you today, you will find it easy to apply something else in the future (Or just let me know and we will build it together 
)
What are the advantages of the Facebook Fan box
Facebook fans are like royal customers to your store. Unlike the visitors who are landing at your store from various traffic sources anonymously, hang around your site and leave, fan people are people who love your business, care about what value, solutions and products you offer to them.
Each business, or store owner, has a Facebook page today. It’s the useful place to post discount information, coupon code or new items. It’s also the place for people to discuss and ask questions about your items, after-sale service, etc. I personally have some friends who own fashion stores online and almost all of them have a Facebook page. Every time they have a new fashion collection, their page is really full of item pictures and lots of people commenting around to ask questions about price, shipping and handling, etc. It’s like a market in my eyes, full of potential of an e-commerce world.
Because of the importance of your store fans and FB page, a fan box is a necessary tool to get more subscribers to your page. With more subscribers, you have more chances to promote your products and expand your business base.
What is a CMS block in Magento store
To the simplest explanation I could think of, let’s imagine your store front design is like a comic book page with a sidebar on your left and main content is on your right, CMS blocks are those square boxes that contain pictures.
If you have set up a Magento store, you will probably see the newsletter block, for example. When you add an item to cart, you will see the shopping cart block in your sidebar. Blocks are the basic components that structured the design of your store frontend.
Unlike those dynamic blocks, which can function and are controlled by backend code, CMS block contains static content and may not change over time. CMS block also is easy to implement and can be created in the admin panel. Therefore, if you have something that are not changed over time such as ads, popular items, etc, you can use CMS block to display them.
How to build a fan box using CMS block in Magento
Create a CMS block in admin panel
- Log in to your admin panel. Go to CMS->Static Blocks.
- Click on Add new block.
- In the new Window, type in the following settings
- Block Title: Facebook Fan page
- Block Identifier: fbfanbox
- Stores: Select stores that you want this CMS block to appear
- Status: Set the status settings to Enabled so that you CMS block become visible on the homepage.
- Content: Go to Facebook and set up your Fan box here. Grab the code of you Fan box when you are done with tweaking and place it into the content text box of the CMS block you are adding. Here is how the code should look like:
You will need to set up the width property so that it will fit with your sidebar if the fan box is too big when you preview it.
- Click Save to save the block that you just have added.
- Open the file app/design/frontend/default/[your-theme]/template/page/2columns-left.phtml by your favorite text editor or by Notepad++. Find this line of code
<?php echo $this->getChildHtml('left') ?>Add this line of code directly under it
<?php echo $this--->getLayout()->createBlock('cms/block')->setBlockId('fbfanbox')->toHtml() ?>Explanation of what you just did: The file 2columns-left.phtml is a template file, one of the three building blocks in a Magento theme. Layout, templates and blocks, they are basic components that decide which appear and which do not appear on your store front end. So, how do they work exactly? Layout is like a paper where you plan everything that is going to appear on your store front end such as product listing, menu, sidebar, etc. Then, templates are what you put on the layout. And as you can see in the code above, we are placing our fan box block inside the template, so we can think template is the collection of many blocks and are put in hierarchy order to render the look of our store.
What we just did is we call the function to create a block at the position on the left sidebar. Then, the system needs to know what block we are talking about, right? We tell the system we want to take the block with ID fbfanbox, which we have set up in the above step and render it out to HTML.
Now, what if you want the right sidebar instead. Then, you just need to open the file 2columns-right.phtml, find the code that renders the right sidebar and put our code to display fan box in. It’s easy, isn’t it?
Wrap up
So today we have covered more advance topic. We know how a Magento theme structured. It’s structured by 3 basic components: blocks, templates and layout. Blocks inside templates and many templates are inside a layout. By creating new CMS block in the admin panel and insert some custom code inside the template file, we have finished adding a fan box to our store sidebar. I hope you find this tutorial interesting and we will have something more interesting in the next post.
