tag:blogger.com,1999:blog-86138940865782142632024-03-12T17:44:11.286-07:00Free FaviconUnknownnoreply@blogger.comBlogger11125tag:blogger.com,1999:blog-8613894086578214263.post-71049712037673085722016-05-16T02:02:00.002-07:002016-05-16T15:47:41.615-07:00Step by Step Instruction to Install Facebook Comment Plugin into Blogspot Templates<p>Step by Step Installation. For <a href="http://free-favicons.blogspot.com/2016/05/adding-facebook-comments-plugin-and.html">custom CSS see this earlier post</a> with instructions.</p>
<p>1. Open Blog Template</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-JtZBREsnQCk/VzmCQ_NtOpI/AAAAAAAAA1c/8lKn6s7g5DwVWuuuAX5B8Z5oLBlnBn4lwCLcB/s1600/facebook-comment-plugin01.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-JtZBREsnQCk/VzmCQ_NtOpI/AAAAAAAAA1c/8lKn6s7g5DwVWuuuAX5B8Z5oLBlnBn4lwCLcB/s1600/facebook-comment-plugin01.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>2. Copy Template to an HTML Editor by clicking on “Edit HTML” and right click with mouse, and “Select All.” Right click on mouse, and “Copy”. You can paste by right-clicking mouse, “Paste” into HTML Editor, or, [CONTROL] Key + [V] to paste into HTML Validator/Editor. Paste to your HTML Editor. To those who do not have an editor, I highly recommend the <a href="https://www.freehtmlvalidator.com/" target="_blank">CSE HTML Validator Lite</a> (which is free).</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-0Kcbee4-N78/VzmCQ6IBuyI/AAAAAAAAA1g/sh107yIqYhQGVXrsQLaPd9ivQXTiwO64QCLcB/s1600/facebook-comment-plugin02.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-0Kcbee4-N78/VzmCQ6IBuyI/AAAAAAAAA1g/sh107yIqYhQGVXrsQLaPd9ivQXTiwO64QCLcB/s1600/facebook-comment-plugin02.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>3. Paste Template into HTML Validator.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-4VeXlXIW06A/VzmCQxwogbI/AAAAAAAAA1k/XqlNP6xRnP0fKmqvhKEHSZlzxAAJFvafQCLcB/s1600/facebook-comment-plugin03.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-4VeXlXIW06A/VzmCQxwogbI/AAAAAAAAA1k/XqlNP6xRnP0fKmqvhKEHSZlzxAAJFvafQCLcB/s1600/facebook-comment-plugin03.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>4. Go to <a href="https://developers.facebook.com/apps/" target="_blank">https://developers.facebook.com/apps/</a> and click on “Add A New App”</p>
<p>There are two routes on that page to “Add A New App”</p>
<p>Route 1</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-09yvdfr82PI/VzmCRDg8F-I/AAAAAAAAA1o/F3-APuZU6ow2k8NCiJjEx944hrtbbKlWgCLcB/s1600/facebook-comment-plugin04.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-09yvdfr82PI/VzmCRDg8F-I/AAAAAAAAA1o/F3-APuZU6ow2k8NCiJjEx944hrtbbKlWgCLcB/s1600/facebook-comment-plugin04.jpg" /></a></div>
<p>Route 2</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-N7lq-ioZ-zg/VzoBYh_hE1I/AAAAAAAAA5c/Xc129rFeCXULqg_n3bKAiKYf7KNfk9ATQCLcB/s1600/adding-app-04.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://2.bp.blogspot.com/-N7lq-ioZ-zg/VzoBYh_hE1I/AAAAAAAAA5c/Xc129rFeCXULqg_n3bKAiKYf7KNfk9ATQCLcB/s1600/adding-app-04.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>5. Choose WWW.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-Beo1TLNGPZ0/VzmCRH41bYI/AAAAAAAAA1w/csriG27PIt0cGJ_46CXcn-GEL6bT8VK8gCKgB/s1600/facebook-comment-plugin05.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-Beo1TLNGPZ0/VzmCRH41bYI/AAAAAAAAA1w/csriG27PIt0cGJ_46CXcn-GEL6bT8VK8gCKgB/s1600/facebook-comment-plugin05.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>6. Choose a name for your website “App” and click on “Create A New App ID”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-HAm_ggb2Ims/VzmEK4fTkGI/AAAAAAAAA14/xJ-qJDTRq8QqNl4u88AAMUlCQPwfinWWACLcB/s1600/facebook-comment-plugin06.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-HAm_ggb2Ims/VzmEK4fTkGI/AAAAAAAAA14/xJ-qJDTRq8QqNl4u88AAMUlCQPwfinWWACLcB/s1600/facebook-comment-plugin06.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>7. Fill in information.</p>
<ul>
<li>name for website 'app'</li>
<li>your email address</li>
<li>category</li>
<li>click to create new 'app'</li>
</ul>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-hOiUZVD8Vwg/VzmEkQ4GH1I/AAAAAAAAA18/w-CD1xnX46YCWNeVJlWX4q6kaVOkrqa8ACLcB/s1600/facebook-comment-plugin07.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-hOiUZVD8Vwg/VzmEkQ4GH1I/AAAAAAAAA18/w-CD1xnX46YCWNeVJlWX4q6kaVOkrqa8ACLcB/s1600/facebook-comment-plugin07.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h1>OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN</h1>
<h3>SAMPLE OF WHAT YOUR BLOG TEMPLATE SHOULD LOOK LIKE IN THE LOCATION OF THE </head> and <body TAGS WHEN COMPLETED AFTER FOLLOWING THE STEPS BELOW</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; line-height:1; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:650px; overflow:auto; overflow-y:hidden">
<p><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<meta expr:content='data:blog.pageName' property='og:title'/><br />
<b:else/><br />
<meta content='YOUR BLOG TITLE' property='og:title'/><br />
</b:if></p>
<p><meta expr:content='data:blog.title' property='og:site_name'/></p>
<p><b:if cond='data:blog.postImageThumbnailUrl'><br />
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br />
<b:else/><br />
<meta content='http://www.an-image-url.com/200x200pixel-default-image.png' property='og:image'/><br />
</b:if></p>
<p><b:if cond='data:blog.metaDescription != &quot;&quot;'><br />
<meta expr:content='data:blog.metaDescription' name='og:description'/><br />
</b:if></p>
<p><meta content='FACEBOOK App ID Number' property='fb:app_id'/><br />
<meta content='THE ID OR NAME I USE ON FACEBOOK' property='fb:admins'/><br />
<meta content='Author' property='og:type'/><br />
<meta content='DESCRIPTION OF BLOG.' property='og:description'/></p>
<p><b></head></b></p>
<p><b><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></b></p>
<p><script><br />
window.fbAsyncInit = function() {<br />
FB.init({<br />
appId : '<b style="color:red">YOUR-APP-ID-HERE</b>',<br />
xfbml : true,<br />
version : 'v2.6'<br />
});<br />
};</p>
<p>(function(d, s, id){<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) {return;}<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));<br />
</script></p>
<p><div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.6&amp;appId=YOUR-FACEBOOK-APP-ID-NUMBER";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script></p>
<p><em><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'><br />
<b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar' visible='true'><br />
<b:includable id='main'><script type=&quot;text/javascript&quot;><br />
function setAttributeOnload(object, attribute, val) {<br />
if(window.addEventListener) {<br />
window.addEventListener(&#39;load&#39;,<br />
function(){ object[attribute] = val; }, false);<br />
} else {<br />
window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });<br />
}<br />
}<br />
</script><br />
<div id="navbar-iframe-container"></div></em></p></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>8. developers.facebook.com will now create your App ID and Script.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-9junLO0u_wA/VzmEpk0N1RI/AAAAAAAAA2A/31LN9e89OW8v1NSmnDA7YbnbZHcGn0ZAwCLcB/s1600/facebook-comment-plugin08.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-9junLO0u_wA/VzmEpk0N1RI/AAAAAAAAA2A/31LN9e89OW8v1NSmnDA7YbnbZHcGn0ZAwCLcB/s1600/facebook-comment-plugin08.jpg" /></a></div>
<p>You can copy and edit this text from your clipboard by highlighting text, then right-clicking on mouse to “Copy”, or highlighting text and holding down both [CONTROL] and [C] keys (Control + Copy).</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:center; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px; overflow:auto; overflow-y:hidden">
<pre><script>
window.fbAsyncInit = function() {
FB.init({
appId : '<b style="color:#b30f41">YOUR APP ID NUMBER GOES HERE</b>',
xfbml : true,
version : 'v2.6'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script></pre></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>9. It states, “You should insert it directly after the opening <body> tag on each page you want to load it:”</p>
<p>In the HTML Editor/Validator, locate this line :</p>
<p style="background-color:#ffffff; color:#000000; padding:5px"><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></p>
<p>With the cursor placed at the end of this line of code, press [ENTER] and move the code which follows it, further down the page.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-i5aca1Wo920/VzmFDpXyx_I/AAAAAAAAA2Q/E4Z-YZLdjb8OXnq8Y3Rfpn7sKKzrTlejwCLcB/s1600/facebook-comment-plugin09.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://2.bp.blogspot.com/-i5aca1Wo920/VzmFDpXyx_I/AAAAAAAAA2Q/E4Z-YZLdjb8OXnq8Y3Rfpn7sKKzrTlejwCLcB/s1600/facebook-comment-plugin09.jpg" /></a></div>
<h3>In other words, it should look something like this</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; line-height:1; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:650px; overflow:auto; overflow-y:hidden">
<p><b></head></b></p>
<p><b><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></b></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p style="color:red">And you will insert the following App Identification code behind the <body tag.</p>
<p><script><br />
window.fbAsyncInit = function() {<br />
FB.init({<br />
appId : '<b style="color:red">YOUR FACEBOOK APP ID#</b>',<br />
xfbml : true,<br />
version : 'v2.6'<br />
});<br />
};</p>
<p> (function(d, s, id){<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) {return;}<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));<br />
</script></p>
<p><div id="navbar-iframe-container"></div></p></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>10. Now paste the Facebook Javascript App ID code into the Template.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-rMP66EyOPAk/VzmFLAgwsgI/AAAAAAAAA2U/NXl9xr4_n4cCJ1UJJhaXmnMmqeAfPETmgCLcB/s1600/facebook-comment-plugin10.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-rMP66EyOPAk/VzmFLAgwsgI/AAAAAAAAA2U/NXl9xr4_n4cCJ1UJJhaXmnMmqeAfPETmgCLcB/s1600/facebook-comment-plugin10.jpg" /></a></div>
<h3>It should look something like this</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; line-height:1; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:650px; overflow:auto; overflow-y:hidden">
<p><b></head></b></p>
<p><b><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></b></p>
<p><script><br />
window.fbAsyncInit = function() {<br />
FB.init({<br />
appId : '<b style="color:red">YOUR FACEBOOK APP ID#</b>',<br />
xfbml : true,<br />
version : 'v2.6'<br />
});<br />
};</p>
<p> (function(d, s, id){<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) {return;}<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));<br />
</script></p>
</div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>11. Since you have your “APP ID Number,” now, I want to begin inserting necessary codes throughout the blog.</p>
<p>FIRST, make certain your opening <u><html></u> tag is correct and includes the Open Graphic code.</p>
<p style="background-color:#ffffff; padding:5px; color:#000000"><html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'></p>
<p>You can use search tool on HTML Validator/Editor, to perform a Search for <u><html</u> tag. Check template code and update as necessary.</p>
<p>Now that your html tag is updated, return again to body tag, by searching the HTML editor for <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> and move on to next step of adding code.</p>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>12. Go ahead and paste in the <u>Facebook Commenting Plugin</u> code. Paste this code right below the APP ID Script provided by Facebook (from above).</p>
<p>You can use the scroll bar from left to right, and note the “<b style="color:#b30f41">YOUR APP ID NUMBER GOES HERE</b>” in red. Be certain to update this section with your APP ID that Facebook has given you for your blog. Every App ID is unique and specific.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px; overflow:auto; overflow-y:hidden">
<pre><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&amp;version=v2.6&amp;appId=<b style="color:#b30f41">YOUR APP ID NUMBER GOES HERE</b>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></pre></div>
<p> </p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-jlYghtSScJc/VzmGm9JcS8I/AAAAAAAAA2k/fF_CTt1AJtckodR71WjzELH46j4H4GOZACLcB/s1600/facebook-comment-plugin12.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-jlYghtSScJc/VzmGm9JcS8I/AAAAAAAAA2k/fF_CTt1AJtckodR71WjzELH46j4H4GOZACLcB/s1600/facebook-comment-plugin12.jpg" /></a></div>
<h3>In other words, it should look something like this</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; line-height:1; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:650px; overflow:auto; overflow-y:hidden">
<p><b></head></b></p>
<p><b><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></b></p>
<p><script><br />
window.fbAsyncInit = function() {<br />
FB.init({<br />
appId : '<b style="color:red">YOUR FACEBOOK APP ID#</b>',<br />
xfbml : true,<br />
version : 'v2.6'<br />
});<br />
};</p>
<p> (function(d, s, id){<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) {return;}<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));<br />
</script></p>
<p><div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.6&amp;appId=<b style="color:red">YOUR-FACEBOOK-APP-ID-NUMBER</b>";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script></p>
</div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>13. Now, you have the Facebook Javascript “App ID Javascript” code, followed by the Facebook Commenting Plugin Code in the template.</p>
<p>Use your HTML Editor/Validator to perform a Search for this line of code:</p>
<p style="background-color:#ffffff; color:#000000; padding:5px"><div class='post-footer-line post-footer-line-3'><br />
<span class='post-location'></p>
<p>Place your cursor at the end of these lines and press the [ENTER] key and push the following code further down page to make room for the <u>Placement of the Facebook Commenting Plugin</u> within the template.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-2htX9rW-nfs/VzmG2SnJokI/AAAAAAAAA2w/72afYY8ajCAoECUFygEH16KADO9Gc-ucQCLcB/s1600/facebook-comment-plugin13.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://2.bp.blogspot.com/-2htX9rW-nfs/VzmG2SnJokI/AAAAAAAAA2w/72afYY8ajCAoECUFygEH16KADO9Gc-ucQCLcB/s1600/facebook-comment-plugin13.jpg" /></a></div>
<h3>In other words, your template should look something like this</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; line-height:1; color:#000000; width:625px; overflow:auto; overflow-y:hidden">
<p><em><!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/><br />
</span> </div></em></p>
<p><em><div class='post-footer-line post-footer-line-2'><span class='post-labels'><br />
<b:if cond='data:post.labels'><br />
<data:postLabelsLabel/><br />
<b:loop values='data:post.labels' var='label'><br />
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br />
</b:loop><br />
</b:if><br />
</span> </div></em></p>
<p><b><div class='post-footer-line post-footer-line-3'><br />
<span class='post-location'></b></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><em><b:if cond='data:top.showLocation'><br />
<b:if cond='data:post.location'><br />
<data:postLocationLabel/><br />
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a><br />
</b:if><br />
</b:if><br />
</span> </div><br />
</div><br />
</div><br />
</b:includable></em></p>
</div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h1>OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN</h1>
<h3>SAMPLE OF WHAT YOUR BLOG TEMPLATE SHOULD LOOK LIKE WHEN COMPLETED</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; line-height:1; color:#000000; width:625px; overflow:auto; overflow-y:hidden">
<p><em><!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/><br />
</span> </div></em></p>
<p><em><div class='post-footer-line post-footer-line-2'><span class='post-labels'><br />
<b:if cond='data:post.labels'><br />
<data:postLabelsLabel/><br />
<b:loop values='data:post.labels' var='label'><br />
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br />
</b:loop><br />
</b:if><br />
</span> </div></em></p>
<p><div class='post-footer-line post-footer-line-3'><br />
<span class='post-location'></p>
<p><b><!-- Facebook comment box --></b></p>
<p><b:if cond='data:blog.pageType == "item"'><br />
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br />
<div> <fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540'/></div></div>
</b:if></p>
<p><b><!-- Facebook comment box --></b></p>
<p><em><b:if cond='data:top.showLocation'><br />
<b:if cond='data:post.location'><br />
<data:postLocationLabel/><br />
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a><br />
</b:if><br />
</b:if><br />
</span> </div><br />
</div><br />
</div><br />
</b:includable></em></p>
</div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>14. Insert the following piece of code in the space that was created using the HTML Editor/Validator. You will have the choice between dark color scheme or light color scheme.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-HyhqxsjRzEw/VzmHZtJU5GI/AAAAAAAAA24/ny9O4VY9zPUstN-O4ze4pABRDRol6CzvACLcB/s1600/facebook-comment-plugin14.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-HyhqxsjRzEw/VzmHZtJU5GI/AAAAAAAAA24/ny9O4VY9zPUstN-O4ze4pABRDRol6CzvACLcB/s1600/facebook-comment-plugin14.jpg" /></a></div>
<p> </p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px; overflow:auto; overflow-y:hidden">
<pre><!-- Facebook comment box -->
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540'/></div></div>
</b:if>
<!-- Facebook comment box --></pre></div>
<h3>In other words your code should look something like this</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; line-height:1; color:#000000; width:625px; overflow:auto; overflow-y:hidden">
<p><b><div class='post-footer-line post-footer-line-3'><br />
<span class='post-location'></b></p>
<p><b><!-- Facebook comment box --></b></p>
<p><b:if cond='data:blog.pageType == "item"'><br />
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br />
<div> <fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540px'/></div></div>
</b:if></p>
<p><b><!-- Facebook comment box --></b></p>
</div>
<p>Note the width of 540 pixels. This is the length the commenting plugin will display across your blog in its position. Note the colorscheme is set to 'dark'. Facebook offers dark and light color schemes. Your selection should be based on your blog color and your personal preference.</p>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>15. Next prepare Metatags that are correctly configured for Facebook to scan your site for errors, such as “Multiple OG URL's” or “Parsing Errors”. These metatags have correctly worked when performing the Facebook Debugger Scan.</p>
<p>When you have completed edits, copy and paste the following facebook-specific meta tags directly above <u>the closing </head> tag</u>. You can find the <head> and </head> tags, by performing a search of the template with the HTML Editor/Validator.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:640px; overflow:auto; overflow-y:hidden">
<pre>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='<b style="color:#b30f41">Title of your Blog</b>' 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='<b style="color:#b30f41">URL of 200x200px default blog image</b>' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='<b style="color:#b30f41">YOUR APP ID NUMBER GOES HERE</b>' property='fb:app_id'/>
<meta content='<b style="color:#b30f41">YOUR FACEBOOK USER NAME ID or NUMBER</b>' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='<b style="color:#b30f41">GOOD, BRIEF DESCRIPTION OF YOUR BLOG</b>' property='og:description'/>
</pre></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>16. The preceding graphics and demonstrations provide the correct position for metatags. (When filling out the meta tags with personal identifiers and information DO NOT include any text with characters such as "" or “ ' ” --these types syntax will create parsing errors when pasted into the blogger template and attempt to save.)</p>
<h3>In other words, your template should look something like this</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; line-height:1; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:650px; overflow:auto; overflow-y:hidden">
<p><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<meta expr:content='data:blog.pageName' property='og:title'/><br />
<b:else/><br />
<meta content='<b style="color:red">YOUR BLOG TITLE</b>' property='og:title'/><br />
</b:if></p>
<p><meta expr:content='data:blog.title' property='og:site_name'/></p>
<p><b:if cond='data:blog.postImageThumbnailUrl'><br />
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br />
<b:else/><br />
<meta content='<b style="color:red">http://www.an-image-url.com/200x200pixel-default-image.png</b>' property='og:image'/><br />
</b:if></p>
<p><b:if cond='data:blog.metaDescription != &quot;&quot;'><br />
<meta expr:content='data:blog.metaDescription' name='og:description'/><br />
</b:if></p>
<p><meta content='<b style="color:red">FACEBOOK App ID Number</b>' property='fb:app_id'/><br />
<meta content='<b style="color:red">THE ID OR NAME I USE ON FACEBOOK</b>' property='fb:admins'/><br />
<meta content='Author' property='og:type'/><br />
<meta content='<b style="color:red">DESCRIPTION OF BLOG.</b>' property='og:description'/></p>
<p><b></head></b></p>
<p><b><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></b></p>
</div>
<p>*Note again: DO NOT USE <b style="color:red">"</b> or <b style="color:red">' '</b> or other syntax that will create parsing errors in the metatags. Use only plain alphabet characters.</p>
<p>Now, right click using mouse, and “SELECT ALL” and then right click on “COPY”.</p>
<p>This will copy the entire Blog Template to your computer clipboard.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-VoCzmATmnX8/VzmIuEP3XQI/AAAAAAAAA3I/oCzHiSyGjs8ECaYdB16jcNoLVcoZJVvBQCLcB/s1600/facebook-comment-plugin16.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-VoCzmATmnX8/VzmIuEP3XQI/AAAAAAAAA3I/oCzHiSyGjs8ECaYdB16jcNoLVcoZJVvBQCLcB/s1600/facebook-comment-plugin16.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>17. Now that the template is copied on your computer clipboard, return to blogger template, and right click on “SELECT ALL” and “PASTE”.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-TK1zMyujTZk/VzmI7PgpQAI/AAAAAAAAA3M/s1BgRKlSvkM8zscgaKgORdcChwowvMncQCLcB/s1600/facebook-comment-plugin17.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-TK1zMyujTZk/VzmI7PgpQAI/AAAAAAAAA3M/s1BgRKlSvkM8zscgaKgORdcChwowvMncQCLcB/s1600/facebook-comment-plugin17.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>18. Click on “SAVE TEMPLATE”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-XKnWuBz3lfg/VzmJGtEqm-I/AAAAAAAAA3Q/3PPGznHNNCMyian57kmRgErJjsOh-G_cwCLcB/s1600/facebook-comment-plugin18.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-XKnWuBz3lfg/VzmJGtEqm-I/AAAAAAAAA3Q/3PPGznHNNCMyian57kmRgErJjsOh-G_cwCLcB/s1600/facebook-comment-plugin18.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>19. Now, your template is updated. Return to Facebook-Develop site and fill in the Web Site field. Click “NEXT”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-BkyJdv_-3MI/VzmJSHVHP1I/AAAAAAAAA3c/Q-EWM7HHxO43xO1LSbkFAA1Z0F--iLUZwCLcB/s1600/facebook-comment-plugin19.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-BkyJdv_-3MI/VzmJSHVHP1I/AAAAAAAAA3c/Q-EWM7HHxO43xO1LSbkFAA1Z0F--iLUZwCLcB/s1600/facebook-comment-plugin19.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>20. A screen appears to “Test Your App” by adding a Like button to your blog. This is optional if you wish to do so.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-wADGx1ho0iQ/VzmJfRzGPII/AAAAAAAAA3g/pmghko0GOCwd6Am95-R3sjm-J72ujCU_gCLcB/s1600/facebook-comment-plugin20.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-wADGx1ho0iQ/VzmJfRzGPII/AAAAAAAAA3g/pmghko0GOCwd6Am95-R3sjm-J72ujCU_gCLcB/s1600/facebook-comment-plugin20.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>21. If you scroll down to bottom of screen, however, “FINISHED” appears. We have already installed the necessary codes to get up and running.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-eNxAe0UA654/VzmJu_62dJI/AAAAAAAAA3k/povGUxmanKUEhfAAdE2JYkpsxV-b3SkKgCLcB/s1600/facebook-comment-plugin21.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-eNxAe0UA654/VzmJu_62dJI/AAAAAAAAA3k/povGUxmanKUEhfAAdE2JYkpsxV-b3SkKgCLcB/s1600/facebook-comment-plugin21.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>22. On the same page, the third option listed, “Social Plugins” is listed. Click on “Social Plugins”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-MNu4wtB3E6U/VzmJ6umj1oI/AAAAAAAAA3s/KbqO3OsdGq8NupsBrD37xdJMwBQcnuk5ACLcB/s1600/facebook-comment-plugin22.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-MNu4wtB3E6U/VzmJ6umj1oI/AAAAAAAAA3s/KbqO3OsdGq8NupsBrD37xdJMwBQcnuk5ACLcB/s1600/facebook-comment-plugin22.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>23. The page will forward to: <a href="http://developers.facebook.com/docs/plugins/" target="_blank">developers.facebook.com/docs/plugins/</a></p>
<p>Scroll down to “Comments Plugin” and click on “Web”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-n5RrGBe2j6I/VzmKK5HJk7I/AAAAAAAAA30/RE1nmUVPZ7gdNoXf-vyvJN1KHgg_s-OiwCLcB/s1600/facebook-comment-plugin23.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://2.bp.blogspot.com/-n5RrGBe2j6I/VzmKK5HJk7I/AAAAAAAAA30/RE1nmUVPZ7gdNoXf-vyvJN1KHgg_s-OiwCLcB/s1600/facebook-comment-plugin23.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>24. The page will forward to: <a href="http://developers.facebook.com/docs/plugins/comments/" target="_blank">developers.facebook.com/docs/plugins/comments/</a></p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-1d5IM6fNFeY/VzmKZHEUcLI/AAAAAAAAA38/hPTpU11i_vI-BF9LYYddzK1WztA5VXpQgCLcB/s1600/facebook-comment-plugin24.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-1d5IM6fNFeY/VzmKZHEUcLI/AAAAAAAAA38/hPTpU11i_vI-BF9LYYddzK1WztA5VXpQgCLcB/s1600/facebook-comment-plugin24.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>25. Scroll down to the “Comments Plugin Code Generator”</p>
<p>Fill in your blog URL, set the width of comment plugin and then Click “Get Code”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-KzZBDWsJ6CA/VzmKiWA0_EI/AAAAAAAAA4E/6jlLt00WbqQvKagfSv9zWewU2XDYqDz6wCLcB/s1600/facebook-comment-plugin25.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://2.bp.blogspot.com/-KzZBDWsJ6CA/VzmKiWA0_EI/AAAAAAAAA4E/6jlLt00WbqQvKagfSv9zWewU2XDYqDz6wCLcB/s1600/facebook-comment-plugin25.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>26. Pay attention to the YELLOW LINE.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-gFShBDtYp30/VzmKy2iIFvI/AAAAAAAAA4M/Gbv5bQL075UiQiwdQIwLn9u6rftFNSi4wCLcB/s1600/facebook-comment-plugin26.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-gFShBDtYp30/VzmKy2iIFvI/AAAAAAAAA4M/Gbv5bQL075UiQiwdQIwLn9u6rftFNSi4wCLcB/s1600/facebook-comment-plugin26.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>27. Click on the “Public Mode can be enabled in the App Dashboard.”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-dJ39PLK-K7k/VzmLS-oUokI/AAAAAAAAA4U/ehLSpLxzYMIEfquaJhiJEssC_sdLAMCZwCLcB/s1600/facebook-comment-plugin27.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-dJ39PLK-K7k/VzmLS-oUokI/AAAAAAAAA4U/ehLSpLxzYMIEfquaJhiJEssC_sdLAMCZwCLcB/s1600/facebook-comment-plugin27.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>28. developers.facebook.com/apps/YOUR APP ID # HERE/review-status/ will open. Click on “YES” to enable public access, and “CONFIRM”</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-NhBMcTWy834/VzmLeiy0ATI/AAAAAAAAA4c/Fu9ibJwPn1c4U77hYtnoJMutQcrTmD_3QCLcB/s1600/facebook-comment-plugin28.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-NhBMcTWy834/VzmLeiy0ATI/AAAAAAAAA4c/Fu9ibJwPn1c4U77hYtnoJMutQcrTmD_3QCLcB/s1600/facebook-comment-plugin28.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>29. Now, your Facebook Commenting Plugin is “Live” to the Public.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-K__mQH1U-og/VzmLsJ3zPzI/AAAAAAAAA4g/wCLS1n1S6-gUP3MhafjKbgrvn_7XD-TgQCLcB/s1600/facebook-comment-plugin29.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-K__mQH1U-og/VzmLsJ3zPzI/AAAAAAAAA4g/wCLS1n1S6-gUP3MhafjKbgrvn_7XD-TgQCLcB/s1600/facebook-comment-plugin29.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h1>Facebook Sharing Debugger Process</h1>
<p>30. To verify that your code is correct and installed properly, go to <a href="https://developers.facebook.com/tools/debug/sharing" target="_blank">https://developers.facebook.com/tools/debug/sharing</a></p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-GSFoUcqKZqo/VzmL3bxBWdI/AAAAAAAAA4o/YSKG8z4hEF0JLy5F0etVhgEDGhyg6MpqgCLcB/s1600/facebook-comment-plugin30.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-GSFoUcqKZqo/VzmL3bxBWdI/AAAAAAAAA4o/YSKG8z4hEF0JLy5F0etVhgEDGhyg6MpqgCLcB/s1600/facebook-comment-plugin30.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>31. Type your blog URL and then click on “DEBUG” on the right-hand side of the screen.</p>
<h3 style="color:yellow">Be prepared for the crawler to list some error it <u>previously</u> found at an earlier date, in the database. See the date it has listed of the last crawl.</h3>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-7qj-C9OXE5U/VzmMJIXpHzI/AAAAAAAAA4w/dLkwnrVegdoXSivgXRXO4FPL8hmRJZabACLcB/s1600/facebook-comment-plugin31.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://4.bp.blogspot.com/-7qj-C9OXE5U/VzmMJIXpHzI/AAAAAAAAA4w/dLkwnrVegdoXSivgXRXO4FPL8hmRJZabACLcB/s1600/facebook-comment-plugin31.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>32. When the screen refreshed, it probably included errors. If this is the first time your blog contains metatags specific to Facebook you should now be able to correct those errors: <u>Click on “SCRAPE AGAIN”</u>.</p>
<p>Try both URL's.</p>
<p>http://your-blog-site.blogspot.com/ and</p>
<p>http://your-blot-site.blogspot.com/2016/03/testing-any-page.html on the sharing debugger.</p>
<p>Both of my URL's came up error free for this demonstration.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-lK9_RyuVqvE/VzmMeq7CXsI/AAAAAAAAA44/wjYP3MHq4PogtVNBkK9fGKEC997EjWu6QCLcB/s1600/facebook-comment-plugin32.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://1.bp.blogspot.com/-lK9_RyuVqvE/VzmMeq7CXsI/AAAAAAAAA44/wjYP3MHq4PogtVNBkK9fGKEC997EjWu6QCLcB/s1600/facebook-comment-plugin32.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>33. Open your blog, and refresh one of your posts. Perform a test post. No errors such as “More than one OG URL's specified” should display.</p>
<p>Your blog should include a “Moderation Tool” since your username and APP ID is defined in the facebook meta tags.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-Pvb2GHiitv8/VzmMqv68UOI/AAAAAAAAA5A/zpdz40ecyiM21lqQY3JwNWU_3PXoVHfGQCLcB/s1600/facebook-comment-plugin33.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Comment Plugin Install Instruction for Blogspots" style="border:0px" src="https://3.bp.blogspot.com/-Pvb2GHiitv8/VzmMqv68UOI/AAAAAAAAA5A/zpdz40ecyiM21lqQY3JwNWU_3PXoVHfGQCLcB/s1600/facebook-comment-plugin33.jpg" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>As of 5/16/2016: I just performed an <a href="http://history-christian-church.blogspot.com/2012/03/universalists.html" target="_blank">install of the Commenting App on this blog</a>. The code on this page apparently works. I encountered no major problems when using the debugger app. There are usually minimal debugger issues, i.e., during the first scrape, there may be outdated database information that notes parser or multiple OG URL's or perhaps even warning that the fetch for thumbnail exceeds 8 mb on a 200x200 thumbnail... simply click “scrape” again... 2 or 3 times if necessary, to correct the information in the system.</p>
<p>Otherwise, the Commenting Plugin App should work without incident, and does or should, include the moderation tool if you are logged into your Facebook account.</p>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h3>If during the Facebook Sharing Debugging process you receive an error regarding “Attempted Frozen Title Change” <a href="http://free-favicons.blogspot.com/2016/05/adding-facebook-comments-plugin-and.html#frozen-title">you can read about that</a> here. It is a common occurrence for blogs that have newly added facebook-specific crawler metatags. In my case, the warning came up saying that I was attempting to change a title, to the title they already, previously had in the database. So this “error” is something that can not be prevented or fixed. Now that correct metatags are in the blog, going forward, the correct title and specified URL should be available to Facebook's crawler.</h3>
<p>If your code worked and you would like to add custom styles around the Facebook Comment Plugin, there's helpful CSS tags at this page too, <a href="http://free-favicons.blogspot.com/2016/05/adding-facebook-comments-plugin-and.html">with instructions</a> and it also includes a full list of all the web pages, blogs, and other resources which I visited when researching how to get the Facebook Commenting Plugin installed properly to pass the Facebook Sharing Debugger test. There are many helpful resources listed with links.</p>
<p>If this page has been helpful please leave a comment and let everyone know. If you run on other problems, you can leave a comment, and if I can help, I will. Or perhaps, another visitor can offer helpful advice. Thanks again for visiting!</p>Unknownnoreply@blogger.com5tag:blogger.com,1999:blog-8613894086578214263.post-54036547285806606472016-05-13T23:53:00.000-07:002016-05-16T16:01:42.023-07:00Adding Facebook Comments Plugin and Customized Blogger Commenting Code<p>If following these instructions, and still running into difficulty, please consult my <a href="http://free-favicons.blogspot.com/2016/05/step-by-step-instruction-to-install.html">“Step by Step Instruction to Install Facebook Comment Plugin into Blogspot Templates”</a> which includes screen shots of each individual step in the process, from beginning to end, and elaborates on the precise code and how it should look at each phase.</p>
<p>1. It is necessary to have these tags in the HTML header:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="10">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
</textarea></div>
<h3>OR</h3>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="10">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
</textarea></div>
<p>2. Okay, it's just noteworthy, that on the Blogger Template, I am up to this segment in the CSS headers:</p>
<pre>/* Posts
----------------------------------------------- */
h3.post-title {
margin-top: 20px;
}</pre>
<p>This is a piece of customized CSS. It was set up for a decorative gradient border, but as seen, border is now set to “0”</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
#comments {
font-size:14px;
margin-bottom: 0em;
margin-left:auto;
margin-right:auto;
background: #000000;
border: 0px solid transparent; border-spacing:0px; -moz-border-image: -moz-linear-gradient(top, #5c5098 0%, #000000 100%); -webkit-border-image: -webkit-linear-gradient(top, #000000 0%, #5c5098 100%); border-image: linear-gradient(to bottom, #000000 0%, #5c5098 100%); border-image-slice: 1;
border-spacing: 0px;
padding: 0px;
width:620px;
color: #cccccc;
}
</textarea></div>
<p>3. This is now the segment of the Template that reads:</p>
<pre>/* Comments
----------------------------------------------- */
#comments a {
color: #cccccc;
}</pre>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
.comments .comments-content .comment-content {
background: #000000 url(//edwardtbabinski.us/related-content/hy-gradient-comments.png) repeat;
font-size: 16px;
line-height: 1;
height:125px;
overflow:auto;
overflow-x:hidden;
margin-right:auto;
margin-left:auto;
border:1px #c790ff solid; -moz-border-image: -moz-linear-gradient(top, #18172a 0%, #a060c3 100%); -webkit-border-image: -webkit-linear-gradient(top, #18172a 0%, #a060c3 100%); border-image: linear-gradient(to bottom, #18172a 0%, #a060c3 100%); border-image-slice: 1;
border-spacing: 0px;
padding: 5px;
color: #cccccc;
}
.comments .comments-content .loadmore a {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.comments .comment-thread.inline-thread {
background: #000000;
}
.comments .continue {
border-top: 0px solid #000000;
}
</textarea></div>
<p>4. Now at the section that reads:</p>
<pre>/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}</pre>
<p>Here's the Customized Section for Facebook Commenting Plugin. Sorry, there's only a choice between "Dark" and "Light". For the time being, there's no way to modify or customized font color, size, et cetera. Not that I found.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="15">
.fb_iframe_widget {
position: relative;
padding:10px;
background: #000000;
font-size: 16px;
line-height: 1;
height:350px;
width:620px;
overflow:auto;
overflow-x:hidden;
margin:auto;
padding: 5px;
color: #cccccc;
a:link: #cccccc;
border: 1px solid transparent; border-spacing:0px; -moz-border-image: -moz-linear-gradient(top, #000000 0%, #5c5098 100%); -webkit-border-image: -webkit-linear-gradient(top, #5c5098 0%, #000000 100%); border-image: linear-gradient(to bottom, #5c5098 0%, #000000 100%); border-image-slice: 1;
}
/* Mobile
----------------------------------------------- */
</textarea></div>
<p>It is optional to remove, “display: inline-block;”. I have done so on this blog.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
.fb_iframe_widget {
position: relative;
padding:0px;
background: #000000;
height:350px;
margin-right:auto;
margin-left:auto;
width: 100%;
overflow:auto;
overflow-x:hidden;
color: #cccccc;
a:link: #cccccc;
border: 1px solid transparent; border-spacing:0px; -moz-border-image: -moz-linear-gradient(top, #000000 0%, #5c5098 100%); -webkit-border-image: -webkit-linear-gradient(top, #5c5098 0%, #000000 100%); border-image: linear-gradient(to bottom, #5c5098 0%, #000000 100%); border-image-slice: 1;
}
/* Mobile
----------------------------------------------- */
</textarea></div>
<p>5. Now, I am directly <u>above</u> the closing </head> tag.<br />
These are the tags in my template, exactly as they appear and the order arranged.</p>
<p>The first section is CSS to style the comment editor (within the blog).<br />
The second is a Javascript required for our emoticon commenting system (within the blog).<br />
The third section are necessary meta tags for the Facebook commenting and Moderation Tools... <b>IF</b> for a related Facebook page (i.e., my friend Ed now has a Facebook page called ‘Scrivenings’ which is meant to work with his blog ‘Scrivenings’. Unless I create an ‘Icons’ Facebook page, its highly unlikely I'll need all these tags. I have left them off this blog template.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<style type='text/css'>
#comment-editor {
background: #000000 url(//edwardtbabinski.us/related-content/h-gradient-editor.png);
color: #cccccc;
border: 0px #000000 solid;
border-spacing:0px;
box-shadow: 0 10px 10px -10px #000000 inset;
padding: 0px;
padding-top:0px;
margin-top:0em;
margin-left:7px;
margin-right:0em;
width: 606px;
height: 275px !important;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='YOUR 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='http://www.an-image-url.com/200x200pixel-default-image.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 ID Number' property='fb:app_id'/>
<meta content='THE ID OR NAME I USE ON FACEBOOK' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='DESCRIPTION OF BLOG.' property='og:description'/>
</head>
</textarea></div>
<p>6. This is memorable. When attempting to install the Facebook code as issued, a Parsing error continued to occur. That's because the & must be changed to “&amp;”.</p>
<p>Replace the appID with your own.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<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&amp;version=v2.6&amp;appId=773655422771471";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</textarea></div>
<p>7. Search for this piece of code.</p>
<p style="background-color:white; color:#000000; padding:5px"><div class='post-footer-line post-footer-line-3'><br />
<span class='post-location'></p>
<p>Below this line, the Facebook Comments Plugin is pasted into the template.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<!-- Facebook comment box -->
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540'/></div></div>
</b:if>
<!-- Facebook comment box -->
</textarea></div>
<p>8. This code applies to our blogs, with the Emoticon commenting and follows above the </body> tag.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<!-- BEGIN COMMENT-EMOTICON SCRIPT -->
<style type='text/css'>.emoWrap{position:relative;padding:0px;width:602px;padding-bottom:0px;margin-right:0em;margin-left:7px;margin-bottom:0px;background:#000000 url(//edwardtbabinski.us/related-content/bw-gradient-editor.png) repeat; border:2px #c790ff solid; -moz-border-image: -moz-linear-gradient(top, #18172a 0%, #a060c3 100%); -webkit-border-image: -webkit-linear-gradient(top, #18172a 0%, #a060c3 100%); border-image: linear-gradient(to bottom, #18172a 0%, #a060c3 100%); border-image-slice: 1;}.emoWrap:after{content:"";position:absolute;padding-bottom:0px}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"",
bottomText:"",
emoMessage:"",
middleText:""
})
});
//]]></script>
<script src='http://www.edwardtbabinski.us/related-content/vu/vu.js' type='text/javascript'/>
<!-- END COMMENT-EMOTICON SCRIPT -->
</body>
</textarea></div>
<p>9. If you continue receiving OG Errors with Comments, I recommend checking this: <a href="https://developers.facebook.com/tools/debug/sharing/" target="_blank">Facebook Sharing Debugger</a>.</p>
<p>The errors ceased when I installed the following code above the </head> tag. (You will need a 200x200pixel image link for your site thumbnail to place in the meta tags.) These online resources are where my solution was derived :</p>
<ul>
<li><a href="http://www.mybloggerlab.com/2013/05/how-to-add-facebook-open-graph-meta-data-in-blogger.html" target="_blank">How to Add Facebook Open Graph Meta Data in Blogger</a></li>
<li><a href="https://moz.com/blog/meta-data-templates-123" target="_blank">Must-Have Social Meta Tags for Twitter, Google+, Facebook and More</a></li>
<li><a href="http://webmaster-tips.davidherron.com/seo/implement-metatags.html" target="_blank">Implementing metatags on Blogger, Drupal, etc</a></li>
<li>It could be syntax: <a href="http://stackoverflow.com/questions/10656337/how-do-i-fix-a-parser-mismatched-metadata-error-from-the-facebook-open-graph-d" target="_blank">How do I fix a “Parser Mismatched Metadata” error from the Facebook Open Graph debug tool?</a></li>
<li>And also this site <a href="https://translate.google.com/translate?hl=en&sl=zh-TW&u=http://www.wfublog.com/2016/03/blogger-fb-share-thumbnail-duplicate-og-url.html&prev=search" target="_blank">translated from Chinese to English which tipped me on to EDITING the metatags</a>. A necessary line was ommitted from the meta tags, and now both the Canonical URL and other URL's on the site work on Facebook Sharing Debugger.</li>
</ul>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='44 Complete Lectures by Robert G. Ingersoll' 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='http://www.edwardtbabinski.us/scrivenings-thumb.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='773655422771471' property='fb:app_id'/>
<meta content='spirituality.seeker.7' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='Lectures by the 19th Century orator, Robert G. Ingersoll.' property='og:description'/>
</head>
</textarea></div>
<p>As a sidenote, on the <a href="https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fetb-visual-evolution.blogspot.com%2F" target="_blank">Facebook Sharing Debugger</a>, There are no more “More than one og url specified” or “Parser Mismatched Metadata” error being generated by the Facebook crawler. When the errors finally ceased, “the following Open Graph properties metatags were generated, based on the raw tags”:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<meta content="width=1100" name="viewport" />
<meta content="blogger" name="generator" />
<meta content="http://lectures-by-ingersoll.blogspot.com/2012/04/great-infidels_10.html" property="og:url" />
<meta content="The Great Infidels" property="og:title" />
<meta content="44 Complete Lectures by Robert G. Ingersoll ©1924" property="og:site_name" />
<meta content="http://www.edwardtbabinski.us/scrivenings-thumb.png" property="og:image" />
<meta content="773655422771471" property="fb:app_id" />
<meta content="spirituality.seeker.7" property="fb:admins" />
<meta content="Author" property="og:type" />
<meta content="Lectures by the 19th Century orator, Robert G. Ingersoll." property="og:description" />
</textarea></div>
<h1 id="frozen-title"><h3><b style="color:#ffcc33">Warning!</b> Now that the Facebook Meta tags are corrected, and the blog's canonical URL and URL's for posts on the blog are ran through Facebook's Sharing Debugger, I received this warning:</h3></h1>
<blockquote>
<p>STACKOVERFLOW EXCHANGE / TECH ADVICE</p>
<p><a href="http://stackoverflow.com/questions/25957642/attempted-frozen-title-change-any-fb-developers" target="_blank">“Attempted Frozen Title Change: Any FB developers?”</a></p>
<p>“I managed to talk to a FB developer about this. Is seems that its a protective measure to stop click baiting, fake links and so on. His advice was make sure you upload the file as you want to see it when it goes live - ie. Don't use 'video 4.. final version' or some similar 'temporary' title because as soon as people start to view click or comment it becomes locked.</p>
<p>The engineer I spoke to was kind enough to unfreeze the video so all was well in the end, but looking at the comments of others who have had the same problem I was pretty lucky as it was a long standing Youtube account with 100,000's views and hundreds of links pointing to it meaning they were comfortable that I wasn't 'trying it on'.</p>
<p>So the bottom line is: if you want to upload a video and share it with your Facebook account, make sure the you have set the titles, tags and any metadata on the video immediately and before you paste to, or, share on youtube or there is a strong possibility that even though you can update that info on Youtube, Facebook won't recognise the changes and instead use the information it has in its database when the video was first scraped."</p>
<p>Evidently it only applies to posts that include images.<br />
Post that has no images presented no problems in the scan."</p>
</blockquote>
<p>In the case of the first blog corrected from among blogs I manage, the message seems only to apply to posts containing image files.</p>
<p>Posts without images, thus far have presented no problem.</p>
<p>I tried a post with an image ... and a Warning came up:</p>
<h3>Warnings That Should Be Fixed</h3>
<h5>Attempted Frozen Title Change<br />
“It appears that you are trying to change the property og:title from “POST TITLE HERE” to “POST TITLE HERE”. If so, you are not allowed to for this object because too many actions have been published against it.</h5>
<p>Oh well, perhaps in the future, after the Facebook bot scrapes the site multiple times, perhaps the information will eventually be updated. (<em>Although, the error I received merely showed an attempt to change the title to the title they'd <u>already obtained</u> and submitted to the database, during an earlier scrape, anyway.</em>)</p>
<h3>Some References</h3>
<p>These are ALL THE PAGES I browsed through before succeeding to install facebook comment plugin, where it works on both pages with blogger comments as well as without blogger comments. If not placed correctly, the Facebook plugin will disappear when Blogger Comments are made.</p>
<ul>
<li><a href="https://developers.facebook.com/docs/plugins/comments" target="_blank">Embedded Commenting Plugin</a></li>
<li><a href="http://www.problogtricks.com/34/new-facebook-comment-box-for-blogger-with-notifications.html#add-facebook-comment-box-to-blogger" target="_blank">Add Facebook comment box to Blogger</a>
<p>Mentions the need to add xmlns:fb='http://www.facebook.com/2008/fbml' to head tag</p></li>
<li><a href="http://www.myblogpromo.com/2014/01/how-to-add-facebook-comments-system-in-blogger.html/" target="_blank">How to Add Facebook Comments System in Blogger</a>
<p>Mentions disadvantages. Comments are not indexed by Google and other search engines.</p>
<p>Shows instructions in how to set up your website for Facebook comment plugin (or, it is called an “App”.</p></li>
<li><a href="http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html" target="_blank">Add Facebook Comments Box To Blogger Blogs</a></li>
<li>A useful bit of information if you happened to come across this error like I did: <a href="https://wordpress.org/support/topic/plugin-wp-facebook-open-graph-protocol-more-than-one-og-url-specified" target="_blank">Facebook Open Graph protocol, [resolved] More Than One OG URL Specified:</a> (30 posts)</li>
<li>Or this annoying “Parsing Error” <a href="http://stackoverflow.com/questions/24070067/error-parsing-xml-the-reference-to-entity-version-must-end-with-the-deli" target="_blank">Error parsing XML : The reference to entity “version” must end with the ';' delimiter</a>... which is fixed very simply by changing the Ampersands or & to &amp;</li>
<li><a href="http://code.tutsplus.com/articles/the-ultimate-guide-to-implementing-facebook-comments-on-your-blog--wp-23855" target="_blank">The Ultimate Guide to Implementing Facebook Comments on your Blog</a>
<p>Provides tutorial in PHP.</p></li>
<li><a href="http://www.mybloggertricks.com/2012/03/show-facebook-comments-inside-tabs-in.html" target="_blank">Show Facebook Comments Inside Tabs in Blogger - Part 1</a>
<p>CSS for Facebook Commenting:</p>
<p style="background-color:white; color:#000000; padding:5px">Search for ]]></b:skin> and just above it paste the following CSS code,</p>
<p>EXAMPLE:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
/*--- Tabbed Facebook Comments By MBT ----*/
.comments-page { background-color: #f2f2f2; width:450px;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
</textarea></div></li>
<li><a href="http://www.bloggerbuster.com/2008/06/how-to-add-comment-form-beneath-your.html" target="_blank">How to add a comment form beneath your blog posts</a></li>
<li>Dated 2014: <a href="http://allblogsolution.blogspot.com/2014/02/how-to-add-latest-facebook-comment-box.html" target="_blank">How to add Latest Facebook Comment Box in Blogspots or Blogger</a>
<p>Useful information on the <head> tag</li>
<li><a href="http://stackoverflow.com/questions/8235687/open-graph-namespace-declaration-html-with-xmlns-or-head-prefix" target="_blank">More information on “Open Graph namespaces”</a> in case you run into an error with it as I did.</li>
<li><a href="http://www.codiblog.com/2015/05/new-blogger-facebook-comment-box.html" target="_blank">How to Add New Responsive Facebook Comment Box to Blogger</a> (and Google Commenting too).</li>
<li><a href="http://www.problogtricks.com/34/new-facebook-comment-box-for-blogger-with-notifications.html" target="_blank">Rundown of Installation and Creation of Facebook Comments Plug-in</a></li>
<li>This is actually the site resource I finally came across which explained about the Ampersand and beware the ‘&’ creating a Parsing Error: <a href="http://techubber.blogspot.com/2016/03/how-to-add-facebook-comments-box-on-blogger-blog-site.html" target="_blank">How to add Facebook Comments box on your Blogger blog site?</a>
<pre>Edit the code by changing "&amp;"(ampersand)
highlighted in red below with "&amp;" highlighted in green
Before Edit: the culprit is the ampersand (&) before "version"
and "appId" in the line starting with js.src
After editing, Save the Template and the parsing error
should not appear again.</pre>
<p>Although I was able to finally get Facebook Comments plugin working on both pages with blogger comments and those without, I continued to search for further information, such as if the plugin could be modified with CSS. But I don't think it can. Still, more interesting coding stuff...</p></li>
<li><a href="http://stackoverflow.com/questions/22187961/responsive-facebook-comments-css-hack-broken" target="_blank">Responsive Facebook Comments CSS Hack Broken</a></li>
<li><a href="http://stackoverflow.com/questions/4136576/overriding-facebook-comments-css" target="_blank">Overriding facebook comments css</a></li>
<li><a href="https://gist.github.com/reactormade/8983766#file-responsive-facebook-comments-css" target="_blank">Responsive Facebook Comments box CSS</a></li>
</ul>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8613894086578214263.post-8926334206749510512016-05-13T22:01:00.002-07:002016-05-13T22:01:35.497-07:00Blogger Scrolling and Customized Comments<p>This CSS code belongs in the Template between <head> & </head></p>
<pre>/* Comments
----------------------------------------------- */
#comments a {
color: #cccccc;
}</pre>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
.comments .comments-content .comment-content {
background: #000000 url(//example.com/gradient.png) repeat;
font-size: 16px;
line-height: 1;
height:125px;
overflow:auto;
overflow-x:hidden;
margin-right:auto;
margin-left:auto;
border:1px #c790ff solid; -moz-border-image: -moz-linear-gradient(top, #18172a 0%, #a060c3 100%); -webkit-border-image: -webkit-linear-gradient(top, #18172a 0%, #a060c3 100%); border-image: linear-gradient(to bottom, #18172a 0%, #a060c3 100%); border-image-slice: 1;
border-spacing: 0px;
padding: 5px;
color: #cccccc;
}
</textarea></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-jUgUY6_WrDA/Vzawj7lho-I/AAAAAAAAA1E/YkwHNWEo2W8xtzhvsEuBcCwXgV70nNO4gCLcB/s1600/scrollable-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://4.bp.blogspot.com/-jUgUY6_WrDA/Vzawj7lho-I/AAAAAAAAA1E/YkwHNWEo2W8xtzhvsEuBcCwXgV70nNO4gCLcB/s1600/scrollable-comments.png" /></a></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8613894086578214263.post-24738407087735440452016-05-01T19:04:00.001-07:002016-05-06T10:39:53.147-07:00Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs<h3>TO ADD EMOJI TO YOUR BLOGSPOTS FOLLOW THESE INSTRUCTIONS</h3>
<ol>
<li><p><a href="#emoticons-01"/>Click to view Google Apis Javascript that is to be placed directly above “</head>”</a></p></li>
<li><p><a href="#emoticons-02"/>Install the Emoticon Javascript that is to be placed directly above “</body>” tag</a>.</p></li>
<li><p><a href="#emoticons-03"/>Make sure “Embedded Mode” is turned on and “SAVE” your template.</a></p></li>
</ol>
<h3><em>THAT'S IT!</em></h3>
<p>Well, for the most part…</p>
<p>There's a slight bug (if comments already exist on the page, the emoticon box floats to bottom of the page. You want them right above the comment box). That little bit in the template needs to be fixed. This Blogspot, <a href="http://eutectics.blogspot.com/2015/01/add-emoticons-smiley-in-blogger-comments.html" target="_blank">“Eutechtics”</a> takes care of giving a quick fix!</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
Try this, open your HTML editor and search for
document.getElementById(domId).insertBefore(replybox, null);
and replace it with this below one
document.getElementById(domId).insertBefore(replybox.parentNode, null);
Hope this helps.
</textarea></div>
<p>And if you want a little additional styling information then read on...</p>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>This is a highly modified version of the original script found at (<a href="http://allblogsolution.blogspot.com/2014/04/how-to-add-smileys-on-blogger.html" target="_blank">“How to Add Smileys on Blogger”</a> at allblogsolution.blogspot.com) and also including many other scripts from varied sources, and myself --to use on our own sites. Information on original sources for code and additional notes can be found at the older link, below:</p>
<ol>
<li><p>(Updated Page and New Code): <a href="http://free-favicons.blogspot.com/2016/05/blogspot-emojis-emoticons-and-special.html">“Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs”</a></p></li>
<li><p>(Oldest Page): <a href="http://free-favicons.blogspot.com/2016/04/commenting-on-blogger-with-emoji-almost.html">“Commenting on Blogger with "Emoji" ... Got it done!”</a></p></li>
</ol>
<h3>Fix the Comment Section to white background (#ffffff) and style the “Comment Editor” to match emoticon edges.</h3>
<p>This script goes right <u>above the closing </head></u> tag.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<style type='text/css'>
#comment-editor {
background: #537d3f url(//artscape.us/icons/green-gradient-editor.png);
color: #000000;
border: 0px #091708 solid;
border-spacing:0px;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
padding: 5px;
margin-left:0em;
margin-right:0em;
width: 98%;
height: 275px !important;
}
</style>
</textarea></div>
<p>The following code wholesale replaces the “/* Posts and /*Comments” section between <head></head> tags of template. Replace both sections with the following code. (Code may have to be tweaked if color codes are different from this blog template.)</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">/* Posts
----------------------------------------------- */
h3.post-title {
margin-top: 20px;
}
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
h3.post-title a:hover {
text-decoration: underline;
}
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
.post-body {
line-height: 1.4;
position: relative;
}
.post-header {
margin: 0 0 1em;
line-height: 1.6;
}
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
#blog-pager {
font-size: 140%;
}
#comments {
background: #ffffff;
border: 5px #091708 solid;
border-spacing:0px;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
padding: 10px;
color: #091708;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: #;537d3f;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
/* Comments
----------------------------------------------- */
#comments a {
color: #537d3f;
}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(post.title.text.color);
border-bottom: 1px solid $(post.title.text.color);
}
.comments .comment-thread.inline-thread {
background: #ffffff;
}
.comments .continue {
border-top: 0px solid $(post.title.text.color);
}</textarea></div>
<p> </p>
<h3>Add Emoticon Script Code (Part I of II) above </head> closing tag.</h3>
<p>The following Javascript is pasted directly <u>above the closing </head></u> tag.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="10">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
</textarea></div>
<p> </p>
<h3>Add Emoticon Script (Part II of II)</h3>
<p>This script is pasted <u>above the closing </body></u> tag.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<style type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#efefef;background-image:-ms-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-moz-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-o-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#fff),color-stop(1,#fff9f2));background-image:-webkit-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:linear-gradient(to left,#fff 0,#fff9f2 100%);border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);font-weight:normal;color:#333}.emoWrap:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ccc;border-right:20px solid transparent;width:0;height:0;line-height:0}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Add a space then click on emoticon to retrieve code.",
emoMessage:"More Emoticons coming soon..."
})
});
//]]></script><script src='http://www.edwardtbabinski.us/related-content/vu/vu.js' type='text/javascript'></script>
</textarea></div>
<p> </p>
<h3>Gradient Editor Background</h3>
<p>The “Gradient Editor” background image can be produced on Photoshop. I've uploaded a copy of the *.psd file to <a href="http://artscape.us/icons/gradient-editor.psd" target="_blank">this location</a>, 55k file size, (gradient-editor.psd).</p>
<p>You'll have to find out the darkest and lightest (HTML # equivalent) colors on your blog, and apply them to the gradient tool.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-q-Jtn75gW2M/Vyf5jwgF2vI/AAAAAAAAAzg/SrkPjmd3GFs0EUVZAmqZVcqrN6S5ayeBACLcB/s1600/editor-gradients.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-q-Jtn75gW2M/Vyf5jwgF2vI/AAAAAAAAAzg/SrkPjmd3GFs0EUVZAmqZVcqrN6S5ayeBACLcB/s1600/editor-gradients.png" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h3>Most Recent Updated Edits (5/3/2016)</h3>
<p>Here is the latest way that I have modified scripts/code on the blogger to color coordinate the blogger comments to our sites. This is from my friend Edward's blog(s) which contain a different, green, color scheme than this blog.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-bvCUT-BAawg/VyjqBBT479I/AAAAAAAAAz0/scZTjphdy1YUVWbMCckO9x-3kKhdL3JqQCLcB/s1600/emoticon-blogger-edited.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/-bvCUT-BAawg/VyjqBBT479I/AAAAAAAAAz0/scZTjphdy1YUVWbMCckO9x-3kKhdL3JqQCLcB/s1600/emoticon-blogger-edited.png" /></a></div>
<p>To achieve the "Gradient Border" I did some study, and came to this link: <a href="http://css3files.com/2015/03/09/creating-gradient-borders-using-css3/" target="_blank">Creating Gradient Borders Using CSS3</a>. The code that I used on our blog template was as follows:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
/* Posts
----------------------------------------------- */
h3.post-title {
margin-top: 20px;
}
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
h3.post-title a:hover {
text-decoration: underline;
}
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
.post-body {
line-height: 1.4;
position: relative;
}
.post-header {
margin: 0 0 1em;
line-height: 1.6;
}
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
#blog-pager {
font-size: 140%;
}
#comments {
margin: auto;
background: #8bb876;
border: 10px solid transparent;
border-spacing: 0px;
padding: 10px;
color: #091708;
-moz-border-image: -moz-linear-gradient(top, #537d3f 0%, #cccccc 100%);
-webkit-border-image: -webkit-linear-gradient(top, #537d3f 0%, #cccccc 100%);
border-image: linear-gradient(to bottom, #091708 0%, #537d3f 100%);
border-image-slice: 1;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: #;537d3f;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
</textarea>
</div>
<p> </p>
<h3>Editing the Emoticon Form</h3>
<p>This is the code (<b>See Earlier Notes</b>) that was pasted above the </body> tag in the template. I have <u>modified it again</u>.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<!-- BEGIN COMMENT-EMOTICON SCRIPT -->
<style type='text/css'>.emoWrap{position:relative;padding:5px;margin-bottom:7px;background:#8bb876;}.emoWrap:after{content:"";position:absolute;}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Add a space then click on emoticon to retrieve code.",
emoMessage:"More Emoticons coming soon..."
})
});
//]]></script>
<script src='http://www.edwardtbabinski.us/related-content/vu/vu.js' type='text/javascript'/>
<!-- END COMMENT-EMOTICON SCRIPT -->
</textarea>
</div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h2>Most Recent Updated Edits (5/4/2016)</h2>
<p>I have updated the script again, to where it is <u>more personal for our blogs</u>. Just a note: these edits will not take effect on this blog or other blogs that I manage, as long as text is included in these two fields and saved to the template.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
topText:"Add a space then click on emoticon to retrieve code.",
emoMessage:"More Emoticons coming soon...",
BY LEAVING BLANK, those message lines default to the customized message in the javascript source.
topText:"",
emoMessage:"",
</textarea></div>
<p>Hence, by leaving the quotations of the Text/Message lines empty, this screen shot shows what is preset in the source javascript to display... since other of our blogs do contain text in those fields, the template text will over-ride the default text message.</p>
<p>Therefore one main javascript source can be used, as long as messages within the blog template are customized to over-ride the javascript source default text/message lines.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-ihyvtm69dWo/VyrDXs2JqbI/AAAAAAAAA0I/O_aC68V58n0oPv--m2wBfRVcpUNiuPAbwCLcB/s1600/emoticons-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/-ihyvtm69dWo/VyrDXs2JqbI/AAAAAAAAA0I/O_aC68V58n0oPv--m2wBfRVcpUNiuPAbwCLcB/s1600/emoticons-blogspot.png" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h2>Most Recent Updated Edits (5/5/2016)</h2>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-fAWOL4IbTNY/Vyt0q0jkVvI/AAAAAAAAA0c/h0hWfwUWpMoELZSTS-k9MZe9yi_mZhp0QCLcB/s1600/emoticons-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-fAWOL4IbTNY/Vyt0q0jkVvI/AAAAAAAAA0c/h0hWfwUWpMoELZSTS-k9MZe9yi_mZhp0QCLcB/s1600/emoticons-blogspot.png" /></a></div>
<p>Here's the latest edits to the script. I like the script to be more personalized. To modify the text lines on other blogs, the following would be done...</p>
<p>The script source currently goes in the order as follows:</p>
<p>h=j.topText = the top text that says, "Thanks for visiting Ed's blog..."<br />
b=j.bottomText = "This script was modified for use on our personal sites..."<br />
a=j.emoMessage = "Type a space, then select emotion..."<br />
s=j.middleText = "Special characters line..."</p>
<p>I've modified the template several times, so the order may or may not be true to their name yet I may or may not want those particular statements to display on my blog...</p>
<p>So, for Ed's blog, all that is needed in the template are empty quotation marks. The following establishes the source' text lines are to be used and not over-ride the source javascript:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<!-- BEGIN COMMENT-EMOTICON SCRIPT -->
<style type='text/css'>.emoWrap{position:relative;padding:5px;margin-bottom:7px;background:#8bb876;}.emoWrap:after{content:"";position:absolute;}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"",
bottomText:"",
emoMessage:"",
middleText:""
})
});
//]]></script>
<script src='http://www.edwardtbabinski.us/related-content/vu/vu.js' type='text/javascript'/>
<!-- END COMMENT-EMOTICON SCRIPT -->
</textarea>
</div>
<p>I am content with the text lines as they are for the most part but on my blogs, which are not associated to Ed, I modify the Text line to where it is personalized to my blogs and not mention his name. Therefore, this is what I will do:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
<!-- BEGIN COMMENT-EMOTICON SCRIPT -->
<style type='text/css'>.emoWrap{position:relative;padding:5px;margin-bottom:7px;background:#8bb876;}.emoWrap:after{content:"";position:absolute;}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Thanks for visiting. Your feedback is appreciated.",
bottomText:"",
emoMessage:"",
middleText:""
})
});
//]]></script>
<script src='http://www.edwardtbabinski.us/related-content/vu/vu.js' type='text/javascript'/>
<!-- END COMMENT-EMOTICON SCRIPT -->
</textarea>
</div>
<p>I've made an edit to "topText" which will prevent Edward's name being mentioned. The other lines are okay with me as they are, and I am content with the order they are arranged so by leaving blank quotes... the default lines of the source javascript will display in the order I placed them.</p>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<h1>LAST and FINAL Edit Updates (5/6/2016)</h1>
<p>Note: <em>The color code combinations shown below, apply to *THIS* blog (blue) and not to the green blog.</em></p>
<h1 id="emoticons-01">Instruction #1</h1>
<p>To obtain a Comments template just like our's place both the following:</p>
<ol>
<li>“comment-editor” style tag code, &</li>
<li>Google Query Javascript</li>
</ol>
<p>above </head> tag in your blog template. <b>Be sure to place these pieces of cover above </head></b> and not below it.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="10">
<style type='text/css'>
#comment-editor {
background: #CFD1E8 url(//artscape.us/icons/gradient-editor.png);
color: #000000;
border: 0px #000818 solid;
border-spacing:0px;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 10px 10px -10px #CFD1E8 inset;
padding: 5px;
margin-left:0em;
margin-right:0em;
width: 98%;
height: 275px !important;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
</textarea></div>
<h1 id="emoticons-02">Instruction #2</h1>
<p>Place the following code above the </body> tag in your template.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="10">
<!-- BEGIN COMMENT-EMOTICON SCRIPT -->
<style type='text/css'>.emoWrap{position:relative;padding:5px;margin-bottom:7px;background:#CFD1E8;border:1px #000818 solid; -moz-border-image: -moz-linear-gradient(top, #000818 0%, #CFD1E8 100%); -webkit-border-image: -webkit-linear-gradient(top, #535dcd 0%, #CFD1E8 100%); border-image: linear-gradient(to bottom, #535dcd 0%, #CFD1E8 100%); border-image-slice: 1;}.emoWrap:after{content:"";position:absolute;}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Thanks for visiting. Your feedback is appreciated.",
bottomText:"",
emoMessage:"",
middleText:""
})
});
//]]></script>
<script src='http://www.edwardtbabinski.us/related-content/vu/vu.js' type='text/javascript'/>
<!-- END COMMENT-EMOTICON SCRIPT -->
</textarea></div>
<p>Also to be certain your threaded comments match the color of your comments background, be sure to search template for “.comment-thread.inline-thread” and edit your background color :</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="10">
.comments .comment-thread.inline-thread {
background: #CFD1E8;
}
</textarea></div>
<p>Use your HTML Editor to locate this line in the template. This prevents the emoticons vertical alignment from displaying improperly and fastens the emoticons above the comment editor.</p>
<p style="padding:5px; background-color:#ffffff; color:#000000"> document.getElementById(domId).insertBefore(replybox, null) </p>
<p>And replace it with this line:</p>
<p style="padding:5px; background-color:#ffffff; color:#000000"> document.getElementById(domId).insertBefore(replybox.parentNode, null)</p>
<p> </p>
<h1 id="emoticons-03">Instruction #3</h1>
<h3>Make Certain “Embedded” Mode is on for Posting</h3>
<img src="https://lh3.googleusercontent.com/-Q6XnpUGdXJE/Vya7UPXiYqI/AAAAAAAAAys/WRr22NmblqYQ5wiI1RgID8Tq7LY7DKyiwCCo/s800/blogger-posts-emoticons.png" style="border:0px; float:middle" alt="">
<hr style="height: 10px; dashed; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>I have embedded the code above on another blue blog. This is the result:</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-pS-j8C8uixA/VyzMFpcMfoI/AAAAAAAAA0w/yfI1zuXo1UU1PCAjXoItyvqo9qwEPFpHwCLcB/s1600/blogspot-emoticons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://4.bp.blogspot.com/-pS-j8C8uixA/VyzMFpcMfoI/AAAAAAAAA0w/yfI1zuXo1UU1PCAjXoItyvqo9qwEPFpHwCLcB/s1600/blogspot-emoticons.png" /></a></div>
<p>To obtain the solid pastel backgrounds and gradient border like our blogs, you will need to replace the Comments attributes.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="25">
/* Posts
----------------------------------------------- */
h3.post-title {
margin-top: 20px;
}
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
h3.post-title a:hover {
text-decoration: underline;
}
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
.post-body {
line-height: 1.4;
position: relative;
}
.post-header {
margin: 0 0 1em;
line-height: 1.6;
}
.post-footer {
margin: .5em 0;
line-height: 1.6;
}
#blog-pager {
font-size: 140%;
}
#comments {
margin: auto;
background: #CFD1E8;
border: 10px solid transparent;
border-spacing: 0px;
padding: 10px;
color: #000818;
-moz-border-image: -moz-linear-gradient(top, #000818 0%, #CFD1E8 100%);
-webkit-border-image: -webkit-linear-gradient(top, #535dcd 0%, #CFD1E8 100%);
border-image: linear-gradient(to bottom, #000818 0%, #535dcd 100%);
border-image-slice: 1;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: #;535dcd;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
/* Comments
----------------------------------------------- */
#comments a {
color: #535dcd;
}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(post.title.text.color);
border-bottom: 1px solid $(post.title.text.color);
}
.comments .comment-thread.inline-thread {
background: #CFD1E8;
}
.comments .continue {
border-top: 0px solid $(post.title.text.color);
}
</textarea>
</div>
<p>That should be it! For additional notes about editing, scroll through the additional editing information above.</p>Unknownnoreply@blogger.com12tag:blogger.com,1999:blog-8613894086578214263.post-79029381865803639362016-04-30T19:13:00.000-07:002016-05-03T21:43:22.507-07:00Commenting on Blogger with "Emoji" ... Got it done!<h3>TO ADD EMOJI TO YOUR BLOGSPOTS FOLLOW THESE INSTRUCTIONS</h3>
<ol>
<li><p><a href="http://free-favicons.blogspot.com/2016/05/blogspot-emojis-emoticons-and-special.html#emoticons-01"/>Click to view Google Apis Javascript that is to be placed directly above “</head>”</a></p></li>
<li><p><a href="http://free-favicons.blogspot.com/2016/05/blogspot-emojis-emoticons-and-special.html#emoticons-02"/>Install the Emoticon Javascript that is to be placed directly above “</body>” tag</a>.</p></li>
<li><p><a href="http://free-favicons.blogspot.com/2016/05/blogspot-emojis-emoticons-and-special.html#emoticons-03"/>Make sure “Embedded Mode” is turned on and “SAVE” your template.</a></p></li>
</ol>
<h3><em>THAT'S IT!</em></h3>
<p>But if you want a little additional styling information then read on...</p>
<h3>The final edits I will be using on my friend Ed's blog(s) :</h3>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-bvCUT-BAawg/VyjqBBT479I/AAAAAAAAAz4/3n7DY-Sib5YcxHXsFbwJDhqpnn8dA_y1gCKgB/s1600/emoticon-blogger-edited.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-bvCUT-BAawg/VyjqBBT479I/AAAAAAAAAz4/3n7DY-Sib5YcxHXsFbwJDhqpnn8dA_y1gCKgB/s1600/emoticon-blogger-edited.png" /></a></div>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<p>Final Version of <u>modified script</u> is located at “<a href="http://free-favicons.blogspot.com/2016/05/blogspot-emojis-emoticons-and-special.html">Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs</a>”).</p>
<ol>
<li><p>(Updated Page and New Code): <a href="http://free-favicons.blogspot.com/2016/05/blogspot-emojis-emoticons-and-special.html">”Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs”</a></p></li>
<li><p>(Oldest Page): <a href="http://free-favicons.blogspot.com/2016/04/commenting-on-blogger-with-emoji-almost.html">”Commenting on Blogger with "Emoji" ... Got it done!”</a></p></li>
</ol>
<h3>SUCCESS!</h3>
<p><em>Note</em>: <b>UPDATED</b> I did indeed add the commenting system to this blog…... Early on the following results were achieved while working on a friend's blog that I manage. To view the results… “Seeing Is Believing???” ... <a href="http://www.edward-t-babinski.blogspot.com/2016/03/pawn-sacrifice-how-bobby-fischer.html" target="_blank">http://www.edward-t-babinski.blogspot.com/2016/03/pawn-sacrifice-how-bobby-fischer.html</a> and check out one of the full posts. The commenting system should be available for review.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-boYD1gmN_NM/VyW2UbWpKhI/AAAAAAAAAyA/JPiLoyyNWrQhZgKrYLK-F4zVX4LwuJhSgCLcB/s1600/emoticons-success.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-boYD1gmN_NM/VyW2UbWpKhI/AAAAAAAAAyA/JPiLoyyNWrQhZgKrYLK-F4zVX4LwuJhSgCLcB/s1600/emoticons-success.jpg" /></a></div>
<p>After many hours... a couple of days... hitting on dead ends on the web, and experimentation with Blogger's template, I now have Emoticons and my own unique tweaks to the script.</p>
<p>First, the source for the awesome scripting belongs to these two sources:</p>
<ol>
<li><p><a href="http://allblogsolution.blogspot.com/2014/04/how-to-add-smileys-on-blogger.html" target="_blank">“How to Add Smileys on Blogger”</a>, allblogsolution.blogspot.com</p>
<p>Not much effort was required on my part.</p>
<p>A single line of script is placed <em><u>above the </head> tag</u></em>:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="5">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
</textarea></div>
<p>… then “copy and paste” script below … <em><u>above the </body> tag</u></em> and it was done.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="15"> <b:if cond='data:blog.pageType == "item"'><style type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#efefef;background-image:-ms-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-moz-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-o-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#fff),color-stop(1,#fff9f2));background-image:-webkit-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:linear-gradient(to left,#fff 0,#fff9f2 100%);border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);font-weight:normal;color:#333}.emoWrap:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ccc;border-right:20px solid transparent;width:0;height:0;line-height:0}</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]></script><script src='http://googledrive.com/host/0B-GuAkK2nj5gbVg2dXladnUzbVU' type='text/javascript'/></b:if></textarea>
</div>
<p>Awesome deal.</p>
<p>I had attempted other methods, via “free script” sites over the past couple days, and was left with the impression everything out there is a scam. But after failing at my attempted methods (see below), I decided I'd give it one more shot to try the web again, for an <u>honest</u> script source.</p>
<p>This script worked unbelievably well, perfect for what I personally wanted to do: Add HTML “Special Characters” and make them large enough to view in a legible manner. (<em>See below for my account from earlier tonight of trying (mostly unsuccessfully) to manipulate the Blogger template to insert HTMLicons</em>) … specifically, to use HTML “Special Characters” … placing them <u>directly above the comment section</u> so visitors can “Copy and Paste” inside their comment just like they would an emoticon.</p>
<p>This script took care of that matter as well.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-GhSm6YTZX94/VyXIFZl3ggI/AAAAAAAAAyU/7qw0W7ViWVwkGCKTkJfb32sgscWmXK0RgCLcB/s1600/blogspot-emoticons-tweak.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://4.bp.blogspot.com/-GhSm6YTZX94/VyXIFZl3ggI/AAAAAAAAAyU/7qw0W7ViWVwkGCKTkJfb32sgscWmXK0RgCLcB/s1600/blogspot-emoticons-tweak.jpg" /></a></div>
<p>I modified the handy text lines that the author of the Script included!</p>
<p>Here's my modified code that goes directly above the “</body>” tag:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="15"> &lt;b:if cond='data:blog.pageType == &quot;item&quot;'&gt;&lt;style type='text/css'&gt;.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#efefef;background-image:-ms-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-moz-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-o-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#fff),color-stop(1,#fff9f2));background-image:-webkit-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:linear-gradient(to left,#fff 0,#fff9f2 100%);border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);font-weight:normal;color:#333}.emoWrap:after{content:&quot;&quot;;position:absolute;bottom:-10px;left:10px;border-top:10px solid #ccc;border-right:20px solid transparent;width:0;height:0;line-height:0}&lt;/style&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Add a space then click on emoticon to retrieve code.",
emoMessage:"&#9731; &#9732; &#9733; &#9734; &#9735; &#9736; &#9737; &#9738; &#9739; &#9740; &#9741; &#9742; &#9743; &#9744; &#9745; &#9746; &#9747; &#9748; &#9749; &#9750; &#9751; &#9752; &#9753; &#9754; &#9755; &#9756; &#9757; &#9758; &#9759; &#9760; &#9761; &#9762; &#9763; &#9764; &#9765; &#9766; &#9767; &#9768; &#9769; &#9770; &#9771; &#9772; &#9773; &#9774; &#9775; &#9776; &#9777; &#9778; &#9779; &#9780; &#9781; &#9782; &#9783; &#9784; &#9785; &#9786; &#9787; &#9788; &#9789; &#9790; &#9791; &#9792; &#9793; &#9794; &#9795; &#9796; &#9797; &#9798; &#9799; &#9800; &#9801; &#9802; &#9803; &#9804; &#9805; &#9806; &#9807; &#9808; &#9809; &#9810; &#9811; &#9812; &#9813; &#9814; &#9815; &#9816; &#9817; &#9818; &#9819; &#9820; &#9821; &#9822; &#9823; &#9824; &#9825; &#9826; &#9827; &#9828; &#9829; &#9830; &#9831; &#9832; &#9833; &#9834; &#9835; &#9836; &#9837; &#9838; &#9839; &#9840; &#9841; &#9842; &#9843; &#9844; &#9845; &#9846; &#9847; &#9848; &#9849; &#9850; &#9851; &#9852; &#9853; &#9854; &#9855; &#9856; &#9857; &#9858; &#9859; &#9860; &#9861; &#9862; &#9863; &#9864; &#9865; &#9866; &#9867; &#9868; &#9869; &#9870; &#9871; &#9872; &#9873; &#9874; &#9875; &#9876; &#9877; &#9878; &#9879; &#9880; &#9881; &#9882; &#9883; &#9884; &#9885; &#9888; &#9889; &#9890; &#9891; &#9892; &#9893; &#9894; &#9895; &#9896; &#9897; &#9898; &#9899; &#9900; &#9901; &#9902; &#9903; &#9907; &#9908; &#9909; &#9910; &#9911; &#9912; &#9913; &#9914; &#9915; &#9916; &#9917; &#9918; &#9924; &#9925; &#9934; &#9940; &#9962; &#9970; &#9981; &#9985; &#9986; &#9987; &#9988; &#9989; &#9990; &#9991; &#9992; &#9993; &#9994; &#9995; &#9996; &#9997; &#9998; &#9999; &#10000; &#10001; &#10002; &#10003; &#10004; &#10005; &#10006; &#10007; &#10008; &#10009; &#10010; &#10011; &#10012; &#10013; &#10014; &#10015; &#10016; &#10017; &#10018; &#10019; &#10020; &#10021; &#10022; &#10023; &#10024; &#10025; &#10026; &#10027; &#10028; &#10029; &#10030; &#10031; &#10032; &#10033; &#10034; &#10035; &#10036; &#10037; &#10038; &#10039; &#10040; &#10041; &#10042; &#10043; &#10044; &#10045; &#10046; &#10047; &#10048; &#10049; &#10050; &#10051; &#10052; &#10053; &#10054; &#10055; &#10056; &#10057; &#10058; &#10059; &#10060; &#10061; &#10062; &#10063; &#10064; &#10065; &#10066; &#10067; &#10068; &#10069; &#10070; &#10071; &#10072; &#10073; &#10074; &#10075; &#10076; &#10077; &#10078; &#10081; &#10082; &#10083; &#10084; &#10085; &#10086; &#10087; &#10088; &#10089; &#10090; &#10091; &#10092; &#10093; &#10094; &#10095; &#10096; &#10097; &#10098; &#10099; &#10100; &#10101; &#10102; &#10103; &#10104; &#10105; &#10106; &#10107; &#10108; &#10109; &#10110; &#10111; &#10112; &#10113; &#10114; &#10115; &#10116; &#10117; &#10118; &#10119; &#10120; &#10121; &#10122; &#10123; &#10124; &#10125; &#10126; &#10127; &#10128; &#10129; &#10130; &#10131; &#10132; &#10133; &#10134; &#10135; &#10136; &#10137; &#10138; &#10139; &#10140; &#10141; &#10142; &#10143; &#10144; &#10145; &#10146; &#10147; &#10148; &#10149; &#10150; &#10151; &#10152; &#10153; &#10154; &#10155; &#10156; &#10157; &#10158; &#10159; &#10160; &#10161; &#10162; &#10163; &#10164; &#10165; &#10166; &#10167; &#10168; &#10169; &#10170; &#10171; &#10172; &#10173; &#10174; &#10175; &#8592; &#8593; &#8594; &#8595; &#8596; &#8597; &#8598; &#8599; &#8600; &#8601; &#8602; &#8603; &#8604; &#8605; &#8606; &#8607; &#8608; &#8609; &#8610; &#8611; &#8612; &#8613; &#8614; &#8615; &#8616; &#8617; &#8618; &#8619; &#8620; &#8621; &#8622; &#8623; &#8624; &#8625; &#8626; &#8627; &#8628; &#8629; &#8630; &#8631; &#8632; &#8633; &#8634; &#8635; &#8636; &#8637; &#8638; &#8639; &#8640; &#8641; &#8642; &#8643; &#8644; &#8645; &#8646; &#8647; &#8648; &#8649; &#8650; &#8651; &#8652; &#8653; &#8654; &#8655; &#8656; &#8657; &#8658; &#8659; &#8660; &#8661; &#8662; &#8663; &#8664; &#8665; &#8666; &#8667; &#8668; &#8669; &#8670; &#8671; &#8672; &#8673; &#8674; &#8675; &#8676; &#8677; &#8678; &#8679; &#8680; &#8681; &#8682; &#8683; &#8684; &#8685; &#8686; &#8687; &#8688; &#8689; &#8690; &#8691; &#8692; &#8693; &#8694; &#8695; &#8696; &#8697; &#8698; &#8699; &#8700; &#8701; &#8702; &#8703; &#8704; &#8705; &#8706; &#8707; &#8708; &#8709; &#8710; &#8711; &#8712; &#8713; &#8714; &#8715; &#8716; &#8717; &#8718; &#8719; &#8720; &#8721; &#8722; &#8723; &#8724; &#8725; &#8726; &#8727; &#9728; &#9729; &#9730;"
})
});
//]]&gt;&lt;/script&gt;&lt;script src='http://googledrive.com/host/0B-GuAkK2nj5gbVg2dXladnUzbVU' type='text/javascript'/&gt;&lt;/b:if&gt;</textarea></div>
<p>With further room for even more modifications.</p>
<p>The blog had a black background which wasn't the right fit for the emoticons, so that had to be changed on the template with some tweaking of the CSS and I found the solution for that at the following link:</p></li>
<li><p><a href="http://www.southernspeakers.net/2013/02/change-comment-text-color-and.html" target="_blank">Change Comment Text Color and Background in Blogger Dynamic View</a>, southernspeakers.net</p>
<p>However, even with the new CSS code to style the background to white, I had to go to the section which was previously there and mod the template. I still had to go in and remove some of the template code, for example,</p>
<pre>}#comments {
background: $(comments.background);
padding: 15px;
}</pre>
<h3><em>was changed to</em></h3>
<pre>}#comments {
background: #ffffff;
padding: 15px;
color: #000000;
}</pre>
</li>
</ol>
<hr style="width:100%; height:10px; border:0; box-shadow: 0 10px 10px -10px #8c8b8b inset;">
<hr style="width:100%; height:10px; border:0; box-shadow: 0 10px 10px -10px #8c8b8b inset;">
<hr style="width:100%; height:10px; border:0; box-shadow: 0 10px 10px -10px #8c8b8b inset;">
<h3><em>MEANWHILE... Earlier in the Evening</em></h3>
<p>Not exactly there... but close.</p>
<p>Since HTML allows special symbols these days... a lot of special characters, its nice to include a list to copy and paste into the form.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-CA8-Ke8zATs/VyVbTOfuTuI/AAAAAAAAAxI/qTjIwq-EJeoaOnFCxz3xeDIzCYndicjLQCLcB/s1600/blogger-commenting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-CA8-Ke8zATs/VyVbTOfuTuI/AAAAAAAAAxI/qTjIwq-EJeoaOnFCxz3xeDIzCYndicjLQCLcB/s1600/blogger-commenting.jpg" /></a></div>
<p>I haven't perfected the code yet.</p>
<p>There were NO COMMENTS and the iframe with the special characters displays fine. But once you post a comment, the iframe disappears. No more Special symbols iframe. It goes caput... to see it again, you have to open a new post that has no comments.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-bsZAMifC3Hw/VyVc6g2AKpI/AAAAAAAAAxU/wblHkhTDuF4w52qDKwwQTOP2_PVJOx60QCLcB/s1600/blogger-commenting-emojis.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-bsZAMifC3Hw/VyVc6g2AKpI/AAAAAAAAAxU/wblHkhTDuF4w52qDKwwQTOP2_PVJOx60QCLcB/s1600/blogger-commenting-emojis.jpg" /></a></div>
<p>I guess this is just the first hurdles of a work-around.</p>
<p>So, to get as far as I have, I will mention two modifications I applied to the Blogger Template.</p>
<p>The first bit of information I picked up was located at <a href="http://stackoverflow.com/questions/15532259/blogger-changing-style-for-comment-textarea" target="_blank">this link</a> “Changing style for comment textarea”:</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="15"><style type='text/css'>
#comment-editor {
background: #091708;
font-size: 18px;
color: #537d3f;
border: 1px #0E2B0E solid;
border-spacing:0px;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
padding: 5px;
width: 610px;
height: 275px !important;
}
</style></textarea></div>
<p><em></head></em></p>
<p>“<em>...add this just before closing the <head> tag.”</em></p>
<p>As shown, it certainly does “style” the comment textarea.</p>
<p>But I sought to change the section above which is a built in, plain-text "Comment Message" which is found in your blog's “Settings > Posts and comments.” Anything beyond simple HTML used to format plain text, i.e., <b> for bold </b> is not allowed.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-6AXcGgfzTQ8/VyViUevi7zI/AAAAAAAAAxs/NJ-5ZxPEMcwt6dMeI6lhckPnkqHZpITGQCLcB/s1600/comment-form.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/-6AXcGgfzTQ8/VyViUevi7zI/AAAAAAAAAxs/NJ-5ZxPEMcwt6dMeI6lhckPnkqHZpITGQCLcB/s1600/comment-form.jpg" /></a></div>
<p>So, if an iframe is added, it's possible to create all sorts of “unique modifications” ... but I quickly noticed that blogger was blocking / preventing any active content, i.e., the div allowing normal scrolling.</p>
<p>Here's the code for the iframe within the template. <u>And as anyone should know, <b>you save a copy of the original <i>before</i> doing any modifications</b></u>.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="15"><b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/></textarea></div>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="15"><iframe allowtransparency='true' class='separator' frameborder='0' id='set01' name='set' src='http://www.example.com/special-characters.html' style='display:margin-top:0em; margin-left:0em; margin-right:0em; height:200px; width:620px; overflow:hidden'/></textarea></div>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="15"><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable></textarea></div>
<p>Unfortunately, as discussed, after the first post is made, the frame with special characters disappears. For now I don't know why and would like a permanent method for posting emoticons/special symbols, without necessarily having to go to outside sources like Facebook or social media apps.</p>
<p>The Scrolling Issue was fixed by implementing an easy script for Marquee Scrolling at this <a href="http://www.quackit.com/css/codes/marquees/" target="_blank">Quackit tutorial</a>.</p>
<p>Blogger didn't allow the active content to occur in my iframe, but, it did at least... allow a scroll bar on the iframe.</p>
<p>Just for the record, for those who don't know, when you place an iframe into a site, modern HTML will display horizontal and vertical scroll bars on the frame which is a real nuisance. The code to solve this issue is by placing a tag within the style tags of your headers.</p>
<div style="border:1px #000000 solid; padding:5px; border-spacing:0px; float:middle; vertical-align:top; background-color:#ffffff; font-size:14px; color:#000000; width:625px"><textarea style="border:1px #000000 solid; font-size:14px; background-color:#ffffff; color:#000000" cols="75" rows="5"><style type="text/css">html {overflow:hidden} body {font-family: verdana; color:#000000; background-color: #cccccc} a {color: #888888; text-decoration:none} a:hover{font-weight:bold} a:visited {color:#888888}</style></textarea></div>
<p>By placing “html {overflow:hidden}” in the target html page (your small html file to be placed within the window), including that tag in its headers prevents scroll bars from appearing on the edges.</p>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-8613894086578214263.post-91198262359742215112016-03-12T09:45:00.000-08:002016-03-13T10:15:51.218-07:00HTML5 Compliant Toggle (Hide/Show) DIV<textarea style="font-size:12px; background-color:#535dcd; color:#cccccc" cols="90" rows="40">
<!doctype html>
<html lang="en-US">
<head>
<title>HTML 5 Compliant Toggle (Show/Hide) DIVs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="http://example.com/div-hide-show.html">
<meta content="div, collapse, hide, show" name=keywords>
<meta content="This is the html and javascript for items which can be toggled inside an iframe." name=description>
<meta content="index,follow" name=robots>
<style>html {overflow:hidden} body {scrollbar-arrow-color: #ffffff; font-family: verdana; scrollbar-darkshadow-color: #000000; scrollbar-base-color: #050f2d; background-color: #000000} a {color: #535dcd; text-decoration:none}</style>
<script>
function toggle(ids) {
var ele = document.getElementById(ids);
if (ele.style.display == "block") { ele.style.display = "none"; }
else { ele.style.display = "block"; }
}
</script>
</head>
<body style="font-size:11px; font-family:verdana; color:#1e275f;">
<!--[BEGIN/ REMOVE THIS CODE IF NO SCROLL IS DESIRED]-->
<div style="background:transparent; font-size:11px; line-height: 1; color: #cccccc; border: 0px #000000 solid; width:300px; height:100px; overflow:auto; overflow-x:hidden">
<!--[REMOVE THIS CODE IF NO SCROLL IS DESIRED /BEGIN]-->
<a id="displayText01" href="javascript:toggle('toggleText01');">SECTION 01</a>
<div id="toggleText01" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText02" href="javascript:toggle('toggleText02');">SECTION 02</a>
<div id="toggleText02" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText03" href="javascript:toggle('toggleText03');">SECTION 03</a>
<div id="toggleText03" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText04" href="javascript:toggle('toggleText04');">SECTION 04</a>
<div id="toggleText04" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText05" href="javascript:toggle('toggleText05');">SECTION 05</a>
<div id="toggleText05" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText06" href="javascript:toggle('toggleText06');">SECTION 06</a>
<div id="toggleText06" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText07" href="javascript:toggle('toggleText07');">SECTION 07</a>
<div id="toggleText07" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText08" href="javascript:toggle('toggleText08');">SECTION 08</a>
<div id="toggleText08" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<hr style="padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<a id="displayText09" href="javascript:toggle('toggleText09');">SECTION 09</a>
<div id="toggleText09" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>
<!--[END/ REMOVE THIS CODE IF NO SCROLL IS DESIRED]-->
</div>
<!--[REMOVE THIS CODE IF NO SCROLL IS DESIRED /END]-->
</body>
</html>
</textarea>
<p>Here is the HTML5 code for embedding the iframe on a page:</p>
<textarea style="font-size:12px; background-color:#535dcd; color:#cccccc" cols="90" rows="10">
<hr style="float:center; padding:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
<div class="separator" style="text-align: middle"><iframe src="http://example.com/div-hide-show.html" style="margin-bottom: 0em; margin-left: 5px; margin-right: 0em; height:110px; width:310px; border:0px;"></iframe></div>
<hr style="float:center; margin-top:0px; height: 10px; border: 0; box-shadow: 0 10px 10px -10px #535dcd inset;" />
</textarea>
<p>A working sample of this coding is incorporated on the right side of this blog.</p>
<p><b>html</b> {overflow:hidden} is included in the style tags, which prevents scrolling. However, a div tag was added to allow for the desired scrolling feature for "y" (vertical) and not "x" (horizontal), i.e., <em>overflow:auto; overflow-x:hidden</em>.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8613894086578214263.post-49725043452432062542016-02-26T11:27:00.002-08:002016-02-26T11:27:26.917-08:00Mobile Device Icon<p>Here is the little mobile friendly web site icon I designed for the websites I managed.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="http://artscape.us/icons/mobile-phone-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://artscape.us/icons/mobile-phone-icon.png" /></a></div>
<p>The Photoshop *.psd file is saved at (<a href="http://artscape.us/icons/mobile-phone-icon.psd" target="_blank">mobile-phone-icon.psd</a> 40 kilobytes)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8613894086578214263.post-90904304764908222242016-02-26T11:17:00.000-08:002016-02-26T11:18:53.224-08:00Quill Pen or Fountain Pen Icon / Logo from our websites<p>As mentioned in an earlier post, most of my work files were discarded in the process of creating them. However, I did locate the original (higher resolution logo) to the Encyclopedia/Dictionary website.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="http://artscape.us/icons/quill-pen-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://artscape.us/icons/quill-pen-logo.png" /></a></div>
<p>The *.psd is located at (<a href="http://artscape.us/icons/quill-pen-logo.psd" target="_blank">quill-pen-logo.psd</a> <i>1010 kb</i>)</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8613894086578214263.post-11550293225215071872016-02-26T10:03:00.002-08:002016-02-26T10:53:08.893-08:00Feather pen icon<p>I need to bring attention to my other blog which includes icons, scripts and other blog-related/site-related resources and is much older than this blog. (<a href="http://favicons.blogspot.com/" target="_blank">http://favicons.blogspot.com/</a>).</p>
<p>This blog I intend to include most only special art files (accompanied by the *.psd files used in their design), which are incorporated in the sites I manage. However, my other blog does contain some nice graphics for general use.</p>
<img src="http://artscape.us/icons/feather-pen2.png" style="float:absmiddle; border:0px">
<img src="http://artscape.us/icons/feather-pen.png" style="float:absmiddle; border:0px">
<p>The *.psd file is located at (<a href="http://artscape.us/icons/ink-well.psd" target="_blank">feather-pen.psd</a> <i>1247 kb</i>)
<p>On the <a href="http://edwardtbabinski.us/" target="_blank">edwardtbabinski.us</a> blog site the header was designed using the following files:</p>
<img src="http://artscape.us/icons/ink-well.png" style="float:absmiddle; border:0px">
<p>This file is located at (<a href="http://artscape.us/icons/ink-well.psd" target="_blank">ink-well.psd</a> <i>593 kilobytes</i>)</p>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8613894086578214263.post-72834435947382686392016-02-26T09:33:00.001-08:002016-02-26T09:33:03.284-08:00Feather Pen and Parchment Paper Icon<p>Unfortunately, I discarded many of the files that lead up to the design of this logo. Not all of them of course, and some may can be recovered if I search my computer and added later to this blog. But I have saved the logo itself in a distinct *.psd file, below, for use on our web sites.</p>
<img src="http://artscape.us/icons/feather-pen-paper.png" style="float:middle; border:0">
<p>The *.psd version is located at this link (<a href="http://artscape.us/icons/feather-pen-paper.psd" target="_blank">feather-pen-paper.psd</a> <i>187 kilobytes</i>).</p>
<p>If using any of our icons/images, please provide credits/link back. Thanks!</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8613894086578214263.post-89403587929287024172016-02-26T08:54:00.002-08:002016-02-26T08:54:42.809-08:00Paw Print Icon<p>I have worked on an icon for the Zoology Quest site. Here's some samples and the source files which can be used for alteration or general uses. Please provide link back if reproducing these icons. Thanks!</p>
<p>Here's one of the icons I chose to use for the <a href="http://zoology-quest.net" target="_blank">Zoology Quest</a> site.</p>
<img src="http://artscape.us/icons/pawprint-01.png" alt="Paw Print Icon" style="border:0px; float:middle">
<p>The original psd file is saved at this link (<a href="http://artscape.us/icons/pawprint.psd" target="_blank">pawprint.psd</a> <i>131 kb</i>) The file can be edited in Adobe Photoshop and the effects changed to suit personal preferences.</p>
<p>Here's a cool rainbow paw print:</p>
<img src="http://artscape.us/icons/pawprint-02.png" alt="Rainbow Paw Print" style="border:0px; float:middle">
<p>And another cool little paw print:</p>
<img src="http://artscape.us/icons/pawprint-03.png" alt="Rainbow Paw Print" style="border:0px; float:middle">
<p>And another more simple paw print design:</p>
<img src="http://artscape.us/icons/pawprint-04.png" alt="Rainbow Paw Print" style="border:0px; float:middle">
<p>Design possibilities are vast and can be customized in Adobe Photoshop.</p>
Unknownnoreply@blogger.com0