Step by Step Instruction to Install Facebook Comment Plugin into Blogspot Templates

Step by Step Installation. For custom CSS see this earlier post with instructions.

1. Open Blog Template

Facebook Comment Plugin Install Instruction for Blogspots

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 CSE HTML Validator Lite (which is free).

3. Paste Template into HTML Validator.

4. Go to https://developers.facebook.com/apps/ and click on “Add A New App”

There are two routes on that page to “Add A New App”

Route 1

Route 2

5. Choose WWW.

6. Choose a name for your website “App” and click on “Create A New App ID”

7. Fill in information.

name for website 'app'
your email address
category
click to create new 'app'

OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN

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

<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>

<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>

</head>

<body expr:class='"loading" + data:blog.mobileClass'>

(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>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=YOUR-FACEBOOK-APP-ID-NUMBER";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar' visible='true'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>

8. developers.facebook.com will now create your App ID and Script.

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).

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR APP ID NUMBER GOES HERE',
      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>

9. It states, “You should insert it directly after the opening <body> tag on each page you want to load it:”

In the HTML Editor/Validator, locate this line :

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.

In other words, it should look something like this

</head>

<body expr:class='"loading" + data:blog.mobileClass'>

And you will insert the following App Identification code behind the <body tag.

10. Now paste the Facebook Javascript App ID code into the Template.

It should look something like this

</head>

<body expr:class='"loading" + data:blog.mobileClass'>

11. Since you have your “APP ID Number,” now, I want to begin inserting necessary codes throughout the blog.

FIRST, make certain your opening <html> tag is correct and includes the Open Graphic code.

You can use search tool on HTML Validator/Editor, to perform a Search for <html tag. Check template code and update as necessary.

Now that your html tag is updated, return again to body tag, by searching the HTML editor for <body expr:class='"loading" + data:blog.mobileClass'> and move on to next step of adding code.

12. Go ahead and paste in the Facebook Commenting Plugin code. Paste this code right below the APP ID Script provided by Facebook (from above).

You can use the scroll bar from left to right, and note the “YOUR APP ID NUMBER GOES HERE” 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.

<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=YOUR APP ID NUMBER GOES HERE";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

In other words, it should look something like this

</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&version=v2.6&appId=YOUR-FACEBOOK-APP-ID-NUMBER";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

13. Now, you have the Facebook Javascript “App ID Javascript” code, followed by the Facebook Commenting Plugin Code in the template.

Use your HTML Editor/Validator to perform a Search for this line of code:

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 Placement of the Facebook Commenting Plugin within the template.

In other words, your template should look something like this

<b:include data='post' name='postQuickEdit'/>
</span> </div>

<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
</div>
</b:includable>

OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN

SAMPLE OF WHAT YOUR BLOG TEMPLATE SHOULD LOOK LIKE WHEN COMPLETED

<b:include data='post' name='postQuickEdit'/>
</span> </div>

<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>

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.

<!-- 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 -->

In other words your code should look something like this

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.

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.

When you have completed edits, copy and paste the following facebook-specific meta tags directly above the closing </head> tag. You can find the <head> and </head> tags, by performing a search of the template with the HTML Editor/Validator.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='Title of your Blog' 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='URL of 200x200px default blog image' 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='YOUR APP ID NUMBER GOES HERE' property='fb:app_id'/>
<meta content='YOUR FACEBOOK USER NAME ID or NUMBER' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='GOOD, BRIEF DESCRIPTION OF YOUR BLOG' property='og:description'/>

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.)

In other words, your template should look something like this

<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>

<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>

</head>

<body expr:class='"loading" + data:blog.mobileClass'>

*Note again: DO NOT USE " or ' ' or other syntax that will create parsing errors in the metatags. Use only plain alphabet characters.

Now, right click using mouse, and “SELECT ALL” and then right click on “COPY”.

This will copy the entire Blog Template to your computer clipboard.

17. Now that the template is copied on your computer clipboard, return to blogger template, and right click on “SELECT ALL” and “PASTE”.

18. Click on “SAVE TEMPLATE”

19. Now, your template is updated. Return to Facebook-Develop site and fill in the Web Site field. Click “NEXT”

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.

21. If you scroll down to bottom of screen, however, “FINISHED” appears. We have already installed the necessary codes to get up and running.

22. On the same page, the third option listed, “Social Plugins” is listed. Click on “Social Plugins”

23. The page will forward to: developers.facebook.com/docs/plugins/

Scroll down to “Comments Plugin” and click on “Web”

24. The page will forward to: developers.facebook.com/docs/plugins/comments/

25. Scroll down to the “Comments Plugin Code Generator”

Fill in your blog URL, set the width of comment plugin and then Click “Get Code”

26. Pay attention to the YELLOW LINE.

27. Click on the “Public Mode can be enabled in the App Dashboard.”

28. developers.facebook.com/apps/YOUR APP ID # HERE/review-status/ will open. Click on “YES” to enable public access, and “CONFIRM”

29. Now, your Facebook Commenting Plugin is “Live” to the Public.

