Google indexes the content inside an iframe

Perhaps you already know if Google does not index the content inside an iframe, so the comments from Disqus or Facebook is not indexed.

But now Google has started indexing the content inside an iframe, I realized this today when I checked the HTMLy blog demo, Danlogs.

The blogs using Disqus comments, and it turns out all the comments on the blog indexed by Google. A certainly good news for Disqus users.

For Facebook comments, I have not yet figured out its already indexed or not, but it should also being indexed because it uses an iframe as well.

HTMLy: Databaseless Blogging Platform (Flat CMS)

There are times when we just want to write without having to think about site management, for example upgrading to the latest version (core and plugin), for this purpose I developed a blogging platform that does not use a database at all, so just write and write.

Although prioritizing simplicity and speed, but the platform also includes standard features available on a blog in general, for example:

  • Admin panel
  • Markdown editor with live preview
  • Categorization with tags (multi tags support)
  • Static pages Eg. for contact page
  • Meta canonical, description, and rich snippets for SEO
  • Pagination
  • Author page
  • Multi author support
  • Social links
  • Disqus Comments (optional)
  • Facebook Comments (optional)
  • Google Analytics
  • Built-in search
  • Related posts
  • Per post navigation (previous and next post)
  • Body class for easy theming
  • Breadcrumb
  • Archive page (by year, year-month, or year-month-day)
  • JSON API
  • OPML
  • RSS Feed
  • RSS 2.0 Importer (basic)
  • Sitemap.xml
  • Archive and tag cloud widget
  • SEO friendly URLs
  • Teaser thumbnail for images and Youtube videos
  • Responsive design
  • Lightbox
  • User role
  • Online backup

This platform is a kind of static web page (Flat CMS) in general but using markdown file to store all its posts. Creation date, category, and the URL is taken from the name of the file, example:

2013-12-25-12-56-40_general_url-of-the-post.md

Here's the explanation (separated by an underscore):

  • 2013-12-25-12-56-40 is the published date
  • general is the tag/category
  • url-of-the-post.md is forming the main url

So we only need to give the name of the file with above format and then upload them to a specified folder, in this case is inside content/author/blog folder for the blog post and content/static for static page.

For static pages I use the following format:

about.md

This means that about as the URL.

Why use a file name?

We believe if the performance will be faster by read the file name, filters it, then read the file content that are matched. Although this may change in the future.

What is the minimum requirements?

HTMLy only require PHP 5.3+, yes no database needed to run HTMLy.

So how do I get it?

You can download it on GitHub. Visit a real blog powered by HTMLy on Danlogs, or visit the official homepage at HTMLy.

Blogger JSON Feed API

Maybe sometimes we need a widget for certain features, but the widgets are not available. Blogger already provides an APIs to overcome this, so we can create our own widget by reading the blog feed using the JSON and JavaScript.

Here is the JSON feed API:

Object Description Example
json.feed.id.$t Show blog ID tag:blogger.com,1999:blog-12345
json.feed.updated.$t Last update of a blog 2013-07-08T18:21:57.051+07:00
json.feed.category[] Categories / label array of a blog
json.feed.category[i].term Show the i-th category Blogger
json.feed.title.$t Show blog name Danlogs
json.feed.subtitle.$t Show description of a blog Dan's Weblog
json.feed.author[] Array of blog authors Danang Probo Sayekti, Matt Cutts
json.feed.author[i].name.$t Show the i-th blog author name Danang Pobo Sayekti
json.feed.author[i].uri.$t Show the i-th profile author uri https://profiles.google.com/123456789
json.feed.openSearch$totalResults.$t Show total posts 777
json.feed.entry[] Posts array of a blog
json.feed.entry[i].id.$t Show the i-th post ID tag:blogger.com,1999:blog-8508.post-12345678
json.feed.entry[i].title.$t Show the i-th post title Blogger JSON Feed API
json.feed.entry[i].published.$t Show time published of the i-th post 2013-07-07T12:56:00.000+07:00
json.feed.entry[i].updated.$t Show when the i-th post is updated 2013-07-07T12:56:47.089+07:00
json.feed.entry[i].category[] Show array of post categories
json.feed.entry[i].category[x].term Show the x-th category of the i-th post Blogger API
json.feed.entry[i].summary.$t Show post summary Maybe sometimes we need a widget ...
json.feed.entry[i].content.$t Show post content Maybe sometimes we need a widget for certain features, but the widgets are not available ...
json.feed.entry[i].link[] Links array of a post
json.feed.entry[i].link[x].href Show the x-th link of the i-th post http://www.danpros.com/2013/08/blogger-api.html
json.feed.entry[i].author[] Array of post authors
json.feed.entry[i].author[x].name.$t Name of the x-th author on the i-th post Danang Probo Sayekti
json.feed.entry[i].author[x].uri.$t Show uri author profile https://profiles.google.com/123456789
json.feed.entry[i].author[x].gd$image.src Image uri of the x-th author profile on the i-th post //lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.url Show image on the i-th post http://3.bp.blogspot.com/danlogs.jpg
json.feed.entry[i].thr$total.$t Show total threaded comments 7

