Just a quick update, we added support for App Links through the Extract API. For those who don’t know, App Links are:

An open, cross-platform solution for app-to-app linking that gives you the tools you need to expose deep links in your app or to link out to others.

Basically, they are a derivative of Open Graph tags to define deep links for mobile platforms. We have integrated them as a new property “app_links” that is an array of entries. Here’s how all the types look in the response:

"app_links": [
	{
		"type": "ios",
		"url": "applinks://docs",
		"app_store_id": "12345",
		"app_name": "App Links"
	},
	{
		"type": "iphone",
		"url": "applinks://docs",
		"app_store_id": "12345",
		"app_name": "App Links"
	},
	{
		"type": "ipad",
		"url": "applinks://docs",
		"app_store_id": "12345",
		"app_name": "App Links"
	},
	{
		"type": "android",
		"url": "applinks://docs",
		"package": "org.applinks"
		"class": "org.applinks.DocsActivity",
		"app_name": "App Links"
	},
	{
		"type": "web",
		"url": "http://applinks.org/documentation",
		"should_fallback": false
	},
]

So for example, a Tumblr blog looks like this:

"app_links": [
  {
    "url": "tumblr://x-callback-url/blog?blogName=gracemckendryart", 
    "type": "ios", 
    "app_name": "Tumblr", 
    "app_store_id": "305343404"
  }, 
  {
    "url": "tumblr://x-callback-url/blog?blogName=gracemckendryart", 
    "type": "android", 
    "app_name": "Tumblr", 
    "package": "com.tumblr"
  }
]

GoodReads:

"app_links": [
  {
    "url": "com.goodreads.https://book/show/930", 
    "type": "ios", 
    "app_store_id": "355833469", 
    "app_name": "Goodreads"
  }
],

and Hulu:

"app_links": [
  {
    "url": "hulu://w/421667", 
    "type": "android", 
    "package": "com.hulu.plus"
  }
],

We will be putting up some more documentation soon, but that’s all we got for now.

Happy Deep Linking!

Posted 3 months ago by screeley
Embed This

Apparently the new hotnesses right now is scroll-to-play. When a user is scrolling down, a video starts auto playing when the video is in frame.

We’ve included a couple examples in this post if you have new seen this before, so start scrolling.

We created a simple jQuery plugin to mimic this behavior. So, let’s introduce you to ScrollPlay!

With one line of code ScrollPlay will bind to Embedly’s iframes, and use Player.js to play and pause the videos on scroll. Here’s all the code you need:

$('.embedly-embed').scrollplay();

That’s it. Get Scrolling!

Posted 4 months ago by screeley
Embed This

Embedly was an API partner at the latest Media Hack Day in Berlin, our very first journalism hackathon. I was thrilled because this seemed to be the exact kind of hackathon Embedly should be at- helping developers and writers find and render content beautifully.  The results were wonderful: great projects and also inspiring uses of the API.  I’m up for more journalism hackathons, so if you know any, send me a message

You can find the projects on Hacker League.  There were five projects that used the API. One of them won the Embedly prize, and two of them came up 2nd and 3rd overall. 

Hacking journalism #mhd2014

Here are some highlights from projects that used Embedly. 

NewsWheel

This app took home the Embedly prize.  It’s the kind of app I want to exist. It provides an interface to explore the multiple points of view for a news story.  They are arranged on a wheel, and colored based on source.  You can move around the wheel and read the stories. I would love to easily find and explore articles around a story, highlighting where they are coming from. NewsWheel would do that.  Embedly Extract was used to get images and article text.  

image

Here is NewsWheel team presenting their idea:

image

Hi5!

This project took home 2nd prize overall at the hackathon. Hi5! gamifies news. You’re presented with a headline and two images.  You pick the image that correctly matches with the headline. After going through five headlines, you can read deeper into any of the articles and share your results with friends. I found this a pretty fun idea that would be immediately engaging. You can imagine custom questions based on the articles. Embedly was used to extract and render the images from the articles. 

image

image

Here is the Hi5! team being awesome:

image

Paulie

This project took home 3rd prize overall at the hackathon. Paulie is a mobile news reader that is based on your Twitter feed. It renders the headlines and images as a feed, and you can click through to read the full article.  Paulie uses Embedly for the images and content extraction. It is a straightforward and well designed product. 

image

Paulie demo

I got so pumped about it I downloaded a copy at the hackathon, and am looking forward to seeing it up on the App Store. 

Twitter / whichlight: Just installed Paulie, one …

Here is the Paulie team- a collaboration between a journalist, two designers, and a developer:

image

LiveCurate

