As we look towards April, I thought it'd be a good time to update everyone on dev status and a recent milestone we've hit on the Codeply Roadmap...
Introducing Embedded Plys
Plys are now embeddable for use on others sites. When you click the 'Embed' button from the ply's Metadata menu, a dialog modal opens with embedding options. An embedded ply will contain upto 4 tabs: View, HTML, CSS and JS. You can copy and use the default
<script src="http://www.codeply.com/js/embed.js">.. code.
There are also some customization options to set the ply's default selected tab, hidden tabs or change the default frame height 300px. Changing the options will update the embeddable code accordingly by setting the attributes on the DIV container..
<div data-codeply="xxxxx" data-codeply-select="html" data-codeply-hide="css" data-codeply-height="280px"></div>
The default selected tab is the View ply previewing tab, and the CSS and JS tabs will be automatically hidden if the ply doesn't contain CSS or JS code.
If you want to embed multiple plys in a site, you just need to include the embed.js script once, and add containers for each ply you want to embed...
<div data-codeply="codeplyid1"></div> <div data-codeply="codeplyid2"></div> <div data-codeply="codeplyid3"></div>
You can also use an
iframe with the appropriate params if you're into that sort of thing!
The responsive embedded ply...
As an oEmbed provider, Codeply also now supports the oEmbed v1.0 spec to support discovery and embedding of ply's on sites that support oEmbed as consumers.
At this time most oEmbed consumers will only consume oEmbed providers that are white-listed. Codeply.com has been white-listed on iFramely and we're pending white-listing approval on Embed.ly. Of course we'll continue to champion Codeply embed support on more sites!