Skip to main content

Ruby on Rails

Installation#

Example Repository: https://github.com/flayyer/integration-examples/tree/main/examples/rails

We're going to use flayyer/flayyer-ruby to format FlayyerAI URLs and kpumuk/meta-tags to render them into the <head /> of your views. Signed URLs are made with jwt/ruby-jwt explained in the Advanced usage section.

1. Install flayyer, meta-tags and jwt gems#

Add to your Gemfile:

Gemfile
gem 'flayyer'
gem 'meta-tags'
gem 'jwt'

And then execute:

Terminal.app
bundle install
rails generate meta_tags:install

2. Generate smart image URLs#

Use before_action to provide the smart image URL to every view.

You can Find your project-slug in your dashboard. If you don't have a project yet, create one here.

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
before_action :set_flayyer
def set_flayyer(&block)
flayyer = Flayyer::FlayyerAI.create(&block)
flayyer.project = "your-project-slug"
flayyer.path = request.path
image_src = flayyer.href.html_safe
social_image = {
_: image_src,
}
set_meta_tags({
image_src: image_src,
og: {
image: social_image,
},
twitter: {
image: social_image,
},
})
end
# ...
end

3. Render meta-tags#

Add display_meta_tags to your layout.

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>RailsExample</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= display_meta_tags site: 'My website' %>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
<body>
<%= yield %>
</body>
</html>
note

If you inspect the <head /> of your HTML you should see the og:image and twitter:image tags with flayyer.ai URLs with your project-slug and current pathname on it. If you're having trouble, please make sure they are not overwritten elsewhere.

4. Voilà 🎉#

Now you're able to manage your link previews from your dashboard, create content from templates while preserving your brand style and export it as social media formats.

Go to your dashboard 🚀

Advanced usage#

Signed URLs#

The flayyer gem supports HMAC and JWT signatures.

Find your secret key in your dashboard > your project > Advanced settings > Signed URLS, and enable the signing strategy you desire.

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
before_action :set_flayyer
def set_flayyer(&block)
flayyer = Flayyer::FlayyerAI.create(&block)
flayyer.project = "your-project-slug"
flayyer.path = request.path
flayyer.secret = "your-secret-key"
flayyer.strategy = "JWT" # or "HMAC"
image_src = flayyer.href.html_safe
social_image = {
_: image_src,
}
set_meta_tags({
image_src: image_src,
og: {
image: social_image,
},
twitter: {
image: social_image,
},
})
end
# ...
end
Last updated on by Franco Méndez