This is a tool for journalists and editors that helps provide live coverage of an unfolding story.  Content can be brought in from various social media channels and submitted to a story.  This can be done collaboratively with the app. The app allows an editor to manage submitted posts by approving or removing them before they are posted.  The app works on mobile, or on desktop, and can be integrated on popular news sites.  Embedly is used to integrate third party media into the articles. 

screenshot 1

screenshot 2

screenshot 3

TV Maniac

TV Maniac pulls information about TV shows and lets you easily find more information and images on the celebrities in the show. Embedly was used to retrieve and render the celebrity images. 

The design and flow of this app is pretty impressive.

image

TV Maniac App

Excited to go to more media and journalism hackathons!

Posted 4 months ago by whichlight
Embed This

image

Embedly is in Berlin for Media Hack Day. The hackathon is geared towards building new technology for newspapers and news media, with a focus on mobile. I’m excited at the prospect of bringing Embedly to more journalism-focused hackathons, because the Embedly tools are well suited for experimenting with new ways to find, create, and render content.

Here is a quick run down on the tools we have: 

  1. Cards - Our most recent product gives you a pre-designed and responsive embed as a Card, with Twitter and Facebook sharing built in.  You can see a simple example programmatically creating themLearn more about Cards here.
  2. Embed - This is the classic embed tool.  Give it a URL and it gives you back what you need to render the embed. There are several libraries for it, documentation, and general information. I love using the jQuery library.  Here is an example
  3. Extract - Get more information about the URL when it is an article. You’ll get information like the article text, keywords, image colors, entities, and related articles.  You can find libraries to work with it, documentation, and general information. Here is an example of it in use.  
  4. Display - Gives you a proxy to manipulate images, with resize, crop, and fill. Check out the libraries, documentation, and find general information. Here is an example of play and stopping gifs with Display. 
  5. Stream - Access the firehose of embeds.  Stream provides you a real time feed of materials processed in the Embedly API.  You can use this to collect content, search it, and find what is popular.  You get the URL, the Embed or Extract data, and the country it is being called from. Here are some steps to get started

Looking forward to seeing the hacks!

Posted 5 months ago by whichlight
Embed This

In this post I’ll outline a few simple steps to integrate Cards and the Button in your site or CMS.  This is geared towards users who are comfortable editing JavaScript.  If you are unfamiliar with HTML and JavaScript, you can find the basic instructions to include the Button and Cards on your page, but this delves a bit deeper on what the Embedly platform.js script provides.

This tutorial will be helpful if you want to add embed support to your site or CMS for either including media in your posts, or allowing readers to embed your posts.  One of the advantages of using Embedly Cards and Button is that they are free, and you don’t have to maintain them.

1. Add this script to your page, preferably at the end before the closing body tag </body>.

This gives you access to rendering Cards and opening up the Embed tool via the Button. 

2. Include a Card

After platform.js is on the page, if you add the “embedly-card” class to a link, it becomes a card. Here is an example with and without the “embedly-card” class. 

Rendered it looks like this. The first is a link, the second becomes a card.

Man Walks Nearly 3000 Miles Through China. His Before & After Photos Will Shock You.
Man Walks Nearly 3000 Miles Through China. His Before & After Photos Will Shock You.

As with any class attribute, you can append it to the link by hand, or programmatically in your CMS with jQuery or JavaScript for example.  This makes it easier to include an embed form input for links to convert them to embeds. 

You can create Cards for any public link, such as Instagram, Vine, Youtube, and Vimeo media as well as your own blog posts.  You can test links here and see our list of providers.

3. Include the Button

To include the button add a link with an “embedly-button” class as follows:

You can include this button next to your social buttons to allow readers to embed specific posts. If you want to customize the button, you can find more information on button customization here, and an example of an integration here.

That’s it!

By including the platform script and appending the appropriate HTML class, you’ve added Cards and Button to your site.  If you have any questions during integration, feel free to tweet us or post in the forum.

Posted 5 months ago by whichlight
Embed This

Embedly will be presenting on the data and design behind Cards at tomorrow’s Hacks/Hackers held at the Boston Globe.  

I’ll describe the API and its applications in journalism, the process of building Cards, and finally some of the recent analytics we’ve been working on for Cards and media embeds. 

Meetup - Designing Cards for Everyone: Enabling Posts Across Sites and Platforms

Posted 5 months ago by whichlight
Embed This

image

Product Cards now include an “Add to Cart” button.  You can see it live in this article.

Actions are an important aspect of the Cards UX.  They offer readers ways to further engage with the content- like clicking through to the original content or sharing. For Product Cards, the ‘Add to Cart’ button is a natural addition.