Facebook Sharing Debugger Process

30. To verify that your code is correct and installed properly, go to https://developers.facebook.com/tools/debug/sharing

31. Type your blog URL and then click on “DEBUG” on the right-hand side of the screen.

Be prepared for the crawler to list some error it previously found at an earlier date, in the database. See the date it has listed of the last crawl.

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: Click on “SCRAPE AGAIN”.

Try both URL's.

http://your-blog-site.blogspot.com/ and

http://your-blot-site.blogspot.com/2016/03/testing-any-page.html on the sharing debugger.

Both of my URL's came up error free for this demonstration.

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.

Your blog should include a “Moderation Tool” since your username and APP ID is defined in the facebook meta tags.

As of 5/16/2016: I just performed an install of the Commenting App on this blog. 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.

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.

If during the Facebook Sharing Debugging process you receive an error regarding “Attempted Frozen Title Change” you can read about that 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.

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, with instructions 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.

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!

Adding Facebook Comments Plugin and Customized Blogger Commenting Code

If following these instructions, and still running into difficulty, please consult my “Step by Step Instruction to Install Facebook Comment Plugin into Blogspot Templates” 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.

1. It is necessary to have these tags in the HTML header:

OR

2. Okay, it's just noteworthy, that on the Blogger Template, I am up to this segment in the CSS headers:

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
}

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”

3. This is now the segment of the Template that reads:

/* Comments
----------------------------------------------- */
#comments a {
color: #cccccc;
}

4. Now at the section that reads:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

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.

It is optional to remove, “display: inline-block;”. I have done so on this blog.

5. Now, I am directly above the closing </head> tag.
These are the tags in my template, exactly as they appear and the order arranged.

The first section is CSS to style the comment editor (within the blog).
The second is a Javascript required for our emoticon commenting system (within the blog).
The third section are necessary meta tags for the Facebook commenting and Moderation Tools... IF 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.

<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>

<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>

</head>

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 “&”.

Replace the appID with your own.

7. Search for this piece of code.

Below this line, the Facebook Comments Plugin is pasted into the template.

8. This code applies to our blogs, with the Emoticon commenting and follows above the </body> tag.

</body>

9. If you continue receiving OG Errors with Comments, I recommend checking this: Facebook Sharing Debugger.

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 :

How to Add Facebook Open Graph Meta Data in Blogger
Must-Have Social Meta Tags for Twitter, Google+, Facebook and More
Implementing metatags on Blogger, Drupal, etc
It could be syntax: How do I fix a “Parser Mismatched Metadata” error from the Facebook Open Graph debug tool?
And also this site translated from Chinese to English which tipped me on to EDITING the metatags. 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.

As a sidenote, on the Facebook Sharing Debugger, 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”:

Warning! 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:

STACKOVERFLOW EXCHANGE / TECH ADVICE

“Attempted Frozen Title Change: Any FB developers?”

“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.

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'.

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."

Evidently it only applies to posts that include images.
Post that has no images presented no problems in the scan."

In the case of the first blog corrected from among blogs I manage, the message seems only to apply to posts containing image files.

Posts without images, thus far have presented no problem.

I tried a post with an image ... and a Warning came up:

Warnings That Should Be Fixed

Attempted Frozen Title Change
“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.

Oh well, perhaps in the future, after the Facebook bot scrapes the site multiple times, perhaps the information will eventually be updated. (Although, the error I received merely showed an attempt to change the title to the title they'd already obtained and submitted to the database, during an earlier scrape, anyway.)

Some References

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.

Embedded Commenting Plugin
Add Facebook comment box to Blogger
Mentions the need to add xmlns:fb='http://www.facebook.com/2008/fbml' to head tag
How to Add Facebook Comments System in Blogger
Mentions disadvantages. Comments are not indexed by Google and other search engines.

Shows instructions in how to set up your website for Facebook comment plugin (or, it is called an “App”.
Add Facebook Comments Box To Blogger Blogs
A useful bit of information if you happened to come across this error like I did: Facebook Open Graph protocol, [resolved] More Than One OG URL Specified: (30 posts)
Or this annoying “Parsing Error” Error parsing XML : The reference to entity “version” must end with the ';' delimiter... which is fixed very simply by changing the Ampersands or & to &
The Ultimate Guide to Implementing Facebook Comments on your Blog
Provides tutorial in PHP.
Show Facebook Comments Inside Tabs in Blogger - Part 1
CSS for Facebook Commenting:

Search for ]]> and just above it paste the following CSS code,

EXAMPLE:

/*--- 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;}
How to add a comment form beneath your blog posts
Dated 2014: How to add Latest Facebook Comment Box in Blogspots or Blogger
Useful information on the <head> tag
More information on “Open Graph namespaces” in case you run into an error with it as I did.
How to Add New Responsive Facebook Comment Box to Blogger (and Google Commenting too).
Rundown of Installation and Creation of Facebook Comments Plug-in
This is actually the site resource I finally came across which explained about the Ampersand and beware the ‘&’ creating a Parsing Error: How to add Facebook Comments box on your Blogger blog site?
```
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.
```
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...
Responsive Facebook Comments CSS Hack Broken
Overriding facebook comments css
Responsive Facebook Comments box CSS

Blogger Scrolling and Customized Comments

This CSS code belongs in the Template between <head> & </head>

/* Comments
----------------------------------------------- */
#comments a {
color: #cccccc;
}

Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs

