Allow users to embed my content into their sites (like blogs) -- rails 4

Question

I'm building a Rails 4 app, and what I want to do is offer my users the option to embed my content onto their own sites (like their blog) via embeddable code.

In other words, I want to have an erb page with some content on it, and a button that says "Embed". When users click that, a small bit of embeddable code will appear, which they can copy and paste onto their blog, etc. This will display the content from my page.

What is the best way of going about this? Please be as descriptive as possible, as I'm kind of new to this. Thanks!

Answer 1

iFrame

The way it's achieved with current technology is to generally use an iframe, called from JS on the client website. You'll have to ensure you have the correct CORS policy set up (to allow the connection from remote sites)

---

Here's how you'd do it from a high-level perspective:

#config/routes.rb
namespace :embed do
   resources :pages, only: :show, path: "" # -> domain.com/embed/1
end

This will give you what's known as an endpoint - which you will be able to point to from your client websites (embed code). In essence, it will give you the ability to use your JS widget to connect with your_domain.com/embed/:blog_post_number

This can then be handled with the corresponding controller:

#app/controllers/embed/pages_controller.rb
class PagesController < ApplicationController
   layout false
   def show
      @page = Page.find params[:id]
   end
end

#app/views/embed/pages/show.html.erb
<%= @page.title %>

This will render the show method of the pages controller, which will render the corresponding view without a layout. This will do nothing on its own, but if you call it correctly from a javascript widget, you'll be able to display it in your iFrame

---

JS

Thus you'll need a widget to "embed" your code with. The typical way to do this is to create a javascript "widget" which will reside on your server (in the public directory). You'll then prompt your users to call this script when they embed the code:

#public/embed.js
window.onload = function() {

   //Params
   var scriptPram = document.getElementById('load_widget');
   var id = scriptPram.getAttribute('data-page');

   /iFrame
   var iframe = document.createElement('iframe');
   iframe.style.display = "none";
   iframe.src = "embed/" + id;
   document.body.appendChild(iframe);
};

You'll then prompt users to embed the following JS:

<script id="load_widget" src="http://domain.com/embed.js" data-page="1"></script>

Here's a great resource

The bottom line goal here is to provide the ability to embed an iframe on the user's site, which will end up calling your domain.com/embed/:id url

The above code might be a little bloated (Youtube just lets you put a "naked" iframe onto your site directly). How you do it will depend on the complexity you want to have, and any future extensibility you plan for

---

CORS

Finally, you need to manage the "CORS" (Cross Origin Resource Sharing policy). This is a standard protocol which essentially prevents any XHR requests from non-origin domains.

The reason for CORS is that it will prevent your server from being attacked by anonymous requests across XHR. I'm not sure as to the deep architectural implications of it - but you'll definitely need to ensure you have the CORS policy set up on your server to allow the embeded pages to be called / shown.

The most efficient way to achieve this in Rails is with the RACK-CORS gem:

#config/application.rb
config.middleware.use Rack::Cors do
  allow do
     origins '*'
     resource '/embed.js', :headers => :any, :methods => [:get, :post, :options] #-> I believe resource needs to be a specific URL - will have to check this
  end
end