I have created one test page in my jboss-web.deployer\ROOT.war named test.html.
I have added facebook like button and OG meta tags. When i click on like, title and description is not shared on facebook. Even i am unable to see on popup, when i click on like button. Please help....
Please find below code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
</head>
<body>
<!-- AddThis Button BEGIN -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="href="http://157.241.56.242:8080/Test5.html" width="450" height="80"/>
<!-- AddThis Button END -->
</body>
</html>
You don't need to add a XML namespace, but a prefix instead. The following is token from http://ogp.me/ :
<html prefix="og: http://ogp.me/ns#">
Related
Linkedin - og:image tag not working
URL: https://toicartoons.timesgroup.com/cartoon/sandeep-adhwaryu/line-of-no-control/economy/1660326882851
<meta property="og:site_name" content="Times Of India"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://toicartoons.timesgroup.com/cartoon/sandeep-adhwaryu/line-of-no-control/economy/1660326882851"/>
<meta property="og:title" content="Check out this cartoon! Enjoy a collection of more Line of No Control cartoons from TOI’s archives #TOICartoons #TOIEpaperPlus"/>
<meta property="og:description" content="Check out this cartoon! Enjoy a collection of more Line of No Control cartoons from TOI’s archives #TOICartoons #TOIEpaperPlus"/>
<meta name="author" content="Times Of India"/>
<meta name="image" property="og:image" content="https://imagerz.timesgroup.com/image-resizer/TimesCartoons/?s3_path=TimesCartoons/posts/1660326882851/assets/featureImages/1660326965939-Economy-2018-01-30.jpg&w=1200&h=630&fit=contain&q=75"/>
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="https://imagerz.timesgroup.com/image-resizer/TimesCartoons/?s3_path=TimesCartoons/posts/1660326882851/assets/featureImages/1660326965939-Economy-2018-01-30.jpg&w=1200&fit=contain&q=75"/>
Blog Page: Basically the datas are API fetched. And I want the share button such that when users click on share button they are able to see the IMAGE, TITLE and DESCRIPTION
The share dialog I get
The share dialog I needed, but with the contents from my site
Facebook Debugger Result
A sneek peek into inspect element
return (
<>
<Head>
<title>{`Rangehaat: ${news.title}`}</title>
<meta
property="og:title"
content={news.title}
></meta>
<meta name="description" content={news.description} />
{/* FACEBOOK META SHARE */}
<meta property="og:url" content={compressedURL} />
<meta property="og:type" content="website" />
<meta property="og:description" content={news.description} />
<meta property="og:image" content={news.image.url} />
<meta property="fb:app_id" content="***********" /> //hidden part
</Head>
<section>
// Single Blog UI was here
<ShareIt
url={compressedURL}
title={news.title}
description={news.description}
/>
</section>
</>
);
Share Button Page:
import { FacebookShareButton, FacebookIcon } from "next-share";
export default function ShareIt(params) {
console.log(params);
return (
<>
<div>
<FacebookShareButton
// url={params.url}
url="https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer"
title={params.title}
quote={params.description}
hashtag={"#RangehaatShare"}
>
<FacebookIcon size={32} round />
</FacebookShareButton>
</div>
</>
);
}
I am trying to add a gif to my blogger post and want to share the animated gif to Facebook with an external link. the problem I am facing that the blogger is generating a custom thumbnail for og:image property. instead, I want to use a CDN link of gif which should be shared on Facebook.
Here is my post: I want to use this url instead of the auto generated thumbnail.
<img src ="https://thumbs.gfycat.com/QualifiedHilariousBufflehead-size_restricted.gif">
Here is my header code
<meta content="https://gifs.blogspot.com" name="og:site_name " />
<meta expr:content="data:view.title.escaped" property="og:title" />
<meta expr:content="data:view.description.escaped" property="og:description" />
<b:if cond="data:view.featuredImage">
<meta
expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")'
property="og:image"
/>
<b:elseif cond="data:widgets" />
<b:loop
reverse="true"
values="data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)"
var="imageUrl"
>
<meta
expr:content='resizeImage(data:imageUrl, 1200, "1200:630")'
property="og:image"
/>
</b:loop>
<b:elseif cond="data:blog.postImageUrl" />
<meta
expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")'
property="og:image"
/>
</b:if>
<meta
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
name="viewport"
/>
<title><data:view.title.escaped/></title>
<b:include data="blog" name="all-head-content" />
Try to delete the resize operator
<b:if cond="data:view.featuredImage">
<meta
expr:content='data:view.featuredImage'
property="og:image"
/>
<b:elseif cond="data:widgets" />
<b:loop
reverse="true"
values="data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)"
var="imageUrl"
>
<meta
expr:content='data:imageUrl'
property="og:image"
/>
</b:loop>
<b:elseif cond="data:blog.postImageUrl" />
<meta
expr:content='data:blog.postImageUrl'
property="og:image"
/>
</b:if>
I think it can not be done using blogger.
As I see to share a playable GIF on facebook from a link you shared the open graph tags should be like this:
og:image: The link to GIF file
og:url: The same link from og:image
so in blogger you can't do it, unless i guess id you store all the GIF images in a subdomain with the same domain of your blog
According to google plus documentation and other questions, the following code should add a default description when sharing:
META:
<meta property="og:title" content="TITLE HERE" />
<meta property="og:image" content="https://si0.twimg.com/profile_images/604644048/sign051.gif" />
<meta property="og:description" content="DESC HERE" />
<meta name="description" content="DESC HERE" />
HTML
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
However, while the image and the title work, there is no description when sharing.
The code above is also on jsfiddle.
I'm developing an ASP.NET MVC4 web application. I want to create views that is spesific for mobile browsers. I have followed this tutorial http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features. I have installed the package jQuery.Mobile.MVC and added the requested line to the Global.asax file. The installation have created a file called _Layout.Mobile.cshtml, and this file looks like this:
_Layout.Mobile.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
#Html.Partial("_ViewSwitcher")
<div data-role="header">
<h1>#ViewBag.Title</h1>
</div>
<div data-role="content">
#RenderSection("featured", false)
#RenderBody()
</div>
</div>
</body>
</html>
I also added a mobile view for the index view.
Index.Mobile.cshtml
#{
ViewBag.Title = "Home";
}
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
But when I open the webpage in an iPhone simulator, the page looks nothing like the one in the tutorial. It is blank with plain text. I have viewed the page source and can see that only the site.Mobile.css file is loaded.
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width" />
<link href="/Content/Site.Mobile.css" rel="stylesheet"/>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
I created a new web application project through VS2012, but this time I chose the Mobile Application template. When I run this project and view the page source, a lot more css-files is displaying.
<head>
<meta charset="utf-8" />
<title>Log in</title>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/jquery.mobile-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.2.0.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
I have checked that all of these files exists in my webApp project, but for some reason they are not loading. What am I doing wrong?
I have managed to figure this out, but the solution was a tricky one so I'm answering my own question in case others experience the same problem.
I changed the App_Start/BundleMobileConfig.cs from:
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-{version}.css"
));
to
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-1.3.1.min.css",
"~/Content/jquery.mobile.structure-1.3.1.min.css",
"~/Content/jquery.mobile.theme-1.3.1.min.css"
));
It looks like I only got the minified version of the jquery mobile css, while the stylebundle was looking for the original version. I think this is a bug when installing the jquery.mobile.MVC package.