Chili Pepper Design

Web development relleno

A Simple FBJS Image Carousel (or Slideshow) for Facebook Page Tabs

| Comments

(Plug: Looking for an easy, fast, affordable way to create custom Facebook landing tabs? Check out my new product: Thanks!)

This little code snippet is really basic, and not actually that good or clever. You can make a much nicer slideshow or carousel if you put a little time into it. But I just want to demonstrate how many of the nice JavaScript effects we are used to on the “Web 2.0” are also possible on a Facebook Page via Facebook’s Animate library. It’s not as robust as jQuery or Scriptaculous, but since you can’t import those libraries to a Tab the Animate library will have to do. :)

The final result looks like this:
Screenshot of the Chili Pepper Design Facebook image carousel

And you can view a live demo on the CPD Facebook Page

For instructions on how to create your own custom Facebook tabs, read my tutorial here.

To begin, here is the simple FBJS <script> code:

How to Make Custom Facebook Fan Page Tabs With FBML, Part 2

| Comments

UPDATE 2-14-2011: FBML is going away – learn about Facebook iframe tabs on Facebook Pages here

UPDATE 3-10-2011: Easily create and manage custom Facebook Page Tabs with SplashLab Social – Now available!

Quick and Dirty Custom Facebook Page Tabs and Boxes

The fastest and easiest way to add custom Tabs to a Page is with the Static FBML application. A nice visual tutorial of this method is posted on I will also quickly outline the process here:

How to Make Custom Facebook Fan Page Tabs With FBML, Part 1

| Comments

UPDATE 2-14-2011: FBML is going away – learn about Facebook iframe tabs on Facebook Pages here

UPDATE 3-10-2011: Easily create and manage custom Facebook Page Tabs with SplashLab Social – Now available!

If you have started to dabble in the new wave of “social media marketing” you probably made your business/brand/company/band/etc a Facebook Fan Page. These are basically just like regular Facebook user profiles except instead of a business having “friends”, they have what are (more accurately) called “fans”. This seems like a good idea since Pages provide a great way for companies to interact with their customers. That part of Fan Pages is a good idea, and everyone seems to have a link to “find us on facebook!” now because of it! But there are challenges.

It’s hard to brand a Facebook Page. You can change the Profile Picture and upload photos and videos, etc, but it all feels very much like Facebook still. This consistent visual look is one of the great things about Facebook, but if someone finds your company on Facebook before ever visiting your regular website, your ability to educate the visitor about your products or services is extremely limited. And if you send someone to your Facebook Page from your regular website, there is no clear way to route them back to where the sale will actually be made. It can be a problem. Once they hit Facebook you are at the mercy of whatever users post on the Wall or write in the Reviews tab.

Custom Loops for Custom Taxonomies in WordPress 2.8

| Comments

WordPress 2.8 saw a big expansion and enhancement of it’s Taxonomy API, allowing for easy creation of custom taxonomies. The default WordPress “category” and “tag” taxonomies are sufficient for most blogs, but the ability to define additional sets of terms (“vocabularies”) makes the platform a much more flexible and powerful Content Management System than it was before. Ever since Justin Tadlock opened my eyes to how to create and use additional taxonomies, it seems like every WordPress project I work on needs one or two extra vocabularies. :)

Working with Drupal as much as I have, I became very accustomed to having multiple taxonomies. It’s incredibly useful. A classic example is Movies: each movie has a director, some actors, a year it was made, etc. You could just lump all these together with a bunch of “tags” in WordPress, but grouping “Actor” and “Year” tags together into taxonomies makes site organization and navigation much simpler (and more sensible).

But there are some challenges still to using WordPress taxonomies. While there is some support in the new API word making queries based on specific taxonomies, there is not a lot. You can filter your Loop by a term in a single taxonomy via the query_posts(), as Justin shows in this example:

WordPress: A Loop Inside of a Loop With Working Comments

| Comments

I was faced with a problem while creating a WordPress theme the other day. I was grouping posts together using a 2.8 custom taxonomy (which is my new favorite thing in WordPress), and wanted to display a list of all related posts above the Comments template. Basically wanted a small Loop inside of the main Loop – a loop within a loop.

I found a few pages online which address this, such as WordPress Loop Inside of a Loop and Calling a WordPress Loop from inside a WordPress Loop. The idea is pretty simple, and these techniques work fine most of the time.

Everything looked fine to me, as well, until I hit “Submit Comment” to test it… and the comment appeared on the wrong post.

The problem is that inner loop sets the global $post object to the last item in that loop. The methods the_post() and setup_postdata($post) set up the global variables which are needed by the_permalink(), the_title(), comments_template(), etc. So if you call any of these usual “Loop” methods again AFTER the inner loop, they are operating on the last post in the inner loop instead of the current post in the main loop.

