I recently made the jump from my hand-crafted-but-slightly-crappily coded website to a SquareSpace site, a decision I am loving more and more each day.

One of the many wonderful things it can do (and in fact I was doing this on my old site) is embed pens either using a Code Block or by Page Header Code Injection.

'Big deal, you can do this everywhere', I hear you mutter but what you might not know is that you can embed it without any of the code panel or Rerun button or any of the other gubbins so that it feels really integrated - just a pure pen, the way you intended.

If you already know this then go and make us all a cup of tea and stop muttering. If you don't know and you're a CodePen Pro then read on - it's quite straight-forward and just involves a custom theme and one line of CSS that you can load from a pen.

The Embed Code That CodePen Generates

Currently when you hit Embed CodePen Embed button (bottom right of your edit window) you are offered this panel with a few different options at the bottom - Wordpress, iframe, HTML (recommended).

CodePen Embed panel

Because I want to embed this on my site (which isn't Wordpress) I use the HTML option but this tip will work with all three options.

This is the embed code it generates (for this particular pen).

  <p data-height="300" data-theme-id="16746" data-slug-hash="vyZZEz" data-default-tab="js,result" data-user="chrisgannon" data-embed-version="2" data-pen-title="Fire Loader" class="codepen">See the Pen <a href="http://codepen.io/chrisgannon/pen/vyZZEz/">Fire Loader</a> by Chris Gannon (<a href="http://codepen.io/chrisgannon">@chrisgannon</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

This embed code produces this result:

See the Pen Fire Loader by Chris Gannon (@chrisgannon) on CodePen.

This is great if you want to show your code. You can also set it so that a click is required to play it and you can even make it editable. All very useful options.



For a more custom feel you can hide the title and border in the Theme Builder (which you can find at http://codepen.io/[YOUR_USER_NAME]/embed/builder/public):

CodePen Theme Builder

Once you've saved it you can now go back to your embed page, choose your new theme and the generated code will have that new theme applied. You can now strip out most of the fallback code making sure you remove js, leaving just result for data-default-tab="result" for a nice clean pen like this:

Here's the code:

  <p data-height="600" data-theme-id="27228" data-slug-hash="vyZZEz" data-default-tab="result" data-user="chrisgannon" class='codepen'></p>

And the result:


(FYI I changed the data-height value to 600 to make it look nicer).

Removing this code makes it look much better but we're still left with a Rerun button when you roll over it which I don't want because a lot of my work loops so the Rerun button is useless.

Let's remove it by adding a custom CSS file to your theme in the Theme Builder.

Create a .CSS file and add this line:

  .rerun-button{
    visibility: hidden;
}

Now upload it to either your Assets or your own server and paste the URL in the custom CSS field in Theme Builder:

CodePen Pro Theme Builder

Actually here's a better way to add your CSS which keeps it in the CodePen environment, as pointed out by @MarieMosley in the comments.

Create a blank pen and put your CSS code in the CSS pane and save it. Now copy the pen's URL and paste it into the Custom CSS field in Theme Builder.

Next add .css to the end of the URL and if the URL begins with http then change it to https otherwise your secure SquareSpace site won't load an insecure http request. That baffled me there for a while. You should have something like this:

Adding a pen's CSS to the Theme Builder



The Embed Code You Actually Want

Now go back to your pen and click the Embed popup, choose your theme with the custom CSS and generate the embed code. Finally strip out out all the fallback code (again) and you should be left with something like this:

  <p data-height="600" data-theme-id="27226" data-slug-hash="vyZZEz" data-default-tab="result" data-user="chrisgannon" class='codepen'></p>

And now we no longer have that pesky Rerun button:

It's a useful tip which I'm sure many of you already know but it's worth posting so that everyone can have all the nice things.

My site is peppered with pens and they all look nicely integrated now.

Note: The embed code that CodePen generates has this script tag at the end:

  <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Some sites don't allow inline scripting and this will be disabled. In SquareSpace you can inject custom code like this into all pages so you only need to add this once as a global script.

If you run your site on SquareSpace you can find this option here:

config/settings/advanced/injection

And do this:

SquareSpace Global Code Injection

So now if you want a pen as the header of a page you can click the cog SquareSpace page settings icon for that page, click the Advanced tab and paste your embed code in there like this:

SquareSpace header code injection

Pretty handy. Oh and btw the animated SquareSpace logo at the top is a pen I made to illustrate this embed method - click to play it again!

Feel free to nose around my new site to spot the embedded pens - there are a lot of GIFs too because performance is a concern when lots of pens are running and some of my work really hammers the CPU.

And, like life, it's a constant work-in-progress!


1,272 2 30