I am using the facebook like button on a facebook app page. When a user likes a page only the url is posted to their wall.
I have tried the following
<meta property="og:title" content="my content" />
<meta property="og:image" content="my content"/>
<meta property="og:description" content="my content">
<meta property="og:type" content="product">
<meta property="og:url" content="my content">
<meta property="og:site_name" content="my content">
<meta property="fb:app_id " content="APPID">
alongside
<meta name="title" content="mycontent" />
<meta name="description" content="mycontent" />
<link rel="image_src" type="image/jpeg" href="mycontent"/>
The app is written is rails. Has any one got a solution to this.
Don't forget the Open Graph namespace:
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en" style="overflow:hidden;">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <?php echo AppInfo::appNamespace(); ?>: http://ogp.me/ns/fb/<?php echo AppInfo::appNamespace(); ?>#">
...
Use the Facebook Open Graph Debugger to check your site.
Related
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>
I made Rails app and released.
I set ogp and twitter card by using meta-tags gem.
However,Twitter Cards Validator could not find any meta tags.
The browser shows codes blow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美味しい和菓子が見つかるメディア | MOMIJI</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="美味しい和菓子が見つかるメディア">
<meta name="keywords" content="和菓子, スイーツ, momiji">
<link rel="canonical" href="https://momiji.work/articles">
<meta property="og:title" content="MOMIJI">
<meta property="og:description" content="美味しい和菓子が見つかるメディア">
<meta property="og:type" content="website">
<meta property="og:url" content="https://momiji.work/articles">
<meta property="og:image" content="http://momiji.work/assets/wa_1.jpg">
<meta property="og:site_name" content="MOMIJI">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MOMIJI">
<meta name="twitter:description" content="美味しい和菓子が見つかるメディア">
<meta name="twitter:image" content="http://momiji.work/assets/wa_1.jpg">
<meta name="twitter:site" content="#Justin0370">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="jcjt5ya59ZrydFwnxiBcOdi7w3O5sXXSe6QXktFwt6uygvwi/DYmaTgV0yx0HbP/P8l1Zvsz5x5APEjlzsfE5A==" />
<link rel="stylesheet" media="all" href="/assets/application-c4248fae82b61852d60924641256d5953280f16c38ed2795e77c3a303f6fa588.css" data-turbolinks-track="true" />
<script src="/assets/application-0d8e513de520a20d78d2ba43d84d1c021d3937e16f681fee552500eb92297b4e.js" data-turbolinks-track="true"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Twitter Card Validator shows
INFO: Page fetched successfully
WARN: No metatags found
If you can know why my app can't show twitter card, answer this question, please.
require 'open-uri'
require 'json'
#result = JSON.parse(open(URI.parse(url)).read)
757: unexpected token at '<!DOCTYPE html> <html lang='en'> <head><script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script> <title>Fundly | Search </title> <meta charset='utf-8'> <meta content='initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width' name='viewport'> <script src="//cdn.optimizely.com/js/3536001.js" type="text/javascript"></script> <meta content="authenticity_token" name="csrf-param" /> <meta content="V3GRiKIwWG9+WxN7VsiNtqOnkWu1CkuutIqJ00CQLrQ=" name="csrf-token" /> <meta name='description'> <meta content='noindex' name='robots'> <!-- Facebook OpenGraph metadata --> <meta content='Search' property='og:title'> <meta content='website' property='og:type'> <meta content='https://fundly.com/search' property='og:url'> <meta content='http://fundly.com/assets/logos/v2/fundly_logo_vertical_lockup.png' property='og:image'> <meta content='Fundly' property='og:site_name'> <meta content='Start Your Search' property='og:description'> <meta content='148669528535835' property='fb:app_id'> <!-- End Facebook OpenGraph metadata --> <link href="//doapv6pcsx1wa.cloudfront.net/assets/favicon_heart-ac3d0cee1ff7eb05cfec822b455dc319.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href="//fonts.googleapis.com/css?
i have created a theme in themeroller and used like this in my app
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="assets/css/jquery.mobile.1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
On first load, the new theme is used, but when i login to the app and logout, the old default blue theme appears, why is this?
Do not use jQuery Mobile's default CSS file. Instead use jQuery Mobile's structure CSS file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- YOUR CUSTOM THEME CSS -->
<link rel="stylesheet" href="your_custom_theme.css" />
<!-- JQUERY STRUCTURE CSS -->
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
I have a list images in my website, using facebook feed Javascript I'm sharing image to my FB wall. It works fine.
But It only shows me thumbnail(90x90) and client wants to show it in a full size or bigger image.
These are the tags currently using -
<meta property="og:image" content="<%=#image%>"/>
<meta property="og:title" content="<%=#title%>"/>
<meta property="og:description" content="<%=#description%>"/>
<meta property="og:image:width" content="<%= #width %>" />
<meta property="og:image:height" content="<%= #height %>" />
<meta property="fb:app_id" content="<%= ENV['FACEBOOK_APP_ID'] %>" />
Any help will be greatly appreciated.