The trick is to save the $post objects before the inner loop and to reset them again after the inner loop. To do this, change the Loop structure to follow this template:

$posts = get_posts($wp_query->query);  //get the posts
foreach($posts as $post) :   // cycle through them in the main loop
	$currentPost = $post;  // save the current "main loop" post 
	setup_postdata($post);  // instantiate the global post variables to the main loop post
	the_title();    // use your usual Loop methods 

$innerposts = get_posts('order=asc&mytaxonomy=mycustomerterm);  //get the posts from my custom taxonomy
	foreach($innerposts as $post) :   // cycle through them in the main loop
		setup_postdata($post);  // instantiate the global post variables to the inner loop post
		the_title();    // the inner loop post's title
	endforeach;  // end of inner loop

$post = $currentPost;  // reset the post from the main loop
	$id = $post->ID;  // reset the post from the main loop
	comments_template();  // now, the comments for the post in the main loop
endforeach;  // end of main loop

Another way to do this might be to NOT set the global variables in the inner loop, thus avoiding this issue with the comments entirely. You would just have to directly access the post variables in the inner loop, i.e. $rel_post→post_title instead of the_title(). It would work for simple things, like the title and slug. Check out custom select querySelectQuery in the WordPress Codex to figure out how to get all of the fields you need from the DB to use this method.

Magento - Six Months In

| Comments

Yes, this basically amounts to a good old fashioned rant post. But there is a purpose behind it: to educate those thinking of using Magento to power their ecommerce store about potential concerns and pitfalls. Read on, and enjoy.

Magento is an ambitious, promising ecommerce platform.

Magento really is a neat piece of software. Varien has really outdone itself. It is one of the most feature rich ecommerce platforms out right now and =drumroll= it’s Open Source!

After comparing prices and features a year ago, Magento was chosen from amongst all of the other ecommerce solutions available for some upcoming projects. I have now helped setup, develop, maintain and run four Magento stores. I’ve been working with Magento almost exclusively for the past 6 months.

It’s pretty great!

But it is not perfect.

How to Edit Orders With Configurable Products in Magento

| Comments

Up to and including the current release of Magento (, an admin cannot properly edit an order containing configurable products. Magento warns you of this when you click the “Edit” button, and if you proceed the order appears on the edit screen containing only the Simple and Virtual products. Configurable, Bundled, and other products are removed from the order.

I am finding this more and more with Magento: it is the most feature-rich and impressive of all Open Source commerce solutions, but it is still a young piece of software and the result is that all of these great features are only about 80% operational. But enough ranting about Magento (for now).

You need to be able to edit an orders containing configurable products! The code below allows you to do this by converting the Configurable products into their respective Simple products. This is not the same as actually being able to edit the Configurable products. This approach is the same one that Varien takes when allowing an admin to create new orders: you cannot add Configurable products, but you can add any of the Simple products that constitute the Configurable ones.

Changing Magento Order, Invoice and Shipping Number

| Comments

A client needed to change the default order numbering scheme in Magento 1.3. There is no simple administrative backend setting to do this, however. The order, invoice, shipping and credit memo numbers are fixed – 9 digits long prefixed with a 1. The client wanted all of their order numbers in the form “AZ-xxxxx” – two fixed letters, a dash, and then 5 digits. So… how go about changing this?

Looking around the Magento forums and a few other websites (listed at the bottom), combined with poking around the in Magento code and database (phpmyadmin was very helpful), I eventually figured out a way to do it fairly simply, and without modifying any code! All that is required is running a few SQL statements against the database.

Magento: How to Protect Pages So Only Logged in Users Can View Them

| Comments

There are times when you want all or part of your Magento online store to only be visible to customers who are logged in to the website. Once such example is a “wholesale” website where only approved wholesale users should be able to view products and checkout. This functionality is not built in to Magento, but it’s a just a few simple little code hacks away.

NOTE: On 8.25.09 I updated this post since I have improved the technique.

CSS Equal Height Columns With Bottom Border and Margin

| Comments

The saga of CSS “equal height columns” is long and frustrating. It’s a common and attractive design element, but ever since we stopped using HTML Tables for our 2 and 3 column web page layouts in favor of Divs containers, it’s been a real challenge to implement them using standards based CSS and markup.

My favorite of the many clever techniques so far devised to solve this problem is the Position Is Everything One True Layout method (although don’t try to use internal anchor links with this!). Another favorite is the Equal Height Columns with Cross-Browser CSS & No Hacks, but it actually seems a little more complicated and hack-ish to me (despite the name). And if you really want it to just work to no extra markup and don’t mind a little inelegance, the good old Faux Columns approach with a background image works well too.