I've been working to re-skin this app.
I've changed the original OG tags in the application layouts file to this:
application.html.erb
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 <%= #bodyId %>"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 <%= #bodyId %>"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 <%= #bodyId %>"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9 <%= #bodyId %>"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="<%= #bodyId %>"> <!--<![endif]-->
<head>
<title>Tweak Tell Friends, Earn Free free shoes</title>
<link rel="icon" href="<%= asset_path('favicon.ico') %>" type="image/x-icon">
<link rel="shortcut icon" href="<%= asset_path('favicon.ico') %>" type="image/x-icon">
<meta property="og:title" content="Tweak is coming!"/>
<meta property="og:description" content="Our legacy in your closet. Didn’t want to leave you all behind. Share tweak and earn free shoes."/>
<meta property="og:image" content="<%= asset_path("refer/truman.png") %>"/>
<meta property="og:url" content="<%= root_url %>"/>
<% if #is_mobile %>
<% if #bodyId == 'home' %>
<meta name="viewport" content="width=1600" />
<% else %>
<meta name="viewport" content="width=1120" />
<% end %>
<% end %>
<%= stylesheet_link_tag "core.css", :media => "all" %>
<%= csrf_meta_tags %>
</head>
<body id="<%= #bodyId %>">
<%= yield %>
</body>
</html>
But for some reason it's rendering this when you click the share to Facebook button. Note that it still shows all the old content (I still have not changed the razor image but the other content should be set.)
I used Facebook's developer tool to see what they are seeing when scraping my staging app.
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 home"> <![endif]--><!--[if IE 7 ]> <html class="ie7 home"> <![endif]--><!--[if IE 8 ]> <html class="ie8 home"> <![endif]--><!--[if IE 9 ]> <html class="ie9 home"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html class="home">
<!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Tweak Tell Friends, Earn Free free shoes</title>
<link rel="icon" href="/assets/favicon-0c278a6f59ad0742674f70fc104b1ad3.ico" type="image/x-icon">
<link rel="shortcut icon" href="/assets/favicon-0c278a6f59ad0742674f70fc104b1ad3.ico" type="image/x-icon">
<meta property="og:title" content="Tweak is coming!">
<meta property="og:description" content="Our legacy in your closet. Didn’t want to leave you all behind. Share tweak and earn free shoes.">
<meta property="og:image" content="/assets/refer/truman-f2f6a0b791d7b2a6bb5cb9a32b2a0dae.png">
<meta property="og:url" content="https://tweak-staging.herokuapp.com/">
<link href="/assets/core-e009a81f9ad71a7faa17350a2751d9ca.css" media="all" rel="stylesheet" type="text/css">
<meta content="authenticity_token" name="csrf-param">
<meta content="tONzpSwUruFddfaGxJOJPp30OSy+aaSZERg9SnCbhyU=" name="csrf-token">
</head>
<body id="home">
<div class="hero">
<p class="large brandon">Tweak is launching</p>
<p class="small brandon">The next generation of <br>creative footwear</p>
</div>
<div class="form-wrap clearfix ">
<div class="key"></div>
<p class="byline brandon">Be the first to know</p>
<form accept-charset="UTF-8" action="/users/create" class="new_user" id="new_user" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="tONzpSwUruFddfaGxJOJPp30OSy+aaSZERg9SnCbhyU=">
</div>
<input class="email brandon" id="user_email" name="user[email]" placeholder="Enter Email" size="30" type="text"><input class="submit brandon" name="commit" type="submit" value="Step Inside">
</form>
</div>
</body>
</html>
What could be causing this issue? Is it something to do with the asset's pipeline? I've been able to precompile with no problem.
I ended up fixing this issue by hardcoding the home url and the image url in the content section of the meta tag.
Related
Hi I'm trying to send emails with gmail markup. The markup type I am using is Parcel delivery. Everything went well with the sample code. But it confused me when I am trying to change the title part of the highlights. The title part seems always showing whatever in "Items" like the screenshot below.
Markup code I am using.
<div itemscope itemtype="http://schema.org/ParcelDelivery">
<div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="John Frank"/>
<meta itemprop="streetAddress" content="24 Willie Mays Plaza"/>
<meta itemprop="addressLocality" content="San Francisco"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94107"/>
</div>
<div itemprop="originAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="John Frank"/>
<meta itemprop="streetAddress" content="25 Willie Mays Plaza"/>
<meta itemprop="addressLocality" content="San Francisco"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94107"/>
</div>
<meta itemprop="expectedArrivalFrom" content="2027-03-10T12:00:00-08:00"/>
<meta itemprop="expectedArrivalUntil" content="2027-03-12T12:00:00-08:00"/>
<div itemprop="carrier" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="FedEx"/>
<link itemprop="url" href="http://fedex.com/"/>
</div>
<div itemprop="itemShipped" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Item Shipped.Name"/>
<link itemprop="url" href="http://apple.com/ipad32gb"/>
<link itemprop="image" href="http://apple.com/images/ipad32gb.jpg"/>
<meta itemprop="sku" content="B00DR0PDNE"/>
<meta itemprop="description" content="iPod Mini 32Gb White"/>
<div itemprop="brand" itemscope itemtype="http://schema.org/Brand">
<meta itemprop="name" content="Apple"/>
</div>
<meta itemprop="color" content="white"/>
</div>
<meta itemprop="trackingNumber" content="3453291231"/>
<link itemprop="trackingUrl" href="http://fedex.com/track/3453291231"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/TrackAction">
<link itemprop="url" href="http://fedex.com/track/3453291231"/>
</div>
<div itemprop="hasDeliveryMethod" itemscope itemtype="http://schema.org/ParcelService">
<meta itemprop="name" content="http://schema.org/ParcelService"/>
</div>
<div itemprop="partOfOrder" itemscope itemtype="http://schema.org/Order">
<meta itemprop="orderNumber" content="176057"/>
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Merchant Name"/>
<link itemprop="sameAs" href="http://www.freebase.com/m/0fhkx"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderInTransit"/>
</div>
</div>
Current highlights screenshot:
When I trying to have the title part of highlights show as the UPS notification email in attached, which is different from what's in "Items", I don't know where to change. I've read through the parcel delivery reference here but didn't find anything about it. I know where to change the "Items", "expected delivery date", "Merchant name" in highlights, but I can't find how to change the content of the title like the circled part like in UPS email. Please help. Many thanks!
UPS email screenshot:
I create an email that with Microdata for EventReservation. When I receive mail Gmail recognizes properly the information about the event date, place, etc. But I added a custom action to go a web page that Gmail don't recognized. I this action attribute of Event still supported by Gmail. Microdata looks like this:
<div itemscope itemtype="http://schema.org/EventReservation">
<meta itemprop="reservationNumber" content="1000"/>
<link itemprop="reservationStatus" href="http://schema.org/ReservationConfirmed">
<link itemprop="modifyReservationUrl" href="https://www.mywebsite.com/1000">
<div itemprop="underName" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Name"/>
<div itemprop="action" itemscope itemtype="http://schema.org/Action">
<meta itemprop="name" content="Go to my web site"/>
<link itemprop="url" href="https://www.mywebsite.com/action"/>
</div>
</div>
<div itemprop="reservationFor" itemscope itemtype="http://schema.org/Event">
<meta itemprop="name" content="Event name"/>
<meta itemprop="startDate" content="2020-09-01T18:00:00+0000"/>
<meta itemprop="endDate" content="2020-09-01T19:00:00+0000"/>
<div itemprop="performer" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Event Performer Name}}"/>
</div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<meta itemprop="name" content="Address name"/>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Address">
<meta itemprop="addressLocality" content="Locality">
<meta itemprop="addressRegion" content="Region"/>
<meta itemprop="postalCode" content="PostCode">
<meta itemprop="addressCountry" content="Country">
</div>
</div>
</div>
</div>
I added open graph meta tags to my thymeleaf page.
When I try to share my page - it looks like tags absent.
My page (partially) code
<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
prefix="og: //ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link th:href="#{/css/app.css}" rel="stylesheet"/>
<title th:text="${'pageTitle'}">Title</title>
<meta property="og:type" content="article" />
<meta property="og:url" th:content="${'https://my_site_url'}" />
<meta property="og:title" th:content="${'pageTitle'}" />
<meta property="og:description" th:content="${'DESCRIPTION'}" />
<meta property="og:image" th:content="#{'https://pp.vk.me/c629531/v629531034/3172e/xEBYyER1WE4.jpg'}" />
</head>
<body>
<section class="base fullpage">
<div class="fullpage__content">
<div th:replace="component/partial/header"/>
<div th:replace="${page}"/>
</div>
<div class="fullpage__bottom">
<div th:replace="component/partial/footer"/>
</div>
</section>
<div th:replace="component/auth/auth"/>
</body>
</html>
And my share page button
<a th:href="#{'https://twitter.com/share?url=' + ${full_my_Page_Url}}" rel="canonical" target="_blank" class="c-article-socials__link twitter-share-button">
<div class="icon">
<img th:src="#{/img/icons/social/tw-h.svg}" alt="">
</div>
</a>
I expected share preview card if full by open graph tags, but now it is empty, I can share, but haven't information. Only the link from the share button, but no info from og prefix info
UPDATES
My generated HTML head code looks like:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/app.css" rel="stylesheet">
<title>Статья</title>
<meta property="og:type" content="website">
<meta property="og:url"content="https://localhost:8443/articles/instruction/2">
<meta property="og:title" content="Статья">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content="/cmsstatic/img/posts/image_5.png">
</head>
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' %>
I want to create a very simple layout with buttons on bottom of screen and some centered content.
How may I achieve this with Intel app Framework UI.
I need to support all screen sizes of course.
Here is example in Intel App Framework: http://jsbin.com/valuc/1/edit
<!DOCTYPE html>
<html>
<head>
<title>App Framework</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"></script>
<style>
#page1 {text-align: center}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<div class="panel" title="Welcome" id="page1" selected="true">
<p>This is come content</p>
<p>This text is centered in the panel</p>
</div>
</div>
<div id="navbar">
<a class="icon home" href="#button1">Button 1</a>
<a class="icon settings" href="#button2">Button 2</a>
</div>
</div>
</body>
</html>
You also refer to some basic templates created using Intel App Framework to get started: https://github.com/krisrak/appframework-templates