Here is an example implementation of the above code:

Suppose I need 5 recent posts by a certain label, the label I want to display is "Blogger". I took the title and summary of the post.

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="http://www.danpros.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=mycallback"></script>

Note: we need to understand that json.feed.entry[i].summary.$t only available if we grab the feed URL using http://www.danpros.com/feeds/posts/summary instead of using http://www.danpros.com/feeds/posts/default.

Now how can we create a widget without unsorted recent post by a certain label? This widget also only displays 90 characters in the summary. The following is the example:

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0, 90);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="http://www.danpros.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

Add rel nofollow to all external links in the node body and comment body

For for node body field use below code:

/**
* Override or insert variables into the node template.
*/
function template_preprocess_node(&$variables) {

  /* Add nofollow */
  if(isset($variables['content']['body'][0]['#markup'])) {
    $html_dom = filter_dom_load($variables['content']['body'][0]['#markup']);
    $variables['content']['body'][0]['#markup'] = nofollowed($variables['content']['body'][0]['#markup'], $html_dom->getElementsByTagName('a'), $html_dom);
  }

}

/* Function to add rel nofollow to external link only */
function nofollowed($str, $tags, $html_dom) {
  if(!is_array($tags)) {
    foreach ($tags as $tag) {
      $this_tag = $tag->getAttribute('href');
      if (0 !== stripos($this_tag, '/') && 0 !== stripos($this_tag, url('', array('absolute' => TRUE)))) {
        $tag->setAttribute('rel', 'nofollow');
      }
    }
  }
  $str = filter_dom_serialize($html_dom);
  return $str;
}

And for comment_body field use below code:

/**
* Override or insert variables into the comment template.
*/
function template_preprocess_comment(&$variables) {

  /* Add nofollow */
  if(isset($variables['content']['comment_body'][0]['#markup'])) {
    $html_dom = filter_dom_load($variables['content']['comment_body'][0]['#markup']);
    $variables['content']['comment_body'][0]['#markup'] = nofollowed_comment($variables['content']['comment_body'][0]['#markup'], $html_dom->getElementsByTagName('a'), $html_dom);
  }

}

/* Function to add rel nofollow to external link only */
function nofollowed_comment($str, $tags, $html_dom) {
  if(!is_array($tags)) {
    foreach ($tags as $tag) {
      $this_tag = $tag->getAttribute('href');
      if (0 !== stripos($this_tag, '/') && 0 !== stripos($this_tag, url('', array('absolute' => TRUE)))) {
        $tag->setAttribute('rel', 'nofollow');
      }
    }
  }
  $str = filter_dom_serialize($html_dom);
  return $str;
}

This is useful for example, we only allow dofollow links only on signature. I use this solutions on Replr.

Adding new variable for the Author Pane (Follow Links)

Here's how to adding new variable for the Author Pane (Follow links). The demo is on Bersosial.com.

function template_preprocess_author_pane(&$variables) {

  $variables['user_follow'] = '';
  $uid = $variables['account']->uid;
  $name1 = 'twitter';
  $name2 = 'googleplus';

  $twitter = db_query('SELECT path FROM {follow_links} WHERE uid = :uid and name = :name', array(':uid' => $uid, ':name' => $name1))->fetchField();
  $googleplus = db_query('SELECT path FROM {follow_links} WHERE uid = :uid and name = :name', array(':uid' => $uid, ':name' => $name2))->fetchField();
  
  if (!empty($twitter)) {
     $twitter = ' <a href="' .$twitter. '"><img typeof="foaf:Image" alt="Follow me on Twitter" title="Follow me on Twitter" src="/sites/all/modules/follow/icons/wpzoom26/icon-twitter.png"/></a> ';
     $variables['user_follow'] .= $twitter;
  }

  if (!empty($googleplus)) {
     $google = ' <a rel="author" href="' .$googleplus. '"><img typeof="foaf:Image" alt="Follow me on Google+" title="Follow me on Google+" src="/sites/all/modules/follow/icons/wpzoom26/icon-googleplus.png"/></a> ';
     $variables['user_follow'] .= $google;
  }

}

After that add the following code in author-pane.tpl.php or advanced-forum.naked.author-pane.tpl.php.

<?php /* Follow */ ?>
<?php if (isset($user_follow)): ?>
  <div class="author-pane-line author-follow">
    <?php print $user_follow; ?>
  </div>
<?php endif; ?>

Module used are Follow, Author Pane, and Advanced Forum.