TO ADD EMOJI TO YOUR BLOGSPOTS FOLLOW THESE INSTRUCTIONS

Click to view Google Apis Javascript that is to be placed directly above “</head>”
Install the Emoticon Javascript that is to be placed directly above “</body>” tag.
Make sure “Embedded Mode” is turned on and “SAVE” your template.

THAT'S IT!

Well, for the most part…

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, “Eutechtics” takes care of giving a quick fix!

And if you want a little additional styling information then read on...

This is a highly modified version of the original script found at (“How to Add Smileys on Blogger” 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:

(Updated Page and New Code): “Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs”
(Oldest Page): “Commenting on Blogger with "Emoji" ... Got it done!”

Fix the Comment Section to white background (#ffffff) and style the “Comment Editor” to match emoticon edges.

This script goes right above the closing </head> tag.

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.)

/* 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);
}

Add Emoticon Script Code (Part I of II) above </head> closing tag.

The following Javascript is pasted directly above the closing </head> tag.

Add Emoticon Script (Part II of II)

This script is pasted above the closing </body> tag.

Gradient Editor Background

The “Gradient Editor” background image can be produced on Photoshop. I've uploaded a copy of the *.psd file to this location, 55k file size, (gradient-editor.psd).

You'll have to find out the darkest and lightest (HTML # equivalent) colors on your blog, and apply them to the gradient tool.

Most Recent Updated Edits (5/3/2016)

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.

To achieve the "Gradient Border" I did some study, and came to this link: Creating Gradient Borders Using CSS3. The code that I used on our blog template was as follows:

/* 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;
}

Editing the Emoticon Form

This is the code (See Earlier Notes) that was pasted above the </body> tag in the template. I have modified it again.

Most Recent Updated Edits (5/4/2016)

I have updated the script again, to where it is more personal for our blogs. 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.

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.

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.

Most Recent Updated Edits (5/5/2016)

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...

The script source currently goes in the order as follows:

h=j.topText = the top text that says, "Thanks for visiting Ed's blog..."
b=j.bottomText = "This script was modified for use on our personal sites..."
a=j.emoMessage = "Type a space, then select emotion..."
s=j.middleText = "Special characters line..."

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...

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:

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:

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.

LAST and FINAL Edit Updates (5/6/2016)

Note: The color code combinations shown below, apply to *THIS* blog (blue) and not to the green blog.

Instruction #1

To obtain a Comments template just like our's place both the following:

“comment-editor” style tag code, &
Google Query Javascript

above </head> tag in your blog template. Be sure to place these pieces of cover above </head> and not below it.

Instruction #2

Place the following code above the </body> tag in your template.

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 :

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.

document.getElementById(domId).insertBefore(replybox, null)

And replace it with this line:

document.getElementById(domId).insertBefore(replybox.parentNode, null)

Instruction #3

Make Certain “Embedded” Mode is on for Posting

I have embedded the code above on another blue blog. This is the result:

To obtain the solid pastel backgrounds and gradient border like our blogs, you will need to replace the Comments attributes.

/* 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);
}

That should be it! For additional notes about editing, scroll through the additional editing information above.

Step by Step Instruction to Install Facebook Comment Plugin into Blogspot Templates

OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN

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

In other words, it should look something like this

It should look something like this

In other words, it should look something like this

In other words, your template should look something like this

OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN

SAMPLE OF WHAT YOUR BLOG TEMPLATE SHOULD LOOK LIKE WHEN COMPLETED

In other words your code should look something like this

In other words, your template should look something like this

Facebook Sharing Debugger Process

Be prepared for the crawler to list some error it previously found at an earlier date, in the database. See the date it has listed of the last crawl.

Adding Facebook Comments Plugin and Customized Blogger Commenting Code

OR

Warning! 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:

Warnings That Should Be Fixed

Attempted Frozen Title Change “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.

Some References

Blogger Scrolling and Customized Comments

Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs

TO ADD EMOJI TO YOUR BLOGSPOTS FOLLOW THESE INSTRUCTIONS

THAT'S IT!

Fix the Comment Section to white background (#ffffff) and style the “Comment Editor” to match emoticon edges.

Add Emoticon Script Code (Part I of II) above </head> closing tag.

Add Emoticon Script (Part II of II)

Gradient Editor Background

Most Recent Updated Edits (5/3/2016)

Editing the Emoticon Form

Most Recent Updated Edits (5/4/2016)

Most Recent Updated Edits (5/5/2016)

LAST and FINAL Edit Updates (5/6/2016)

Instruction #1

Instruction #2

Instruction #3

Make Certain “Embedded” Mode is on for Posting

Attempted Frozen Title Change
“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.