I've been trying for tha tpast 24 hours to activate the facebook sharer to share multiple thumbs. here's my code :
<head>
<meta property="og:title" content="ShareThis Homepage" />
<meta property="og:type" content="Sharing Widgets" />
<meta property="og:url" content="http://www.realestatephotoexpert.com/Properties/82/centrisSmall/-1.jpg"/>
<meta property="og:description" content="New listing" />
<meta property="og:site_name" content="ShareThis" />
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
stLight.options({
publisher:'12345',
});
</script>
</head>
<body>
<span class="st_sharethis"></span>
</body>
I managed to display 1 thumbnail using og:url, I dont even know why its working because it suppose to be the og:image. even with this work around, i cant figure how to share multiple thumb( once log-in to facebook, be able to use the left and right arrows to select thumnail.
thx for your help
Related
I'm using the following head metatags:
<head>
<title>CJF Works Communications</title>
<meta name=”description” content=”The best choice for your marketing needs” />
<meta property="og:title" content="CJF Works Communications" />
<meta property="og:url" content="https://cjfworks.com" />
<meta property="og:description" content="The best choice for your marketing needs" />
<meta property="og:image” itemprop=“image” content=“https://cjfworks.com/logotype-whatsapp.jpg" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
</head>
I am able to display the site title and description but not the image.
Your image isn't big enough. If you want it to show up on Facebook and Whatsapp it needs to be at least 1200x1200 pixels. See Twitter Card - Image not showing - Webmasters Stack Exchange
I trying to use retina.js v2.0 to swap images, but it's not working, I don't know why. I also check it in developer tools, but there's not any error. Can u help me, what could be the problem?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<img src="images/logo.png" data-rjs="2" alt="Logo">
<script type="text/javascript" src="retina.min.js"></script>
</body>
</html>
Have you figured this out? I am having the same issue. I found a resolution, by calling retinajs() directly after the script loads. But, reading the How It Works documentation does not say you need to do this.
Here is what I did:
<html lang="en">
<head>
</head>
<body>
<img src="/images/nav_logo.png" data-rjs="2">
<script type="text/javascript" src="/lib/retina/retina.min.js"></script>
<script>
retinajs();
</script>
</body>
Yes, this works but my question is whether it is "right"?
I like clean code and I'm sure most developers do. I am coming across an issue where my Meta tags are all appearing on ONE line all together and not on separate lines.
I have a file called "client.master" and here is code for the header:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="format-detection" content="telephone=no" />
<script src="/scripts/script1.min.js" type="text/javascript"></script>
<script src="/scripts/script2.min.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="/images/home-screen.png" />
<link rel="apple-touch-startup-image" href="/images/home-startup.png" />
<link href="/css/thirdparty/xxxxx.min.css" type="text/css" rel="stylesheet" />
<link href="/css/design.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="headContent" runat="server">
</asp:ContentPlaceHolder>
</head>
That looks very clean and nice. However, when I view the source of the page, the output shows the <meta> tags and the <link> tags all on one line. The script tags are not.
Here is the output of my code:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="default" /><meta name="format-detection" content="telephone=no" />
<script src="/scripts/script1.min.js" type="text/javascript"></script>
<script src="/scripts/script2.min.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="/images/home-screen.png" /><link rel="apple-touch-startup-image" href="/images/home-startup.png" /><link href="/css/thirdparty/xxxxx.min.css" type="text/css" rel="stylesheet" /><link href="/css/design.css" type="text/css" rel="stylesheet" />
<title>
Login
</title></head>
Notice the <meta> and <link> tags are both on a single line AND the <title> tag has line breaks.
Here is the HTML for the default.aspx page for the Title:
<asp:Content ID="title" runat="server" ContentPlaceHolderID="title">
Login
</asp:Content>
My assumption is because the <meta> tags and <link> tags are self enclosed and the <script> tags end with </script>.
Is the only way to resolve this issue to close my <meta> tags with </meta>. Which way is to be considered the standard when closing meta and link tags? or script tags?
Thanks in advance for your help!
If you really want to follow the spec, link and meta are void elements, they can't have a closing tag, if your DOCTYPE is HTML5, you can use the selfclosing tag <meta ..../> but the default way would be to use it only as a start tag, that is a correct conforming use as empty elements don't need an end tag (void ones, as I said, can't have it).
Script is not a void element, but is an empty one, so you can use only the start tag, the self-closing tag or both start and end tags.
Note that for an element to have a content model of type empty really means it may be empty, not that it should; that would probably be what it is called void.
As to why the asp parser does that to your metas, I can't think of a reason. I understand your preference for clean code, but if it is of any help, try to think that at least that bug contributes to a filesize decrease :o)
Bear in mind that all of this applies to HTML5, XHTML treats void and empty models differently.
I have to demonstrate the issue I'm experiencing on my Android phone a simple example:
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.js"><\/script>')</script>
<script src="js/libs/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="content">
This is a TEST
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Now when you load this in your android browser and tap somewhere on the page you will see the page highlight and a click sound.
How annoying is that, I definitely want to turn that off, but is that possible ?
Cheers
Luca
Put following in your head of HTML page.
<meta name="viewport" content="width=device-width, initial-scale=1">
I am trying to use jQuery Mobile with the Phonegap Windows Phone template.
The problem I am having is that the list item icons will not display.
My code is below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" href="jquery.mobile-1.0b2.css" />
<link rel="stylesheet" href="site.css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Map</li>
<li>Map page</li>
</ul>
</div>
</div>
<!-- Home Page End -->
</body>
</html>
If I browse the files in Chrome or Firefox the icons are visible. It only fails in Windows Phone emulator.
Has anyone found a solution?
Just found the answer here:
jquery mobile on Windows phone 7 images not loading
Doh!
Just need to set the build action of the icons to Content