How to integrate a blog into Big Commerce (without installing anything new)

So I have been searching the answer to this for a while. Seriously. It has taken months. The answer was always there I suppose, I just had to look for a long time. So I thought that I would provide it here for you.

The Problem

Big Commerce doesn’t have blog functionality

At least not what we have come to expect from blogging platforms such as WordPress.

You just have to be sneaky about it. Basically what we will be doing is taking advantage of the news items that are available in the store and formatting the different panels and layout files to function how you want them to. In order to do this you will need to have some knowledge of the BigCommerce Framework. You will be editing some of your site’s template files, SO BACK THEM UP!! Save a copy of your zip file with the words BACKUP – DO NOT EDIT in the folder name.

First, you need your BigCommerce RSS feed:

(If you want to use Feedburner for your feed, you have to make sure that you enable SmartFeed in your Optimize settings.)

Second, create a new page:

Select “Display syndicated content from an RSS feed”

Name the page “Blog” or whatever you want.

Insert YOUR RSS feed into the field that says “RSS Feed.”

Make sure that you change it to your domain.

You now have a page that displays all of your posts.

Changing Your BigCommerce Blog Layout

You can change the layout of how this displays by creating an alternate page.html file. Just rename it with an underscore in first position so that the back end knows it is another page layout file. (_page.html). You then may have to create an alternate PageContent.html panel (_PageContent.html). Just make sure you update the references to this panel in your _page.html file.

(You would then go back in to your “Blog” page that you created and select “_page.html” as your page layout.

What I did was add some content to the PageRSS.html panel. I added a link to the news item page that read “Leave a comment….” to encourage commenting. You could even use an image/button here if you wanted. You can then add a flourish to separate posts if you care to do so.

So how do I post?

Create a new “News Item”

The RSS feed pulls from your News Items.

How do people comment?

See my post here about Facebook comments and add the code to your “NewsContent.html” panel under “Panels” in your template files. If you want to change the look and feel of your Blog layout, you need to edit your “News.html” file.


I added an AddThis bar to the of the post also in the “news.html” file.

That’s it? Any questions?

How to add Facebook comments to a blog (WordPress, Blogger, Other)

I have been researching this quite a bit and so I wanted to do a post about it. And it was quite a pain. I wanted to add Facebook comments to a site that didn’t have blog functionality (Big Commerce, I will do another post on this).

The way that Facebook comments work is that if you pull the code off the Facebook developers site, and then you insert it on a page. If you utilize this resource here, then you can only get the code for one URL and it doesn’t allow for dynamic content.

So if you add this to your page to have Facebook comments appear on each post, you get ALL the comments sitewide. They just aggregate and you will have comments on your posts that belong on other posts. So I asked some superfriends how to do this and they suggested PHP. So I researched some PHP code (I am not a developer) and I came across these interesting tidbits.

There are a couple of ways to add Facebook Comments.

Since these articles already exist, I am just going to link to them instead of stealing content:

In WordPress (thanks Orun!)

In Blogger

And here is the code if you want to implement it on a site utilizing Javascript (this works best if you are adding this to an html file I guess). I found the code here.

 <div id="fb-root"></div> <script src=""></script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); </script> <div id="fbcomments"></div> <div id="fblike"></div> <div id="fblogin"></div> <script> var elemCommentDiv = document.getElementById("fbcomments"); var elemLikeDiv = document.getElementById("fblike"); var elemLoginDiv = document.getElementById("fblogin"); var markupComments = ''; var markupLike = ''; var markupLogin = ''; markupComments += '<fb:comments href="' + location.href + '" numposts="2" publish_stream="true"></fb:comments>'; markupLike += '<fb:like href="' + location.href + '" show_faces="true" width="450" font="tahoma"></fb:like>'; markupLogin += '<fb:login></fb:login>'; elemCommentDiv.innerHTML = markupComments; elemLikeDiv.innerHTML = markupLike; FB.getLoginStatus(function(response) { if (response.status == 'connected') { elemLoginDiv.innerHTML = ''; } else { elemLoginDiv.innerHTML = markupLogin; } }); } FB.XFBML.parse(elemCommentDiv, elemLikeDiv, elemLoginDiv); </script> 


Here is another code that I found that works better. I don’t remember where I got it from. But it is better.

WIth this one you have to add the following to your HTML file somewhere before the </head> tag (and replace “YOUR_APP_ID” with your Facebook app ID):

 <meta property="fb:app_id" content="YOUR_APP_ID"/> 

Then add this code wherever you want the comments to appear:

<script language="javascript" type="text/javascript"> var uri=document.location.href; //get uri var isFbPrm=uri.indexOf('fb_comment'); if (isFbPrm!=-1) { // fb comment url     try {           var prm=uri.split("?"); //get paramaters         var url=prm[0]; //url         var prmItm=prm[1].split("&"); //parameter items         var newPrmlst='';         var newUrl='';         for(var j = 0; j < prmItm.length; j++) //read all param to get rid of fb param            {               var prmId=prmItm[j].split("="); //get param id                  if (prmId[0]!='fb_comment_id'&&prmId[0]!='notif_t'&&prmId[0]!='ref') { //if parameters are not in the list             newPrmlst +=prmId[0]+'='+prmId[1]+'&';               }            }         uri = url+'?'+newPrmlst;        }     catch (err) {        //Handle errors here              }      } document.write("<div id='fb-root'></div><fb:comments href='"+ uri +"'  num_posts='10' width='500'></fb:comments>"); </script> <script src=''></script>

How not to do your SEO… | ZAPSOCK

I have come across this site many times when searching for “Hemet Real Estate Agents.” Right now the site is #3 in the organic SERPS. I’m not sure why. This site is the poster child for how not to do your SEO. It will only be a matter of time before Google blacklists this site. Before I give you the site, I want you to watch this video.

SEOmoz Whiteboard Friday – On-Site Over Optimization from Scott Willoughby on Vimeo.

These are some great tips on how to avoid over-optimizing your site.

Now after watching this, take a look at this site and let me know what you think.