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.

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

Replace the appID with your own.

7. Search for this piece of code.

<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>

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.

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 :

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.

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)