Learn more about Cards.

Posted 5 months ago by whichlight
Embed This

image

In January, Embedly released the Embed Button to offer bloggers and publishers easy embedding of their posts. If you add the Embed Button to your blog, your posts can be embedded anywhere that supports HTML and JavaScript, including Wordpress, Blogger, and Tumblr. This makes it easier for readers to share previews to your content on their own sites.

To include the button, add a JavaScript and HTML snippet to your site. Here is an example specific to Tumblr. You can see the default Embed Button here on the Embedly blog, right in the sidebar.

In this example, I add a custom Embed Button to a Tumblr blog. It is for the recent default theme, where the share buttons are displayed upon hovering over the post. You can see the Embed Button to the left of the share buttons below.

image

While the default Embed Button would work, the custom button integrates better with the theme. I’m following the steps outlined in this custom button page.

First, add the JavaScript snippet for the modal, platform.js.

Second, figure out where to add the button. If it is not the right spot, you can always adjust it later. I inspect the source of my Tumblr theme to find where the share buttons are in a post. (Click the image to enlarge)

image

In my case, the share buttons are under the “post-controls” section, so that is where I add the Embed Button. I’m using the 15x16 black button here. In the Tumblr theme editor, I add the HTML for the button snippet. 

There are a few things to note here:

  • The Button is under an a tag with an “embed-button” class. If you were to use “embedly-button” as the class, it would automatically become the default blue Embed Button. Since I don’t want the default button, I change the class away from “embedly-button”.
  • The img src links directly to the15x16 black button on the Embed Button on the custom page. That’s okay, it is served on a CDN so it’s fast.  
  • Finally, the modal code is included in the anchor tag onclick attribute with the permalink of the post. This way each post gets a button that opens up a modal for that post. ‘{Permalink}’ is a specific syntax to get the permalink in a Tumblr theme.

I include some CSS to adjust the position of the Embed Button. It already inherits the styles from the post-controls section (like the hover styling).

     .embedly-control{
top: -2px;
left: 3px;
}

I save the theme, and it’s done! Now there is a custom Embed Button that fits with my theme. 

Now when the Embed Button is clicked, a modal pops up for that post with the associated Card for embedding. 

image

See an example post here

The process is similar wherever you’re adding an Embed Button. Pick an image for the button, inspect the source to see where the other share buttons are, and add it alongside.

Posted 5 months ago by whichlight
Embed This

Over the weekend was Hack4Good in Berlin. Seemed like a rad event so we decided to support it and be a sponsor. Andy, John, and Dave swung by for the kickoff and gave a talk. John and I went to the project demos. 

#hack4good | Geeklist International hackathon series

More information on the event: Geeklist #hack4good 0.5 Global - Berlin, Germany

You can check out the project demos here:

#hack4good 0.5 Berlin - Project Demos

The winner was an app called BulletMap:

Purpose: Provide citizens/researchers/journalists with a digital crowdsourcing tool to identify and document the type of bullets being used in conflict regions via mobile phone or online portal.

Posted 6 months ago by whichlight
Embed This

Last week we hosted an event at Istanbul Hackerspace, Creative Hacks: Show and Tell, as a way to bring together developers and get to know the scene a bit more in Istanbul. The turnout was great, we felt very welcome, and heard about some interesting projects.

Creative Hacks: Show and Tell

istanbul hackerspace

Embedly got some pizza, sodas, and beer for the event.

Pizza Party

Igal spoke about cultivating art, tech, and community through his 319scholes space in Brooklyn. 

Twitter / istanbulhs: Mekanda bir şeyler oluyor: …

I spoke about various web-based art projects with JavaScript.

Twitter / istanbulhs: Kawandeep aka @whichlight …

Twitter / yasarsafkan: People watching @whichlight’s …

Ahmet spoke about an open hardware board with sensors that push the data to the cloud. The board includes a tear gas sensor. 

Twitter / whichlight: .@ahmetalpat created a board …

OpenSensoMap: Biber Gazı Yoğunluk Tespit Cihazı

Engin spoke about starting a makerspace in Istanbul.

Atölye Istanbul - Your new creative community space

Patrick spoke about CoderDojo Turkey to teach programming to kids.

Twitter / biberhmet: @319scholes @whichlight …

There was also a presentation of an iOS project that pulled shared videos from Facebook friends to view sequentially.

Sean gave a few words about Embedly visiting Istanbul.

Twitter / elifkus: Embed.ly ‘den Sean embedly’yi …

It was a fun meetup; we all made some new friends, and look forward to future collaborations.

Posted 6 months ago by whichlight
Embed This