Ruby on Rails
Example Repository: https://github.com/useflyyer/flyyer-example-rails
Installation
We're going to use flyyer/flyyer-ruby to format Flyyer 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 flyyer
, meta-tags
and jwt
gems
Add to your Gemfile:
gem 'flyyer'
gem 'meta-tags'
gem 'jwt'
And then execute:
bundle install
rails generate meta_tags:install
2. Format Flyyer CDN URLs
Use before_action
to provide the smart image URL to every view.
Find your project identifier here. If you don't have a project yet, create one here.
class ApplicationController < ActionController::Base
before_action :set_flyyer
def set_flyyer(&block)
flyyer = Flyyer::Flyyer.create(&block)
flyyer.project = 'your-project-identifier'
flyyer.path = request.path
image_src = flyyer.href.html_safe
social_image = {
_: image_src,
}
# See 'meta-tags' documentation for more details: https://github.com/kpumuk/meta-tags
set_meta_tags({
# title: 'My Website', # <title />
# description: 'My website description', # <description />
image_src: image_src,
og: {
image: social_image,
},
twitter: {
image: social_image,
card: 'summary_large_image',
},
# Optional
flyyer: {
# Reference your previous or default image (eg: product item, profile image, etc.)
default: '/default-social-image.png', # ActionController::Base.helpers.asset_path('default-social-image.png'),
# Additional variables
color: 'indigo',
},
})
end
# ...
end
3. Render meta-tags
Add display_meta_tags
to your layout.
<!DOCTYPE html>
<html>
<head>
<%# <title>RailsExample</title> 👈 Remove this line %>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= display_meta_tags %>
<%= 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 cdn.flyyer.io
URLs with your project identifier 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.
Advanced usage
Flyyer meta-tags
You can pro
Signed URLs
The flyyer
gem supports HMAC and JWT signatures.
Find your secret key
here under Signed URLS, and enable the signing strategy you desire.
class ApplicationController < ActionController::Base
before_action :set_flyyer
def set_flyyer(&block)
flyyer = Flyyer::Flyyer.create(&block)
flyyer.project = 'your-project-identifier'
flyyer.path = request.path
flyyer.secret = 'your-secret-key'
flyyer.strategy = 'JWT' # or 'HMAC'
image_src = flyyer.href.html_safe
social_image = {
_: image_src,
}
set_meta_tags({
# Setup other meta-tags here.
image_src: image_src,
og: {
image: social_image,
},
twitter: {
image: social_image,
},
})
end
# ...
end