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:

www.YOUR-DOMAIN.com/rss.php?action=newblogs&type=rss

(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.

Sharing?

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="http://connect.facebook.net/en_US/all.js"></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> 

***UPDATE***

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='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>

Riding a Bike

So the book is so close to being done.

I received the proof in the mail and there are a few small edits that I need to make.

But that isn’t what I wanted to talk about.

On New Year’s Eve I was outside with my daughter teaching her to ride her bike without training wheels.

There are two ways that I have found to do this. I can hold on to the handle bars and keep her from falling or I can hold on to the back of the bike seat.

She wants me to hold on to the handlebars because then I can’t let go without her knowing.

When I am holding on to the back of the seat, I can let go and she doesn’t realize it.

These are the times that she just keeps riding.

And she does it well….

Until she realizes that I am not holding on anymore.

Then she loses control and crashes.

I think that we are like that sometimes when it comes to our work.

We need someone to guide us in the beginning.

This could be a coach, mentor, teacher, trainer or whatever he or she may be.

They show us the ropes and then they let go, sometimes without us even realizing it.

But once we realize it, we have a choice to make.

It is a choice.

We can choose to keep going.

Or we can choose to fail.

Which will it be?