Help needed embedding CodePen in posts

[TechnoBear]

I’ve had a message from a member who’s having problems embedding CodePen in a post. According to this post, all you need to do is paste the link:

Forum Posting Basics

When posting a coding question, it’s important to help people to help you. Ideally, post a link to a web page that demonstrates the issue. If that’s not possible (for example, if your site is not live yet) there are various other options. You might, for example, create a working example of the problem on a site like CodePen. You can then paste the link to your Pen here. (If you sign up for a free account at CodePen, your Pen will get embedded right here, like this: http://codepen.io/oknoblich/…

but the member says

Tried posting just the link of the pen, didn’t work. Tried it with iframe, didn’t work. Tried it with uploading, didn’t work.

I don’t use CodePen - can anybody help out here, please?

[RyanReese]

Can he give us the exact text he is pasting in?

[molona]

He only needs to copy and paste… but make sure that you use the correct URL.

I use the URL I see in the address bar. CodePen has a share button that allows you to share that codepen with someone using a particular theme… on the top corner, at the right, you have some code that you can copy and paste too…

Don’t use the share facilities… not necessary and if you do, you’ll get a text with a link, not a view of the code and its result. At least, in Dicourse.

So I would say the right way is… load the window in your browser, copy the URL in the address bar… paste it in your post

[PaulOB]

Paste as plain text and not as a link.

See here for an example.

[cpradio]

FYI, rebaking

Order status table html/css help

At first I thought doing it without duplicating data, but that was way too tricky for me. So I did duplicate the data and this is what I’ve got (of course the status steps are by @PaulOB from this thread): http://codepen.io/akrimony/pen/xpGCe/ (how do I embed this pen here like others do!!! )

Allowed the codepen to load.

[TechnoBear]

Thanks, all, for the help. I’ve learned a couple of things, and hopefully this will help anybody else encountering difficulties.

[ralphm]

The other thing to note is that the Pen won’t embed if it’s created anonymously. You have to have an account at CodePen (which is completely free, BTW).