I have a Rails personality test app that uses AJAX to render the questions and show the results.
I have been attempting to share personality test results via Facebook by sending the variable to one of my dashboard Rails controller to dynamically create tags.
However, the variable is nil when the page is first loaded (which causes an error), so I fixed it by adding a conditional (in application.html.erb):
<% if #cat %>
<meta property="og:title" content="You got <%= #cat.name %>!"/>
<meta property="og:image" content="<%= #cat.picture %>" />
<meta property="og:description" content="<%= #cat.description%>" />
<meta property="og:url" content="https://mysite" />
<meta property="fb:app_id" content= "<%=ENV['FACEBOOK_APP_ID']%>" />
<meta property="og:type" content="website">
<% end %>
Facebook does not recognize the tags when I checked the sharing debugger. I also tried initializing with another object (home controller):
def index
if params.has_key?("cat")
#cat = Cat.find_by(name: params["cat"])
else
#cat = Cat.find_by(name: "Colonel Meow")
end
end
With this, Facebook does not render the new value, but renders the old value instead. I put a debugger in my application.html to make sure the variables were changing (they did). Facebook did not refresh though.
Is there a way to use a conditional when assigning the tags? Or to refresh the tags so Facebook uses the new variable?
Related
I have a page with article, and I can set from back-end an image for the article. In the show action I would like to obtain the meta tag og:image to share the article in facebook also with the image.
I show the image with:
<%= image_tag #article.image_url, :class => "img-fluid" %>
but I am not able to have the image also in facebook post automatically when I copy and paste the url in facebook.
Do you have any suggestion?
Thank you in advance.
According to this article here, you need a bit more setup.
https://www.lewagon.com/blog/setup-meta-tags-rails
Create default meta tags in config/meta.yml and load them in an initializer:
meta_product_name: "Product Name"
meta_title: "Product name - Product tagline"
meta_description: "Relevant description"
meta_image: "cover.png" # should exist in `app/assets/images/`
# config/initializers/default_meta.rb
# Initialize default meta tags.
DEFAULT_META = YAML.load_file(Rails.root.join("config/meta.yml"))
You can use them like this in the application.html.erb
<title><%= meta_title %></title>
<meta name="description" content="<%= meta_description %>">
<!-- Facebook Open Graph data -->
<meta property="og:title" content="<%= meta_title %>" />
<meta property="og:type" content="website" />
...
I shortened it but see the article for the full code.
For dynamic titles or images use Rails' content_for method and create a helper method:
<!-- app/views/any_model/any_view.html.erb -->
<% content_for :meta_image, image_path(#any_model.photo.path) %>
And the helper would look like this:
# app/helpers/meta_tags_helper.rb
module MetaTagsHelper
def meta_image
meta_image = (content_for?(:meta_image) ? content_for(:meta_image) : DEFAULT_META["meta_image"])
# little twist to make it work equally with an asset or a url
meta_image.starts_with?("http") ? meta_image : image_url(meta_image)
end
end
Again, shortened, but you'll find the full code in the source.
I would like to use non-public images from an S3 bucket in my site's meta tag.
My <head> looks like this:
<meta property="og:image" content="<%= asset_path #list.image %>" />
And source like this:
<meta property="og:image" content="//mybucket-main.s3.amazonaws.com/uploads/asdflkj/myimage.jpg" />
My images render perfectly when I include them throughout the site:
<%= image_tag #list.image %> becomes
<img src="//mybucket.s3.amazonaws.com/uploads/asdflkj/myimage.jpg" alt="myimage" />.
(Incidentally, it even renders in this post if I use the real src.)
I receive this error from https://developers.facebook.com/tools/debug/sharing:
Object Invalid Value: Object at URL 'https://example.com/lists/1462' of type 'website' is invalid because the given value '//mybucket.s3.amazonaws.com/uploads/image.jpg' for property 'og:image:url' could not be parsed as type 'url'.
Please help!
I have some dynamic images defined as follows on my page:
<%= image_tag(#recipe.image.url(:fixed), :class => 'recipe_image_show') %>
I am looking for a way to define og:image with this code. The og:description code seen below works perfectly:
<meta property="og:description" content= "<%= #recipe.description %>" />
But if I use the code below then it doesn't want to work:
<meta property="og:image" content='<%= image_tag(#recipe.image.url(:fixed), :class => 'recipe_image_show') %>'/>
Any suggestions? I realised I have used single quotes here but using double quotes for some reason results the page to disregard the '/>' part of the meta tag and display it as text.
As per the chat discussion, OP is hosting the images on S3.
So, define the meta tag as below:
<meta property="og:image" content='<%= #recipe.image.url(:fixed) %>'/>
This will be evaluated to:
<meta property="og:image" content='https://s3....amazonaws.com/path/to/image.jpg'/>
NOTE:
If image was stored on the your own application server then you could use it as:
<meta property="og:image" content='<%= image_url #recipe.image.url(:fixed) %>'/>
if you are on rails 6 with wepback this one worked for me
- meta 'og:image': "#{asset_pack_url "static/image.webp"}"
check asset_pack_url on github for reference
your image path may vary, lookup manifest.json for this manner
Use the tool https://developers.facebook.com/tools/debug/
Click "Scrape Again" to reload Facebook Cache
Use full path with image_url("example.png")
I am developing a Rails application and I wish to use the open graph protocol so that on the "articles" page perople can link to social media (facebook, twitter, and google+) to recommend/like etc the article.
As part of the this I endevour, unsuccessfully to set og metatags for the url, within the head section of the page. From the code partial ogmeta.html.erb
<meta property="og:title" content='<%= meta[:title] || "DrillInvestor" %>'>
<meta property="og:type" content='<%= meta[:type] || "website" %>'>
<meta property="og:image" content='<%= meta[:image] || "http://www.whatever.com/image.jpg" %>'>
<meta property="og:url" content='<%= meta[:url] || "post_url(#post)" %>'>
Which when I view the page source I see
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<meta property="og:title" content='DrillInvestor'>
<meta property="og:type" content='website'>
<meta property="og:image" content='http://www.whatever.com/image.jpg'>
<meta property="og:url" content='post_url(#post)'>
What I am trying to pass as the url I can see from a print statement in the posts controller
puts "==================="
puts "url = " + post_url(#post).to_s
I see url = http://quiet-fortress-3338.herokuapp.com/posts/drill-01-more-updates which is what I am want, in this case, to see as the og:url.
I am a recovering COBOL pogrammer and sometimes (well perhaps more than that) lose my way with this sort of stuff.
If I hardcode the og:url I get the appropriate page. I have tried a numer of dfferent things including#{} enclosing the post_url(#post) etc.
Thanks in advance and any help welcome
Pierre
You need to get rid of the quotes around "post_url(#post)". Just change it to post_url(#post). Note that in your print statement you don't have it enclosed in quotes and it works.
As an aside, you don't need to call to_s in either case - post_url(#post) returns a string.
Hey. Imagine i have two separate gsp pages with diferent css formatting (with name conflicts between two). And i want to "display" or render one page with its ows formatation inside a div in the other page. Imagining this scenario:
page1.gsp
...
...
<div id="here"></div>
...
...
page2.gsp
Hello there!
I want my final page to be:
...
...
Hello there!
...
...
Is it possible to do that?
Yes use the g:render tag and create a "fragment" page to contain your content.
then use the g:render tag to pull it in.
Refer to the documentation or tutorials for more detail on this.
This is very similar to a question I posted a couple of days ago:
Can I display an inner dive with an independent stylesheet?
Is this something you want to work for every page? (Like a layout?)
If that is the case, use SiteMesh (built in already)
{app}/grails-app/views/layouts/mylayout.gsp
<html>
<head>
<g:layoutTitle default="My Application" />
<link rel="stylesheet" href="${resource(dir:'css',file:'layout.css')}" />
<g:layoutHead />
</head>
<body>
<div id="here"><g:layoutBody /></div>
</body>
</html>
{app}/grails-app/views/{somefolder}/page1.gsp
<html>
<head>
<meta name="layout" content="mylayout" />
<link rel="stylesheet" href="${resource(dir:'css',file:'page1.css')}" />
</head>
<body>
Hello There!!!!
</body>
</html>
If you already have that, and are just looking at breaking up you pages and keeping them DRY..
{app}/grails-app/views/{somefolder}/page1.gsp
<html>
<head>
<meta name="layout" content="yourLayout" />
<link rel="stylesheet" href="${resource(dir:'css',file:'page1.css')}" />
</head>
<body>
<div id="here2"><g:render template="page2" model="[foo:'bar']"/></div>
</body>
</html>
* The Model property of render is optional, but works for passing data to the template to be rendered
{app}/grails-app/views/{somefolder}/_page2.gsp
* Notice the "_" before the gsp name. (Convention for Template pages)
Hello There
Checkout the documentation for render and templating