Embed web page coded in Ruby on Rails in another web site?

I would like to make my web page that I coded with Ruby on Rails as backend embeddable so that users are able to easily share it by copy and pasting some embed code. (much like YouTube embed code, but for a webpage) Could someone point me to a tutorial or general direction how to go about doing so? I'm planning to embed my web page in Joomla CMS.

Many thanks.

Pier.

Solution 1:

Let's suppose you want to create a Widget for a mobile app store. The widget would allow to embed information of a certain app in any web page.

If we use the script tag, the embeddable code could look like this:

<script src="http://my_appstore.com/apps/1234.js" type="text/javascript"></script>

Where 1234 would be the id of the specific app we would like to embed.

If we use the iframe tag the code to put in other web pages could look like:

<iframe src="http://my_appstore.com/apps/1234" width="500" height="200" frameborder="0"></iframe>

First thing we have to decide is what kind of tag to use. Using and iframe tag is more straight forward but we are limited to use an iframe. Using an iframe is not a bad option but if you distribute this to third party web pages you won't be able to change that afterwards. Instead, it is preferable to use a script tag that will insert an iframe. This tag will also allow you to switch to embedding your content directly into pages if you choose to do so afterwards.

Inserting an iframe means that the proportions of your content have to be fixed and can't change to adapt to different window sizes in the parent window. Embedding your content directly doesn't have this problem but you have to be very careful with CSS and add style to all your elements because otherwise they will inherit the host page styles. Also embedding your content directly and then making AJAX calls will likely produce cross-browser request problems unless you use JSONP.

Let's first create a simple web page with Sinatra that we will use to embed our Rails Widget:

mkdir host_page
cd host_page

With your text editor create host.rb file inside host_page folder:

# host.rb
require 'sinatra'
get '/' do
  erb :index
end

Create index.erb and launch host_page:

mkdir views
cat '<script src="http://localhost:3000/apps/1234.js" type="text/javascript"></script>' > views/index.erb
ruby host.rb

Now if we visit http://localhost:4567/ we see nothing but there will be a widget there soon.

Let's now create the rails app that will be embedded. Start with a new folder for your project and do:

rails new widget
cd widget/
rails g controller apps
rm app/assets/javascripts/apps.js.coffee

Add the needed routes:

# config/routes.rb
MyApp::Application.routes.draw do
  resources :apps
end

Edit your apps controller:

# app/controllers/apps_controller.rb
class AppsController < ApplicationController
  def show
    @mobile_app = {
      :title => "Piano Tutorial",
      :descr => "Learn to play piano with this interactive app",
      :rating => "*****"
    }
  end
end

In that controller we are always returning the same app. In a real situation we would have a model and the controller that would retrieve the appropriate app data from the model id found in params.

Create your javascript view and start the server:

echo 'document.write("<h3><%=@mobile_app[:title]%></h3><p><%=@mobile_app[:descr]%></p><p><em><%=@mobile_app[:rating]%></em><p>");' > app/views/apps/show.js.erb
rails server

And that's it. Go to http://localhost:4567/ and see your widget.

In case you want to use an iframe, replace the contents of your show.js.erb file with this:

document.write("<%=escape_javascript(content_tag(:iframe, '', :src => app_url(params['id'])).html_safe)%>");

Here we are using a content_tag but it could also be done in a way similar the previous one by just using the <iframe> tag as previously.

Obviously if we use an iframe, we are doing two calls, one to render the iframe and the other one to load the contents of that iframe. For this second call we are still missing an html view. Just create the view like that:

# app/views/apps/show.html.erb
<h3><%=@mobile_app[:title]%></h3>
<p><%=@mobile_app[:descr]%></p>
<p><em><%=@mobile_app[:rating]%></em><p>

Now you can point again to http://localhost:4567/ and see your widget inside an iframe.

Solution 2:

A bit late, but I stumbled over this Question while searching for a solution by myself. I found a Gem that does exactly what's described. It will make your rails app embeddable like YouTube Videos or Content from other Webpages like Google Maps, Instagram, Twitter… It's called EmbedMe

To use you simply need to change your Routes to define, which Paths need to be embeddable

get 'private', to: 'application#private'
embeddable do
  get 'embeddable', to: 'application#embeddable'
end

Gem on Github or Documentation

Solution 3:

In case anyone is coming across this now, almost 9 years later...

If you use the JavaScript method, you'll have to allow Cross-Origin requests, like @abessive mentioned in their comment above. I was able to do this by adding this to the top of my controller class:

protect_from_forgery except: :method

where :method is the method that will be called for the embed request.

Here's my controller:

class PagesController < ApplicationController
  protect_from_forgery except: :home

  def home
    render 'index.js'
  end
end

And the relevant route in routes.rb:

get "index.js", to: "pages#home"

And I have views/pages/index.js.erb with some JS code that renders the widget.

(I'm using Rails 6.1.4)