How to add Google+ Comments to any website

Google+ Comments is a social wigdet from Google, which works similar to Facebook Comments Box or Disqus. For now, it is available only for blogs on the Blogger platform. But here is an unofficial way to embed Google+ Comments on any website or blog:

1. Edit your website and add this HTML:
   

   <script src="https://apis.google.com/js/plusone.js">
   </script>
   <g:comments
       href="[URL]"
       width="642"
       first_party_property="BLOGGER"
       view_type="FILTERED_POSTMOD">
   </g:comments>

   or a valid HTML5 version:
   

   <script src="https://apis.google.com/js/plusone.js">
   </script>
   <div class="g-comments"
       data-href="[URL]"
       data-width="642"
       data-first_party_property="BLOGGER"
       data-view_type="FILTERED_POSTMOD">
   </div>

2. If you want to insert a comments counter, add this HTML code instead of <g:comments>:
   

   <g:commentcount href="[URL]"></g:commentcount>

   or a valid HTML5 version instead of <div class="g-comments">:
   

   <div class="g-commentcount" data-href="[URL]"></div>

3. Replace [URL] with the URL of your web page and fit the width.
4. Link your web page to your Google+ profile.

If you prefer to load Google+ Comments dynamically, insert this HTML code:

<div id="comments"></div>
<script>
gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
</script>

Similarly with Google+ Comments Counter:

<div id="commentscounter"></div>
<script>
gapi.commentcount.render('commentscounter', {
    href: window.location
});
</script>

You can see it in action on the Google+ and Facebook Comments page.