File: /home/imensosw/public_html/imenso.co/dev/octb-website/octglobal_facebook.html
<!doctype html>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<title>Site Title</title>
<link rel='stylesheet' href='css/bootstrap.min.css' media='all' />
<link rel='stylesheet' href='css/style.css' media='all' />
<script src='js/modernizr.min.js'></script>
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
</head>
<body>
<!-- top area open -->
<header class="top_area top_area1">
<nav class="navbar navbar-expand-lg" id="nav_fix">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="OCTB logo" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="images/menu.png" alt="icon" /></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto"></ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Pages
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="index.html">Index 1</a>
<a class="dropdown-item" href="index_b.html">Index 2</a>
<a class="dropdown-item" href="index_c.html">Index 3</a>
<a class="dropdown-item" href="octglobal_about.html">About</a>
<a class="dropdown-item" href="octglobal_select_teacher.html">Select Teacher</a>
<a class="dropdown-item" href="octglobal_teacher_detail.html">Teacher Detail</a>
</div>
</li>
<li><a href="#">Ученикам</a></li>
<li><a href="#">Родителям</a></li>
<li><a href="#">Бизнесу</a></li>
<li><a href="#" class="bdr btn btn-secondary">войти</a></li>
</ul>
</div>
<div class="login-icon mobile_show"><a href="#"><img src="images/login.png" alt="icon" /></a></div>
</div>
</nav>
</header>
<!-- top area close -->
<!-- middle-content area open -->
<div class="content p_t100">
<section class="m_b80 m_t20">
<div class="container teachers_section teachers_section_dtl">
<div class="row">
<div class="col-sm-12">
<div class="teacher_details">
<div class="row">
<div class="col-sm-3">
<div class="row">
<div class="margin_left">
<div class="teacher m_b10">
<div class="scile"><span>842</span>занятия</div>
<img src="images/people_1.png" alt="people" class="w_100" />
</div>
<div class="text-center m_b10"><a href="#" class="btn btn-block btn-primary1">Записаться </a></div>
<div class="text-center"><a href="#" class="btn btn-block btn-primary1 reverse">Записаться </a></div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">
<div class="fb-comments m_b50" data-href="http://localhost/octb-web/octglobal_facebook.html" data-width="100%" data-numposts="5"></div>
<div id="fb-like-div m_b50">test</div>
<div class="fb-comment-embed" data-href="https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751&reply_comment_id=654912701278942" data-width="750" data-include-parent="false"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- middle-content area close -->
<!-- footer area open -->
<section class="footer footer1">
<footer>
<div class="container">
<div class="copywrite">
<div class="row">
<div class="mobile_show">
<div class="text-center">
<a href="#" class="social_icon twitter"></a>
<a href="#" class="social_icon facebook"></a>
<a href="#" class="social_icon youtube"></a>
</div>
</div>
<div class="col-sm-6"> © 2018 Все права зарегистрированы </div>
<div class="col-sm-6 mobile_hide">
<div class="text-right">
<a href="#" class="social_icon twitter"></a>
<a href="#" class="social_icon facebook"></a>
<a href="#" class="social_icon youtube"></a>
</div>
</div>
</div>
</div>
</div>
</footer>
</section>
<!-- footer area close -->
<script src='js/jquery3.2.1.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Chart.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.customer-testimonial').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
arrows: true,
dots: true,
pauseOnHover: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 1
}
}]
});
});
</script>
<script>
var lineChartData = {
labels: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018'],
datasets: [{
label: 'My First dataset',
borderColor: window.chartColors.red,
borderWidth: 1,
backgroundColor: window.chartColors.red,
fill: false,
pointBorderColor: window.chartColors.red,
pointBackgroundColor: "#fff",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderWidth: 2,
pointRadius: 5,
data: [10,20,0,15,50,30,20,10,20,0,15],
yAxisID: 'y-axis-1',
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas1').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: false,
text: 'Chart.js Line Chart - Multi Axis'
},
legend: {
display: false
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
var lineChartData1 = {
labels: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018'],
datasets: [{
label: 'My First dataset',
borderColor: window.chartColors.red,
borderWidth: 1,
backgroundColor: window.chartColors.red,
fill: false,
pointBorderColor: window.chartColors.red,
pointBackgroundColor: "#fff",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderWidth: 2,
pointRadius: 5,
data: [20,10,20,0,15,10,20,0,15,50,30],
yAxisID: 'y-axis-1',
}]
};
var ctx = document.getElementById('canvas2').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData1,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: false,
text: 'Chart.js Line Chart - Multi Axis'
},
legend: {
display: false
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
var lineChartData2 = {
labels: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018'],
datasets: [{
label: 'My First dataset',
borderColor: window.chartColors.red,
borderWidth: 1,
pointBorderColor: window.chartColors.red,
pointBackgroundColor: "#fff",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderWidth: 2,
pointRadius: 5,
backgroundColor: window.chartColors.red,
fill: false,
data: [15,50,30,20,10,10,20,0,20,0,15],
yAxisID: 'y-axis-1',
}]
};
var ctx = document.getElementById('canvas3').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData2,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: false,
text: 'Chart.js Line Chart - Multi Axis'
},
legend: {
display: false
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
var lineChartData3 = {
labels: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018'],
datasets: [{
label: 'My First dataset',
borderColor: window.chartColors.red,
borderWidth: 1,
backgroundColor: window.chartColors.red,
fill: false,
pointBorderColor: window.chartColors.red,
pointBackgroundColor: "#fff",
pointBorderWidth: 2,
pointHoverRadius: 5,
pointHoverBorderWidth: 2,
pointRadius: 5,
data: [0,15,50,30,20,10,10,20,20,0,15],
yAxisID: 'y-axis-1',
}]
};
var ctx = document.getElementById('canvas4').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData3,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: false,
text: 'Chart.js Line Chart - Multi Axis'
},
legend: {
display: false
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
};
document.getElementById('randomizeData').addEventListener('click', function() {
lineChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myLine.update();
});
</script>
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.0&appId=188827471807105&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
$(function(){
var url = 'http://localhost/octb-web/octglobal_facebook.html';
var apiUrl = 'https://graph.facebook.com/?ids='+url;
$.ajax({url: apiUrl, success: function(result){
$.each( result, function( key, val ) {
console.log(key + ' - ' + val['share']['share_count']);
var shareCount = val['share']['share_count'];
$("#fb-like-div").html(shareCount);
});
}});
});
</script>
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.0&appId=188827471807105&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
</script>
</body>
</html>