How to Use CodePen With the DZone Editor

So, it turns out that using CodePen with the DZone editor is actually extremely easy. Phew! To get started, head on over to your CodePen profile and open up a Pen. (Pauses for a few seconds...) Great job! If we're all on the same page (though hopefully not the same web page, or else you've hacked my super anti-climactic CodePen account), you should be on the CodePen editor, and see something like this: 

If that picture is super blurry, don't worry, the very basic code in it isn't super important; I just want to make sure those uninitiated with CodePen have no problem in following along. 

Okay, so, now that you're in the CodePen editor, you should see a little button on the bottom right hand corner that's labeled 'Embed.' It looks like ça: 

Once you've clicked the 'Embed' button, another in-window pop-up should, well, pop up. There are a bunch of options contained in this window, but we're only concerned with that most elusive of prey for online content creators, the iframe. 

When this window opened for me, it defaulted to showing the 'HTML (recommended)' tab at the the bottom in the 'Copy & Paste Code' section. But, as you can see, there's a tab labeled 'iframe' direclty to its left. Click on that tab. 

You should now see an iframe appear in the box. Go ahead and copy all of that HTML. 

Now we're going to be switching over to our DZone editor. 

Once logged into your DZone editor, you should see a toolbar like this: 

That icon on the far right that looks like an HTML tag (</>). Well, coincidentally, that's how to get to the part of the editor that allows you to edit the HTML of your article. I wonder if they did that on purpose... Well, either way, click on that button. Now, paste that iframe from CodePen into our HTML. But, for our iframe to work, we need to add https: in front of the src attribute assigned to the iframe by CodePen.  

For example, my iframe from CodePen originally looked like this: 

<iframe height='265' scrolling='no' title='OwdXBm' src='//codepen.io/pjabker2/embed/OwdXBm/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/pjabker2/pen/OwdXBm/'>OwdXBm</a> by Jordan (<a href='https://codepen.io/pjabker2'>@pjabker2</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

In order for it to work with our CMS (because we like secure sites), I had to tweak it to this: 

<iframe height='265' scrolling='no' title='OwdXBm' src='https://codepen.io/pjabker2/embed/OwdXBm/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/pjabker2/pen/OwdXBm/'>OwdXBm</a> by Jordan (<a href='https://codepen.io/pjabker2'>@pjabker2</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

This lets DZone.com know that the iframe originated from a secure site based upon the latest HTTPS protocol. 

And... BAM!

Thanks! Hope y'all enjoyed the post.