Spreadshirt Facebook Timeline CSS

Posted on April 30, 2012 in Uncategorized

Screen shot 2012-04-30 at 6.17.14 PM

So for the fast few weeks as facebook re-launched facebook timeline, I was planning to figure out how to incorporate our facebook fan page shop ( it couldn’t quite fit in our responsive site application because it was being resized, and it couldn’t fit quite right using the basic edits to the css I provided ) So I got around to realizing that the entire checkout panel wasn’t fully showing up because it was cut off in the iframe that I embedded it in. And so I wanted to fix it as the application for Spreadshirt is not able to be added to facebook timeline business pages. Long story short I figured it out am I am going to share with you how the shop.css on their internal site can be updated to embed your spreadshirt shop into your facebook page app. So if your a Facebook Fan Page owner who has a Spreadshirt shop or you were thinking about creating one to market your shirts, this will be very helpful for you. Lets get started!

Step 1 install a standard static html app page for your fanpage.

Step 2 go to your facebook fanpage App page you’ll notice there is an area for HTML and CSS code. save this under a tab and open a new tab in your browser.

Step 3 Go to your Spreadshirt shop, login to the back end. go to your particular shop that you have named and check on the left hand side where they have a CSS area. In there if you own a shop you can change the look and feel of the CSS. This is where we’ll be next including this line of code:

 

Step 4 Goto your facebook fan page application tab in static html format. You will see a page like this. Enter this code for your spreadshirt shop page:

<iframe id=”ContentCenter” src=”http://yourshopnamehere.spreadshirt.com/” frameborder=”0″ scrolling=”no” width=”810″ height=”3300″></iframe>

Save and presto, in a few minutes you have yourself a fully embedded facebook fan page app with a fully working spreadshirt t-shirt shop on all pages including checkout. Note this took sometime for me to do so if your going to share this information please cite the original source for the Spreadshirt Facebook Timeline CSS code and iframe code. This was not on the web before I figured it out and I was scouting so thank you in advance if you share it and cite Elephantik, and Matt Felten from arkitect.org!