Sample windows:
Facebook Metatags for Blogger
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='BLOG TITLE' property='og:title'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://www.edwardtbabinski.us/scrivenings-thumb.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='FACEBOOK APP IDENTIFICATION NUMBER' property='fb:app_id'/>
<meta content='spirituality.seeker.7' property='fb:admins'/>
<meta content='edbabinski' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='Philosophy and theology are filled with far more questions than universally compelling answers and evidence.' property='og:description'/>
Facebook Metatags for Website (Passes Facebook Validation)
(Passes the Facebook Validation Standards)
<meta content="Scrivenings: “TITLE OF ARTICLE”" property="og:title"/>
<meta content="https://www.edwardtbabinski.us/scrivenings-thumb.png" property="og:image"/>
<meta content="254943438204795" property="fb:app_id"/>
<meta content="WEBSITE URL (NOT BLOG URL)" property="og:url" />
<meta content="spirituality.seeker.7" property="fb:admins"/>
<meta content="edbabinski" property="fb:admins"/>
<meta content="website" property="og:type"/>
<meta content="Philosophy and theology are filled with far more questions than universally compelling answers and evidence." property="og:description"/>
Facebook Metatags for Website (Passes WC3 Validation & placed after <body> tag)
(WC3 Standards )
<div xmlns:og="http://ogp.me/ns#" style="display:none;">
<![CDATA[ <!--OpenGraph section-->
<meta content="TITLE OF ARTICLE" property="og:title"/>
<meta content="https://www.edwardtbabinski.us/scrivenings-thumb.png" property="og:image"/>
<meta content="254943438204795" property="fb:app_id"/>
<meta content="https:// URL OF WEB PAGE .HTML" property="og:url" />
<meta content="spirituality.seeker.7" property="fb:admins"/>
<meta content="edbabinski" property="fb:admins"/>
<meta content="website" property="og:type"/>
<meta content="Philosophy and theology are filled with far more questions than universally compelling answers and evidence." property="og:description"/>
]]></div>
Standard HTML5 Metatags
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Standard HTML 5 Meta Tags</title>
<base href="https://example.com/directory/file-name-goes.here"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<meta name="keywords" content="keywords, keywords, keywords, keywords, keywords"/>
<meta name="description" content="This is the description of the page."/>
<meta name="robots" content="index,follow"/>
<style type="text/css">body {font-family: verdana ;color: #cccccc; background-color: #000818; background: url(//example.com/directory/image.jpg) repeat fixed top center} a {color: #535dcd; text-decoration:none} a:hover{font-weight:bold}</style>
</head>
<body>
</body>
</html>
Related Content (and Minified )
<!DOCTYPE html>
<html lang=en-US>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TOPIC SUBJECT CATEGORY</title>
<base href="URL OF RELATED CONTENT BOX">
<meta name=viewport content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name=keywords content="KEYWORDS" />
<meta name=description content="DESCRIPTION" />
<meta name=robots content="index, follow" />
<style>
html{overflow:hidden}body{font-family:verdana;color:#ccc;background-color:#000}a{color:#a060c3;text-decoration:none}a:hover{font-weight:bold}a:visited{color:#5c5098}
</style>
</head>
<body style="font-size:10px; text-align:center">
<a href="BLOG URL" target=_top>
<img style="border-width: 0px; display: block; margin-left: auto; margin-right: auto;" src=GRAPHIC-URL.JPG alt="" width=100 height=100 />
<br/>TITLE OF BLOG ARTICLE</a>
</body>
</html>
Temporary Document
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE OF ARTICLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="keywords" content="KEYWORDS HERE" />
<meta name="description" content="DESCRIPTION OF ARTICLE" />
<meta name="robots" content="index, follow" />
<style type="text/css">html {overflow-x:hidden} body {font-family: verdana; color: #333333; background-color: #E1E8F0;} a {color: #3b5998; text-decoration:none} a:hover{color:#3b5998} a:visited {color:#3b5998}</style>
<style type="text/css">
input[type=submit] {
margin-bottom:2px;
}
input[type=submit] {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 5px 10px;
border: 1px solid #1a1948;
border-radius: 8px;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1a1948));
background: -moz-linear-gradient(top, #3b5998, #1a1948);
background: linear-gradient(to bottom, #3b5998, #1a1948);
text-shadow: #0f0e28 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
}
input[type=submit]:hover,
input[type=submit]:focus {
border: 1px solid #1d1c50;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1f1e56));
background: -moz-linear-gradient(top, #3b5998, #1f1e56);
background: linear-gradient(to bottom, #3b5998, #1f1e56);
color: #ffffff;
text-decoration: none;
}
input[type=submit]:active {
background: #1a1948;
background: -webkit-gradient(linear, left top, left bottom, from(#1a1948), to(#1a1948));
background: -moz-linear-gradient(top, #1a1948, #1a1948);
background: linear-gradient(to bottom, #1a1948, #1a1948);
}
</style>
<style>
.animate-in {
-webkit-animation: fadeIn 2s ease-in;
animation: fadeIn 2s ease-in;
}
.animate-out {
-webkit-transition: opacity .5s;
transition: opacity .5s;
opacity: 0;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
<script>
window.onload = function(){
document.body.className += " loaded";
}</script>
<style>
.fadein {
opacity: 0;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
}
#body.loaded .fadein {
opacity: 3;
}
#fade {
animation: fadein 3s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}</style>
<script>
window.addEventListener("beforeunload", function () {
document.body.classList.add("animate-out");
});</script>
<script type="text/javascript">
<!--
var version_val = parseInt(navigator.appVersion)
//Check whether replace is supported or not
if (version_val>=4 || window.location.replace)
window.location.replace();
else
window.location.href =""
// -->
</script>
<meta content="TITLE OF ARTICLE" property="og:title"/>
<meta content="https://www.edwardtbabinski.us/scrivenings-thumb.png" property="og:image"/>
<meta content="254943438204795" property="fb:app_id"/>
<meta content="URL OF WEB PAGE" property="og:url"/>
<meta content="spirituality.seeker.7" property="fb:admins"/>
<meta content="edbabinski" property="fb:admins"/>
<meta content="website" property="og:type"/>
<meta content="DESCRIPTION OF ARTICLE" property="og:description"/>
<meta content="summary" name="twitter:card"/>
<meta content="@edwardtbabinski" name="twitter:site"/>
<meta content="TITLE OF ARTICLE" name="twitter:title"/>
<meta content="https://edwardtbabinski.us/twitter/scrivenings-thumb-250.png" name="twitter:image"/>
<meta content="@edwardtbabinski" name="twitter:creator"/>
<meta content="DESCRIPTION OF ARTICLE" name="twitter:description"/>
</head>
<body onload="document.body.setAttribute('class','loaded')" style="font-size:11px">
<div id="fade" style="width:560px">
<p><img style="border-width: 0px; float: right;" src="https://edwardtbabinski.us/related-content/distla/fb-ico.png" alt="" width="64" height="64" /></p>
<div id="preview" style="display:block; margin-right:auto; margin-left:auto">
<a style="text-decoration:none" href="URL OF BLOG ARTICLE" target="_top">
<table style="width:476px; height:158px; border-spacing:0px; padding:0px; background-color:#ffffff; border: 1px #e5e5e5 solid;">
<tbody>
<tr>
<td style="vertical-align:top; width:158px; height:158px; margin-top:0px; margin-bottom:0px" rowspan="3"><img style="border-width: 0px;" src="https://www.edwardtbabinski.us/scrivenings-thumb.png" alt="" width="158" height="158" /></td>
<td style="font-family:georgia; font-size:18px; color:#1d2129; width:318px;">
<p style="margin-left:12px; margin-bottom:0px; text-align:left;">TITLE OF BLOG ARTICLE</p>
</td>
</tr>
<tr>
<td style="font-family: arial; font-size: 13px; color: #1d2129; width: 318px; height: 52px;">
<p style="margin-left:12px; margin-bottom:0px; text-align:left;">BRIEF DESCRIPTION</p>
</td>
</tr>
<tr>
<td style="text-transform: uppercase; font-family: arial; font-size: 12px; color: #999999; width: 318px; margin:0; height: 52px;">
<p style="margin-left:11px; margin-bottom:0px; text-align:left;">DOMAIN NAME TO BLOG</p>
</td>
</tr>
</tbody>
</table>
</a>
</div>
<h3><a href="BLOG URL" title="" target="_top">ARTICLE TITLE.</a></h3>
<blockquote><em>LONGER DESCRIPTION</em></blockquote>
<form action="#">
<input type="submit" formaction="https://edwardtbabinski.us/facebook/welcome.html" value="Return to Entry Screen" />
<input type="submit" formaction="https://edwardtbabinski.us/facebook/history-theology/index.html" value="Return to “History & Theology” Entry Screen" />
<input onclick="history.back();" type="submit" value="Back" />
<input onclick="window.open('', '_self', ''); window.close();" type="submit" value="Close" />
</form>
<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/sdk.js#xfbml=1&version=v2.7&appId=254943438204795";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="WEBSITE URL (THIS HREF!)" data-numposts="5"></div>
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
</div>
<script async="" src="https://static.addtoany.com/menu/page.js" type="text/javascript"></script>
<!-- AddToAny END -->
<p><em>Embed This Topic</em></p>
<textarea cols="75" rows="3" style="font-size:11px; background-color: #3b5998; color:#ffffff">
<div class="separator" style="text-align:center;"><iframe src="URL TO THIS WEB PAGE HREF - EMBED LINK!" style="border:0px; height:600px; margin-bottom:0em; margin-left:0em; margin-right:0em; width:600px;"></iframe></div>
</textarea>
</div>
</body>
</html>
Temporary Document (with Facebook Query)
Place in Blog Article:
<div style="float:right" class="fb-like" data-href="http:// URL TO FETCH FB STATS.HTML" data-width="32" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE OF WEB PAGE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="keywords" content="KEYWORDS" />
<meta name="description" content="DESCRIPTION OF WEB PAGE." />
<meta name="robots" content="index, follow" />
<style type="text/css">html {overflow-x:hidden} body {font-family: verdana; color: #333333; background-color: #E1E8F0;} a {color: #3b5998; text-decoration:none} a:hover{color:#3b5998} a:visited {color:#3b5998}</style>
<style type="text/css">
input[type=submit] {
margin-bottom:2px;
}
input[type=submit] {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 5px 10px;
border: 1px solid #1a1948;
border-radius: 8px;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1a1948));
background: -moz-linear-gradient(top, #3b5998, #1a1948);
background: linear-gradient(to bottom, #3b5998, #1a1948);
text-shadow: #0f0e28 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
}
input[type=submit]:hover,
input[type=submit]:focus {
border: 1px solid #1d1c50;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1f1e56));
background: -moz-linear-gradient(top, #3b5998, #1f1e56);
background: linear-gradient(to bottom, #3b5998, #1f1e56);
color: #ffffff;
text-decoration: none;
}
input[type=submit]:active {
background: #1a1948;
background: -webkit-gradient(linear, left top, left bottom, from(#1a1948), to(#1a1948));
background: -moz-linear-gradient(top, #1a1948, #1a1948);
background: linear-gradient(to bottom, #1a1948, #1a1948);
}
#modal-background{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:375px;
height:375px;
background: #E1E8F0;
}
#modal{
width:375px;
height:375px;
position: sticky;
top: 33%;
padding: 0px;
background: #E1E8F0;
}
</style>
<style>
.animate-in {
-webkit-animation: fadeIn 2s ease-in;
animation: fadeIn 2s ease-in;
}
.animate-out {
-webkit-transition: opacity .5s;
transition: opacity .5s;
opacity: 0;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
<script>
window.onload = function(){
document.body.className += " loaded";
}</script>
<style>
.fadein {
opacity: 0;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
}
#body.loaded .fadein {
opacity: 3;
}
#fade {
animation: fadein 3s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}</style>
<script>
window.addEventListener("beforeunload", function () {
document.body.classList.add("animate-out");
});</script>
<script type="text/javascript">
<!--
var version_val = parseInt(navigator.appVersion)
//Check whether replace is supported or not
if (version_val>=4 || window.location.replace)
window.location.replace();
else
window.location.href =""
// -->
</script>
<script src="https://edwardtbabinski.us/facebook/formatXML.js"></script>
<style>
textarea {
overflow-x: hidden;
overflow-y: scroll;
display: block;
border: 0px solid black;
padding: 5px;
margin: 5px;
}
</style>
<script>
function formatXml(xml) {
var formatted = '';
var reg = /(>)(<)(\/*)/g;
xml = xml.replace(reg, '$1\r\n$2$3');
var pad = 0;
jQuery.each(xml.split('\r\n'), function(index, node)
{
var indent = 0;
if (node.match( /.+<\/\w[^>]*>$/ ))
{
indent = 0;
}
else if (node.match( /^<\/\w/ ))
{
if (pad != 0)
{
pad -= 1;
}
}
else if (node.match( /^<\w[^>]*[^\/]>.*$/ ))
{
indent = 1;
}
else
{
indent = 0;
}
var padding = '';
for (var i = 0; i < pad; i++)
{
padding += ' ';
}
formatted += padding + node + '\r\n';
pad += indent;
});
return formatted;
}
$(function(){
var url = "https://graph.facebook.com/?ids=https://URL-FOR-DESIRED-FACEBOOK-STATS.html";
$.ajax({
url: url,
dataType:"text",
beforeSend:function(){$('.info').append($('<p>requesting: '+url+'</p>'));},
error:function(){$('.info').append($('<p>error! '+url+'</p>'));},
success: function(data) {
$('.unformatted').text(data);
}
});
$.ajax({
url: url,
dataType:"text",
beforeSend:function(){
$('.info2').append($('<p>requesting '+url+'</p>'));
$('.info2').append($('<p>and formatting the response!'));
},
error:function(){$('.info2').append($('<p>error! '+url+'</p>'));},
success: function(data) {
xml_neat = formatXml(data);
$('.formatted').text(xml_neat);
}
});
});
</script>
<meta content="TITLE OF WEB PAGE (THIS HREF" property="og:title"/>
<meta content="https://www.edwardtbabinski.us/scrivenings-thumb.png" property="og:image"/>
<meta content="254943438204795" property="fb:app_id"/>
<meta content="URL OF (THIS HREF) WEB SITE PAGE" property="og:url"/>
<meta content="spirituality.seeker.7" property="fb:admins"/>
<meta content="edbabinski" property="fb:admins"/>
<meta content="website" property="og:type"/>
<meta content="DESCRIPTION OF WEB PAGE" property="og:description"/>
<meta content="summary" name="twitter:card"/>
<meta content="@edwardtbabinski" name="twitter:site"/>
<meta content="TITLE OF WEB PAGE (THIS HREF)" name="twitter:title"/>
<meta content="https://edwardtbabinski.us/twitter/scrivenings-thumb-250.png" name="twitter:image"/>
<meta content="@edwardtbabinski" name="twitter:creator"/>
<meta content="DESCRIPTION OF WEB PAGE" name="twitter:description"/>
</head>
<body onload="document.body.setAttribute('class','loaded')" style="font-size:11px">
<div id="fade" style="width:560px">
<table style="float:right;width:64px"><tr><td>
<p><img style="border-width: 0px" src="https://edwardtbabinski.us/related-content/distla/fb-ico.png" alt="" width="64" height="64" /></p>
<div id="modal-background">
<div id="modal" style="width:375px">
<button id="close" style="background-color:#ffffff; color:#333333; border:1px #888 solid; border-radius: 3px; width:52px;font-size:11px;padding:2px">Close</button>
<textarea class="unformatted" cols="40" rows="18" style="font-size:13px; background-color: #E1E8F0; color:#333333; vertical-align:top"></textarea>
</div>
</div>
<button id="open" style="background-color:#ffffff; color:#333333; border:1px #888 solid; border-radius: 3px; width:52px;font-size:11px;padding:2px">Open</button>
<div class="fb-like" data-href="http:// URL TO EMBED FOR FB STATISTIC " data-width="32" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
</td></tr></table>
<div id="preview" style="display:block; margin-right:auto; margin-left:auto">
<a style="text-decoration:none" href="URL TO BLOG PAGE" target="_top">
<table style="width:476px; height:158px; border-spacing:0px; padding:0px; background-color:#ffffff; border: 1px #e5e5e5 solid;">
<tbody>
<tr>
<td style="vertical-align:top; width:158px; height:158px; margin-top:0px; margin-bottom:0px" rowspan="3"><img style="border-width: 0px;" src="https://www.edwardtbabinski.us/scrivenings-thumb.png" alt="" width="158" height="158" /></td>
<td style="font-family:georgia; font-size:18px; color:#1d2129; width:318px;">
<p style="margin-left:12px; margin-bottom:0px; text-align:left;">TITLE OF WEB BLOG PAGE</p>
</td>
</tr>
<tr>
<td style="font-family: arial; font-size: 13px; color: #1d2129; width: 318px; height: 52px;">
<p style="margin-left:12px; margin-bottom:0px; text-align:left;">DESCRIPTION</p>
</td>
</tr>
<tr>
<td style="text-transform: uppercase; font-family: arial; font-size: 12px; color: #999999; width: 318px; margin:0; height: 52px;">
<p style="margin-left:11px; margin-bottom:0px; text-align:left;">DOMAIN OF BLOG OR WEB SITE</p>
</td>
</tr>
</tbody>
</table>
</a>
</div>
<h3><a href=" BLOG URL " title="TITLE OF BLOG PAGE" target="_top">TITLE OF BLOG PAGE</a></h3>
<blockquote><em>DESCRIPTION OF BLOG PAGE.</em></blockquote>
<form action="#">
<input type="submit" formaction="https://edwardtbabinski.us/facebook/welcome.html" value="Return to Entry Screen" />
<input type="submit" formaction="https://edwardtbabinski.us/facebook/history-theology/index.html" value="Return to “History & Theology” Entry Screen" />
<input onclick="history.back();" type="submit" value="Back" />
<input onclick="window.open('', '_self', ''); window.close();" type="submit" value="Close" />
</form>
<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/sdk.js#xfbml=1&version=v2.7&appId=254943438204795";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="URL OF THIS HREF WEB PAGE" data-numposts="5"></div>
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
</div>
<script async="" src="https://static.addtoany.com/menu/page.js" type="text/javascript"></script>
<!-- AddToAny END -->
<p><em>Embed This Topic</em></p>
<textarea cols="75" rows="3" style="font-size:11px; background-color: #3b5998; color:#ffffff">
<div class="separator" style="text-align:center;"><iframe src="URL TO THIS WEB PAGE HREF - EMBED LINK!" style="border:0px; height:600px; margin-bottom:0em; margin-left:0em; margin-right:0em; width:600px;"></iframe></div>
</textarea>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#open").click(function(){
$("#open").hide();
$("#modal-background").fadeIn();
})
$("#close").click(function(){
$("#modal-background").fadeOut(function(){
$("#open").show();
});
})
})
</script>
</body>
</html>
Google Embed
Google Format Code
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="keywords" content="KEYWORDS" />
<meta name="description" content="DESCRIPTION" />
<meta name="robots" content="index, follow" />
<style type="text/css">html {overflow-x:hidden} body {font-family: verdana; color: #333333; background-color: #ffffff;} a {color: #333333; text-decoration:none} a:hover{color:#3b5998} a:visited {color:#3b5998}</style>
</head>
<body>
<p style="vertical-align: middle; line-height: 1; text-align: center;font-size:12px">zoom using the middle mouse scroll button… <img style="border-width: 0px; padding: 0px; vertical-align:middle" src="https://edwardtbabinski.us/facebook/scrolling-icon.png" alt="Mouse scroll button" width="40" height="41" /></p>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
href: "http:// URL HERE",
width: '560',
async: true,
defer: true,
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>
</body>
</html>
Temporary Document II (Embed)
(On completion of embed)
<p><a style="color:#ffffff" class="button" href="javascript:modelesswin('URL HERE',600,600)">Comment using Facebook</a></p>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE OF ARTICLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="keywords" content="KEYWORDS HERE" />
<meta name="description" content="DESCRIPTION OF ARTICLE" />
<meta name="robots" content="index, follow" />
<style type="text/css">html {overflow-x:hidden} body {font-family: verdana; color: #333333; background-color: #E1E8F0;} a {color: #3b5998; text-decoration:none} a:hover{color:#3b5998} a:visited {color:#3b5998}</style>
<style type="text/css">
input[type=submit] {
margin-bottom:2px;
}
input[type=submit] {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 5px 10px;
border: 1px solid #1a1948;
border-radius: 8px;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1a1948));
background: -moz-linear-gradient(top, #3b5998, #1a1948);
background: linear-gradient(to bottom, #3b5998, #1a1948);
text-shadow: #0f0e28 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
}
input[type=submit]:hover,
input[type=submit]:focus {
border: 1px solid #1d1c50;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1f1e56));
background: -moz-linear-gradient(top, #3b5998, #1f1e56);
background: linear-gradient(to bottom, #3b5998, #1f1e56);
color: #ffffff;
text-decoration: none;
}
input[type=submit]:active {
background: #1a1948;
background: -webkit-gradient(linear, left top, left bottom, from(#1a1948), to(#1a1948));
background: -moz-linear-gradient(top, #1a1948, #1a1948);
background: linear-gradient(to bottom, #1a1948, #1a1948);
}
.button {
margin-bottom:2px;
}
.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 5px 10px;
border: 1px solid #1a1948;
border-radius: 8px;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1a1948));
background: -moz-linear-gradient(top, #3b5998, #1a1948);
background: linear-gradient(to bottom, #3b5998, #1a1948);
text-shadow: #0f0e28 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
}
.button:hover,
.button:focus {
border: 1px solid #1d1c50;
background: #3b5998;
background: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#1f1e56));
background: -moz-linear-gradient(top, #3b5998, #1f1e56);
background: linear-gradient(to bottom, #3b5998, #1f1e56);
color: #ffffff;
text-decoration: none;
}
.button:active {
background: #1a1948;
background: -webkit-gradient(linear, left top, left bottom, from(#1a1948), to(#1a1948));
background: -moz-linear-gradient(top, #1a1948, #1a1948);
background: linear-gradient(to bottom, #1a1948, #1a1948);
}
</style>
<script type="text/javascript">
<!--
var version_val = parseInt(navigator.appVersion)
//Check whether replace is supported or not
if (version_val>=4 || window.location.replace)
window.location.replace();
else
window.location.href =""
// -->
</script>
<script type="text/javascript">
//Modeless window script- By DynamicDrive.com
function modelesswin(url,mwidth,mheight){
if (document.all&&window.print) //if ie5
eval('window.showModelessDialog(url,"","help:0;resizable:1;dialogWidth:'+mwidth+'px;dialogHeight:'+mheight+'px")')
else
eval('window.open(url,"","width='+mwidth+'px,height='+mheight+'px,resizable=1,scrollbars=1")')
}
//To load via link, use something like below:
//<a href="javascript:modelesswin('http://yahoo.com',600,400)">Click here</a>
</script>
<meta content="TITLE OF ARTICLE" property="og:title"/>
<meta content="https://www.edwardtbabinski.us/scrivenings-thumb.png" property="og:image"/>
<meta content="254943438204795" property="fb:app_id"/>
<meta content="URL OF WEB PAGE" property="og:url"/>
<meta content="spirituality.seeker.7" property="fb:admins"/>
<meta content="edbabinski" property="fb:admins"/>
<meta content="website" property="og:type"/>
<meta content="DESCRIPTION OF ARTICLE" property="og:description"/>
<meta content="summary" name="twitter:card"/>
<meta content="@edwardtbabinski" name="twitter:site"/>
<meta content="TITLE OF ARTICLE" name="twitter:title"/>
<meta content="https://edwardtbabinski.us/twitter/scrivenings-thumb-250.png" name="twitter:image"/>
<meta content="@edwardtbabinski" name="twitter:creator"/>
<meta content="DESCRIPTION OF ARTICLE" name="twitter:description"/>
</head>
<body style="font-size:11px">
<div style="width:560px">
<table style="float:right;width:64px"><tr><td>
<p><img style="border-width: 0px" src="https://edwardtbabinski.us/related-content/distla/fb-ico.png" alt="" width="64" height="64" /></p>
<div class="fb-like" data-href="http:// BLOG URL TO EMBED FOR FB STATISTIC " data-width="32" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
</td></tr></table>
<div id="preview" style="display:block; margin-right:auto; margin-left:auto">
<a style="text-decoration:none" href="URL OF BLOG ARTICLE" target="_top">
<table style="width:476px; height:158px; border-spacing:0px; padding:0px; background-color:#ffffff; border: 1px #e5e5e5 solid;">
<tbody>
<tr>
<td style="vertical-align:top; width:158px; height:158px; margin-top:0px; margin-bottom:0px" rowspan="3"><img style="border-width: 0px;" src="https://www.edwardtbabinski.us/scrivenings-thumb.png" alt="" width="158" height="158" /></td>
<td style="font-family:georgia; font-size:18px; color:#1d2129; width:318px;">
<p style="margin-left:12px; margin-bottom:0px; text-align:left;">TITLE OF BLOG ARTICLE</p>
</td>
</tr>
<tr>
<td style="font-family: arial; font-size: 13px; color: #1d2129; width: 318px; height: 52px;">
<p style="margin-left:12px; margin-bottom:0px; text-align:left;">BRIEF DESCRIPTION</p>
</td>
</tr>
<tr>
<td style="text-transform: uppercase; font-family: arial; font-size: 12px; color: #999999; width: 318px; margin:0; height: 52px;">
<p style="margin-left:11px; margin-bottom:0px; text-align:left;">DOMAIN NAME TO BLOG</p>
</td>
</tr>
</tbody>
</table>
</a>
</div>
<h3><a href="BLOG URL" title="" target="_top">ARTICLE TITLE.</a></h3>
<blockquote><em>LONGER DESCRIPTION</em></blockquote>
<form action="#">
<a class="button" href="javascript:modelesswin('https://edwardtbabinski.us/facebook/welcome.html',600,600)">Return to Entry Screen</a>
<a class="button" href="javascript:modelesswin('https://edwardtbabinski.us/facebook/history-theology/index.html',600,600)">Return to “History & Theology” Entry Screen</a>
<input onclick="history.back();" type="submit" value="Back" />
<input onclick="window.open('', '_self', ''); window.close();" type="submit" value="Close" />
</form>
<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/sdk.js#xfbml=1&version=v2.7&appId=254943438204795";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="WEBSITE URL (THIS HREF!)" data-numposts="5"></div>
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
</div>
<script async="" src="https://static.addtoany.com/menu/page.js" type="text/javascript"></script>
<!-- AddToAny END -->
<p><em>Embed This Topic</em></p>
<textarea cols="75" rows="3" style="font-size:11px; background-color: #3b5998; color:#ffffff">
<div class="separator" style="text-align:center;"><iframe src="URL TO THIS WEB PAGE HREF - EMBED LINK!" style="border:0px; height:600px; margin-bottom:0em; margin-left:0em; margin-right:0em; width:600px;"></iframe></div>
</textarea>
</div>
</body>
</html>
Fetch FB Stats
METHOD #1
<div id="XMLHolder"></div>
<link href="https://edwardtbabinski.us/facebook/XMLDisplay.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://edwardtbabinski.us/facebook/XMLDisplay.js"></script>
<script>LoadXML("XMLHolder","https://graph.facebook.com/?ids=https://WHATEVER-URL-YOU-WANT-TO-CHECK.html"); </script>
DOM Iframe Info
(Iframe And Browser History )
This code does not remove browsing history, if used to embed an iframe. It is useful however, if loaded into a modeless window, and “masks” URL's as they are navigated through, revealing only the opening, initial URL of the iframe itself. When the modeless window is closed, the browsing history of the pages navigated through, disappears with it.
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript">
function initialize() {
var embedFrame = document.createElement("IFRAME");
embedFrame.id = "embedFrame";
embedFrame.src = "URL OF TARGET (CHILD) ARTICLE";
embedFrame.width = "600";
embedFrame.height = "600";
embedFrame.frameBorder = "0";
embedFrame.marginwidth = "0";
document.body.appendChild(embedFrame);
}
</script>
<style type="text/css">html {overflow:hidden} body {font-family: verdana; color: #cccccc; background-color: #000000;}</style>
</head>
<body style="background-color:#000000;" onload="initialize()">
</body>
</html>
----
Additional style tags that may or may not be necessary:
var iframeHeaderCell = document.getElementById('wheretoputheiframe');
var dynamicURL = 'http://example.com/testing.html' //your url
var iframeHeader = document.createElement('IFRAME');
iframeHeader.id = 'iframeHeader';
iframeHeader.src = dynamicURL ;
iframeHeader.width = 600;
iframeHeader.height = 600;
iframeHeader.scrolling = 'no';
iframeHeader.frameBorder = 0;
iframeHeader.align = 'center';
iframeHeader.valign='top'
iframeHeader.marginwidth = 0;
iframeHeader.marginheight = 0;
iframeHeader.hspace = 0;
iframeHeader.vspace = 0;
iframeHeaderCell.appendChild(iframeHeader);
These social media/website metatags and formatter for facebook style previews are for our personal, non-commercial use but if people locate this page via search engine, they're welcomed to use it too. I make no guarantees how well it works, all the time. The Twitter & Facebook metatags do work for our blogs and web sites. This jquery script works for me most all the time . Some times after overloading my processor I have to clear my browser cache or reload the page. I have best luck, pasting the URL and pressing [DEL] on keyboard (Windows 7). I downloaded the script that skims pages utilizing jquery from this link . You can too, and upload to your own server for your personal use. ((I used Firebug to figure out how to create a FB-style preview template stub from scratch (my preferred desktop HTML5 editor that will teach user HTML5 standards) and HTML5 validation online & here's a validator that creates a helpful “Repaired HTML” .)) CSS by “this ”. Good luck!
Find me on social media at: