After many tries, i am not able to get either a correct Thumbnail of image or a complete object in Facebook Like, Send and Share Divs.
These are the meta tags.
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="id" content="619746228056373" />
<meta property="fb:app_id" content="185401314974757" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.thecampusbook.net" />
<meta property="og:title" content="CampusBook - News, Messages, Alerts, Timeline, Academic Info for Students, Teachers & Parents through Web, SMS & Email channels" />
<meta property="og:image" content="http://www.thecampusbook.net/images/broadcast_book_75.jpeg" />
Code for SHARE:
<a href="#"
onclick="
window.open( 'https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fthecampusbook.net',
'facebook-share-dialog',
'width=626,height=436');
return false;"
style="text-decoration:none;">SHARE</a>
Code for LIKE and SEND:
<div class=" fb-like"
data-href="http://www.thecampusbook.net/index.php" data-width="450" data-show-faces="true" data-send="true"
style=" clear: both; float: left; margin: 15px 10px 15px 0; ">
</div>
I will be thankful if anybody can help.
First of all http://www.thecampusbook.net/index.php is not valid HTML document. For FB OG debug and refresh cache look into Facebook debugger.
Related
I created a PWA with a display "fullscreen" specified in the manifest. However, the body doesn't take 100% of the height of its HTML parent. The body is scrollable and doesn't take the whole height
Here the basic CSS
html,
body,
#root {
background: green;
padding: 0;
margin: 0;
}
The HTML opened by the PWA
<!DOCTYPE html>
<html translate="no" class="notranslate" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1; viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<title>Test</title>
<meta name="google" content="notranslate" />
<meta name="description" content="Flink HubOne App" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="mask-icon" href="/mask-icon.png" color="#FFFFFF" />
<meta name="theme-color" content="#000000" />
</head>
<body>
<div style="background-color: red; flex: 1; padding: 0; margin: 0;">
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
</div>
</body>
</html>
Here the configuration used for my PWA
manifest: {
id: "/",
name: "Test App",
short_name: "Test",
description: "Test",
theme_color: "#ffffff",
display: "fullscreen",
scope: "/",
start_url: "/",
},
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've been trying to make a section of a background image clickable with an external link. I've tried a few suggestions using 'imagemap' tag from archived inquires here but had no luck. I'm guessing this is due to the fact that the background image is set in CSS and the nature of the website.
I have only basic coding knowledge, so it's a trial and error approach for me which is very time consuming and I've run out of trials now.
Below is the image of the page. The area 'HERE' (under 'Book Now') should be the clickable area.
Screenshot background image
CSS
body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url(../images/bg_2019_2.jpg) center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
</div>
</footer>
</div>
</section>
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
</style>
</head>
<body>
<img src="https://i.stack.imgur.com/Y5nhJ.jpg" width="1646px" height="auto" usemap="#image-map">
<map name="image-map">
<area target="_self" alt="Book Now" title="Book Now" href="www.athleticum.co.uk" coords="1544,1241,2032,1393" shape="rect">
</map>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
</div>
</footer>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
.booknow{
background-color:green; /* remove this property once you set the position and uncomment below to make it transparent*/
/*background-color:transperant;*/
position:relative;
left:200px;
top:250px;
width:180px;
height:65px;
display:inline-block;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
<span class="booknow" onclick="location.href='www.athleticum.co.uk'">Book now</span>
</div>
</footer>
</div>
</section>
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.
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