---
layout: post
title: >
  Easily embed flickr images into posts
tagline: >
  Easily embed many resources from around the web with Embedly.

flickr:
  url: http://www.flickr.com/photos/tonyfast/15198543551/

deck: http://www.slideshare.net/tonyfast1/the-materials-data-scientist


references:
- http://embed.ly/ #0
- http://embed.ly/embed/features/providers #1
---

# Embed.ly

[Embed.ly]({{page.references[0]}}) is a service that provides its users to
embed content from endpoint urls for [250 services]({{page.references[1]}}).

It is is easy to test url's by modifying the ``href`` in the HTML embed code below

{% capture embedly %}
{% highlight html %}
<a class="embedly-card" href="{{include.url}}">crop_template</a>
<script>!function(a){
  var b="embedly-platform",
  c="script";
  if(!a.getElementById(b)){
    var d=a.createElement(c);
    d.id=b,
    d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";
    var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);
</script>
{% endhighlight %}
{% endcapture %}

{{embedly}}

## On ``research-pages``

I added features for **Flickr** images and general **embedly** links.  See [``_includes``](https://github.com/Materials-Informatics-Lab/research-pages/tree/gh-pages/_includes)

> **Why both when they do the same thing?**  Be specific.  It will save time down the line.

Use the following liquid syntax in your posts and pages.


{% capture html %}
{% highlight html %}
{% raw %}
# Show Flickr Image

{% include flickr.html url='http://www.flickr.com/photos/tonyfast/15198543551/' %}

# Try A SlideShare Presentation

Use the general embedly include statement.

{% include embedly.html url=page.deck %}
{% endraw %}
{% endhighlight %}
{% endcapture %}
{{html}}

# Examples in Action

## Flickr Embed

{% include flickr.html url='http://www.flickr.com/photos/tonyfast/15198543551/' %}

## SlideShare Embed

{% include embedly.html url=page.deck %}

Modifications to the styling can be gleaned from the [embedly code generator](http://embed.ly/code).