Embedding and Eyrie

Since the start, Eyrie has supported previews of designs on social media services like Twitter and Facebook, but now Eyrie has support for embedding designs on long form services like WordPress!

The best part about this support is its ease of use. The first step is to paste an eyrie.io link into your blog post, and then, well, there is no step 2!

Through the magic of the oEmbed protocol, services like WordPress will discover the responsive HTML embedding code and use it to display a preview of your design.

In Wordpress you can get more control over the display of the embed by using WordPress’ optional embed tags.

For example, if you want to set the size that your Eyrie design will appear in your blog, you can use the width and height attributes of the WordPress embed tag.

Screen Shot 2016-11-30 at 9.26.29 AM.png

Embed links will render as a responsive preview of content on Eyrie. One click will take your audience right to your design on Eyrie or it’s source on GitHub, Dropbox or a direct download.

To get even more control over how your design is displayed, you can use HTML to add an Eyrie design to your blog or website. To do this you can use the “Embed” menu item in Eyrie.

Screen Shot 2016-11-30 at 10.31.20 AM.png

The embed menu item will bring up a modal which shows an example HTML snippet you can copy/paste into your website.

Screen Shot 2016-11-30 at 10.27.55 AM.png

You can add the following extra parameters on the https://eyrie.io/embed URL in the iframe:

  • sw=800  hint to the embed on the intended width (e.g. 800 pixels)
  • sh=600  hint to the embed on the intended height (e.g. 600 pixels)
  • hideFooter=true  hide the footer block at the bottom of the embed

The Eyrie embed is fully responsive, so the width and height hints are optional. If you know the intended display size, adding the width and height can aid with load time performance in some circumstances.

Happy posting!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s