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.
Related Articles
About the Author:Mike
Hello, my name is Mike and I'm general director at CreaVN.com. We are a small Philadelphia-based firm dedicate to help small business reach out to more customers through online solutions -- website, social media and search marketing. Whatever your online problem is, we sure do have a solution for that.
21 Responses to How to add a Facebook fan box to your Magento store sidebar
Leave a Reply
I have trouble finding the code you talked about. Could you help me out?
Just shoot me an email and I will help you solve it. Thanks
hello, i am very interested in this facebook fan box i was following your steps all good but then i was lost at “5.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 ” now i dont know where and how to do this… im not a computer wizz but i am having a go.. i hope someone can help me out
Kind Regards
Are you using Magento 1.4.1.0. The file structure is different in there
Go to app/design/frontend/default/base/template/page/2columns-left.phtml to see if that file is there.
Hi! Thanx for the article!
I was able to put in the facebook fanbox block.
It took me days to actually find out that I did put it in. It is only visible in the “wishlist” and “my account” pages.
When I did see the fanbox, it said “lactose free milk”…….
which was pretty funny, but I figured out how to change that very quickly.
I was wondering how I would get it on every page.
Thank you in advance!
Rachel
Oh, right. Now I figured it out. Sorry it took a long time to reply to your comment. I think the issue that your fan box is not displayed on the homepage is because the homepage is not set to the right template. May I see your store to confirm this, please? Thanks!
I just posted the previous post, about only seeing the fanbox on the “my account” and “wishlist” pages.
In the end, I decided to add the fan box to the right too.
So now it’s seen on almost every page. Never double, even though I have it on the right and the left.
I don’t see it in the homepage though.
Any way to put it over there?
Again, thank you very much for the tutorial. I asked someone professional to do this for me, but it was too expensive for me and now I see how easy it is.
Thank you!
I just sent you the reply. Did you see it?
I put in a reply, but I don’t see it, so I’ll put it in again, hoping I’m not putting it in twice.
This is my website: http://www.ziongifts.com
Again, I really appreciate your help!
Rachel
In your case, you will have to edit the file 3columns.phtml since your theme use 3 column layout
Open that file and did the same with 2columns-left or 2columns-right and you’ll see it on the homepage right away.
Mike,
Sorry for the delay in replying.
I did what you said and it’s working perfectly now. I can’t believe it was so easy.
I’ve been having a bit of a hard time with magento…..
I can’t thank you enough.
I put the script in 3columns.phtml and removed it from 2columns-left and 2columns-right, but noticed that it still didn’t show on all pages. So I left it in 3columns.phtmel and also put it in 2columns-right.phtml and now it’s on every page.
Thanx again!
Rachel
hello i posted the reply number 3 im using magento 1.4.1.1 im still unsure on how to complete this step would you be able to email me
thanx Erkan
Erkan,
I’ll try to help, even though I myself am not a wiz, but I do know how to get to those files.
It is not in the magento administration area at all, it is where your host website is. Whichever website is hosting your site – the files are there, to get to that specific file, you might need to use a search – assuming that there is one there.
Everyone has there files by a different webhost.
By me, I need to go into the webhost page, click on “control panel” and then I think “ftp”.
There are many files and folders there.
Good luck!
Rachel
Alright, I have the answer now
Access your web files using FTP program, like Rachel said. Then, go to app/design/frontend/base/default/template/page/2columns-left.phtml and complete the final step. I hope that helps
Hello, thanks for the snippet.
But there is a problem, even if you setup the width, there is an inline style added by the iframe that put the width of the likebox to 198px.
I guess it’s a minimum width we could set up. I can look into this problem and let you know what I found further
Thank you very much!!
Is it possible to contact you when I have another problem?
Kind regards,
Sofie
Yes, sure. My email address is mike at magplazza.com or you can reach me through the contact button on the top. Glad to see you around here
Hi, I followed every step you said and it worked really great. But then I tried to add an activity feed instead but now it just shows the code instead at frontend. How can I fix this?
Thanks in advance.
Could you please email me the URL of your website so I can better assist you? My email is mike at magplazza.com. Thanks for commenting
Alright I fixed it, but how can I make it appear in the right bar instead of the left?