I have implemented Omniauth and Koala7 gems to integrate my application with Facebook.
Everything works well, except one minor problem with posting custom actions with custom objects.
The problem is that my object url should be the show page of a newly created post, such as /posts/1. To make this page recognized as a facebook object, I need to put facebook metatags on top of the show.html.erb like this:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# sdff: http://ogp.me/ns/fb/sdff#">
<meta property="fb:app_id" content="myid" />
<meta property="og:type" content="sdff:post" />
<meta property="og:url" content="<%= "http://sdff.herokuapp.com" + post_path(#post) %>" />
<meta property="og:title" content="Sample" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
</head>
The problem is that facebook object debugger recognizes this as a type:webpage instead of type:post. I think this is because there's already the default head tag in /layouts/application.html.erb, like so:
<head>
<title>sdff</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
I assume this because the object debugger specifically points out:
Meta Tags In Body: You have tags ouside of your . This is either because your was malformed and they fell lower in the parse tree, or you accidentally put your Open Graph tags in the wrong place. Either way you need to fix it before the tags are usable.
So how do I solve this problem?
I need to place the facebook metatags in my show.html.erb, but the page itself is already a part of the body of the entire application layout.
Based on the error message you posted, I gather that your meta tags are not in the <head> as they should be. This is a great case to use a content_for block. In your show.html.erb view, place your desired meta tags into a content_for :head block. This saves the html and allows you to insert it somewhere else in the layout.
<% content_for :head do %>
<meta property="fb:app_id" content="myid" />
<meta property="og:type" content="sdff:post" />
<meta property="og:url" content="<%= "http://sdff.herokuapp.com" + post_path(#post) %>" />
<meta property="og:title" content="Sample" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
<% end %>
Then just add a yeild(:head) to your application template. The html you placed in the show view will be inserted into this spot in the application template. We check for nil here so that the yield is considered optional.
<head>
<title>sdff</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= content_for?(:head) ? yield(:head) : '' %>
</head>
Related
New developper on RoR, I’m using Select2 to display some companies or departments.
Select2 was working fine for some weeks, and now, display is broken on every select2 input.
I used github history to detect why it’s failing now, but no indications of modifications which can explain that.
It's displaying a very small square or nothing. However, selecty2 is working when I click on the small square for exemple.
small square display,
Select2 working but display is broken
I used Github History pomber and inspect all files concerned. Nothing to explain why the display is broken now. Is the a way to detect the cause of the issue ?
I'm using Bootstrap 4 with rails 5.2.1
app/javascript/components/select2.js :
import $ from 'jquery';
import 'select2';
import 'select2/src/scss/core.scss';
import 'select2-bootstrap4-theme/dist/select2-bootstrap4.css';
$('.select2-form').select2({
theme: "bootstrap4"
});
// Requiring CSS! Path is relative to ./node_modules
app/javascript/packs/application.js
import '../components/select2';
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application' %>
<!-- bootstrap animation carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- bootstrap animation carousel -->
<!-- Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- Select2 -->
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/flashes' %>
<%= yield %>
<%= render 'shared/footer' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%#= javascript_pack_tag "map" %>
</body>
</html>
I expect the input should be display correctly.
If it used to work, and now it doesn't, you can git bisect to determine which commit introduced the regression. When that is done, you should be able to pinpoint the guilty piece of code, again by adding the changes in this commit one by one and see when the regression pops up. Then you might be able to understand the reason for the regression.
im trying to load onepage-scroll https://github.com/peachananr/onepage-scroll) to my rails app but it wont load it just show plain text. im new to rails as well im still learning.
here is the code for the page im trying to get to work. pages#index.html.erb
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="Resource-type" content="Document" />
<% stylesheet_link_tag 'onepage-scroll' %>
<% javascript_include_tag 'jquery.onepage-scroll.js' %>
</head>
<body>
<div class="main">
<section>
<h3>hello</h3>
</section>
<section>
<h3>hello</h3>
</section>
</div>
</body>
</html>
if any one can help me i will greatly appreciate. thanks
Just add =
<%= stylesheet_link_tag 'onepage-scroll' %>
<%= javascript_include_tag 'jquery.onepage-scroll.js' %>
How write this ERB code in HAML:
<head>
<meta charset="utf-8">
<title><%= title %></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<%== meta_data_tags %>
<%= favicon_link_tag image_path('favicon.ico') %>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<%= stylesheet_link_tag 'store/all', :media => 'screen' %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'store/all' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<%= render "spree/shared/routes" %>
<%= yield :head %>
</head>
particularly interested in this
<%== meta_data_tags %>
code snippet.
I found answer for my question:
= raw(meta_data_tags)
<%== %> is the same as <%= raw() %>. It's just a fast helper to achieve same result.
Thank you all for help. =)
In Erubis (whch Rails uses) the <%== ... %> syntax escapes the result of the expression. Haml has a similar feature using &=.
So a Haml version of <%== meta_data_tags %> might look something like:
&= meta_data_tags
I'm attempting to keep the application layout in my Rails 3 app for the stylesheets and javascript files I use most frequently (application.js, jquery, style, etc.). However there are plugins I'm using on certain pages and want to include those stylesheets/javascripts properly. For example, I'm looking to use slides only on my homepage. If my application layout is like the one below, what's the best way to include page-specific files?
<!doctype html>
<head>
<title>Title</title>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="screen and (min-width:481px)">
<!--[if IE]>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="all"><![endif]-->
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width">
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
I'm working through the Ruby on Rails Tutorial at http://railstutorial.org/, chapter 4, listing 4.4. I've inserted the two lines that have calls to stylesheet_link_tag, but the links aren't being inserted into the final page. Here's my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<% stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<% stylesheet_link_tag 'blueprint/print', :media => 'print' %>
</head>
<body>
<%= yield %>
</body>
</html>
Here's the output of http://localhost:3000/pages/home
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="D8xx1zqWM5qqwqdabyjy5eHLPvLY/Sxe5vEFJ816fMY="/>
</head>
<body>
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application
</p>
</body>
</html>
I've copied and pasted and typed on my own, and I'm getting the same results. Suggestions?
Thanks,
Chuck
This is producing output so it needs to be in an erb block that outputs into the template:
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
the type of block you are using:
<% stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
does not have its result printed into the template.