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.
Related
I am trying to show Instagram photos in my Ruby on Rails application. The following code works on my local machine but on my server in AWS it does not show the images.
At the time of making data = JSON.parse file.read does not seem to return any value on the server, but on my PC it shows the JSON. What could I be missing?
<%
require "open-uri"
photo_count = 10
begin
file = open("https://www.instagram.com/#{#user.instagram}/?__a=1")
data = JSON.parse file.read
%>
<% data['graphql']['user']['edge_owner_to_timeline_media']['edges'].each do |instagram| %>
<div class="col-xl-6 xd">
<!-- Photo Box -->
<% #caption = instagram['node']['edge_media_to_caption']['edges'].count > 0 ? instagram['node']['edge_media_to_caption']['edges'][0]['node']['text'] : "" %>
<a href="<%=instagram['node']['display_url']%>" class="photo-box mfp-gallery" data-background-image="<%=instagram['node']['display_url']%>" data-toggle="lightbox" title="Instagram">
<div class="photo-box-content">
<span>Instagram</span>
</div>
</a>
</div>
<% end %>
<% rescue => ex %>
<% end %>
Update:
When doing file.read on my local machine I can see that it shows me all the instagram user data in this way:
{"logging_page_id":"profilePage_31229027","show_suggested_profiles":false,"show_follow_dialog":false,"graphql":{"user":{"biography":"Inquiries to email#gmail.com\nAll images are under artist copyrights","blocked_by_viewer":false,"country_block":false,"external_url":"http://www.website.com/","external_url_linkshimmed":"https://l.instagram.com/?u=http%3A%2F%2Fwww.wrl ...
but on the server I get this:
<!DOCTYPE html> <html lang="en" class="no-js not-logged-in client-root"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> Login • Instagram </title> <meta name="robots" content="noimageindex, noarchive"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#ffffff"> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover"> <link rel="manifest" href="/data/manifest.json">
what could be wrong?
If you are making a lot of requests, maybe Instagram has blocked your server to get images, your source is working, but the Instagram API has protection.
You can try to use an IPs proxy to get the images.
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.
I use og:description meta tag like this
<meta property="og:description" content="<%= #post.description.html_safe %>" />
But it shows description of post in top of the page.
I have ever got this error in my php code to show og file. I thought, It will work to in rails. You just change "" into ''
<meta property="og:description" content='<%= #post.description.html_safe %>'/>
or
<meta property="og:description" content='<%= #post.description %>'/>
I hope this help you.
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.