The "Read More" plugin and how blogger beat me to it

For those who are searching for a way to add a "Read More" link to their blogspot blogs - click here

The rest of the post discusses the other "Read More" plugin that I found on the net, its limitations and how I wrote one myself (similar in its functionality to one in the above link) and its source code. Its a good study on how to preprocess your post after you click "PUBLISH POST" button but before blogger actually publishes it. The geeks may continue reading.

Quite some time ago, I was writing a humor article on my blog - Barberic Creatures It badly needed a "Read More" link because as per the the setting I had, I display 10 posts on a page and if one of them is too long (this one was) it dissuades the reader from scrolling all the way down to see the other ones. I couldn't find any plugins at that time (2008/11) and left it at that.

But it came back to haunt me when I wrote Schwartzian Transform Explained. This time I got a hit - Snaphow read more plugin

The instructions were clear and it works. But it didn't address my needs because:

1. It inserts "Read More" link at the end of all pages - even the ones that are accommodated in the limits it imposes.
2. The link is inserted based on the character limit which implies that the author cannot decide the "logical" break point. I certainly wouldn't want it to display the first 3.7 lines of a poem followed by a read more link. That would break the flow.
3. It messes up formatting. The preview post that you see is one big paragraph without any line breaks.

At that point, I didn't take Google's hand - I decided to write my own plugin - to do it my way and to see how blogger plugins work. The above plugin had a clean, understandable code and after going through it I wrote one which did the following:

1. The author decides where to break his post and the preview content to show to the reader.
2. To do this he inserts an HTML comment  <!-- cut_from_here --> at the break point.
3. When the post is being published a javascream (read javascript) function takes the contents of the post, uses the "<!-- cut_from_here -->" as a delimiter and displays the first part (the part preceding the delimiter) followed by a "Bleed More" (just for kicks) link.
4. I gloat.

Like the snaphow plugin, in order to add my plugin to your blogger template, one must do the following:

1. DO NOT COPY PASTE THE CODE DIRECTLY . This code has been rendered through SyntaxHighlighter plugin - click on the "view plain" link at the top of the code snippet, copy the code shown to you and before you paste it - run it through an HTML encoder. Here is one - HTML Encoder
2. Go to your blog => Dashboard => Design => Download Full template. This is to backup your template. The author does not claim responsibility for any side effect caused by the suggested code changes in this post.
3. After backing up your template click on Edit HTML => Check on "Expand Widget Templates"
4. Replace </head> with the following code 
view plainprint?
1. <script type="text/javascript">  
2.     var cutPostAtPattern = "<!-- cut_from_here -->";   
3.     function getPostPreview(pID, blogPostUrl){  
4.         var div = document.getElementById(pID);  
5.         var doc = div.innerHTML;  
6.         var patt_idx = doc.indexOf(cutPostAtPattern);  
7.         var previewContent;  
8.         if (patt_idx == -1) {  
9.             previewContent = doc;     
10.         } else {  
11.             splitContent = doc.split(cutPostAtPattern);  
12.             var readMoreLink = "<br/><br/><b><a href=" + blogPostUrl + ">Read More >></a></b>";  
13.             previewContent = splitContent[0] + readMoreLink;  
14.         }  
15.         var preview = '<div>' + previewContent + '</div>';  
16.         div.innerHTML = preview;  
17.      }      
18. </script>   
19. </head>  

 
</head>

5. Replace <data:post.body/> with the following code
view plainprint?
1. <b:if cond='data:blog.pageType == "item"'>  
2. <data:post.body/>  
3. <b:else/>  
4. <div expr:id='"preview" + data:post.id'>  
5. <data:post.body/>  
6. </div>  
7. <script type='text/javascript'>  
8.   getPostPreview("preview<data:post.id/>", "<data:post.url/>");  
9. </script>    
10. </b:if>   

      <b:if cond='data:blog.pageType == "item"'>
      <data:post.body/>
      <b:else/>
      <div expr:id='"preview" + data:post.id'>
      <data:post.body/>
      </div>
      <script type='text/javascript'>
        getPostPreview("preview<data:post.id/>", "<data:post.url/>");
      </script>  
      </b:if> 

6. Save the template
7. Edit the most current post of your blog to add <!-- cut_from_here --> at the point upto which you want the reader to see the preview.
8. Publish it and click on "View Blog" link. If you click on "View Post" the above code will display the entire post without the preview (will explain the reason soon)
9. Jump with joy or curse the author depending upon the outcome.

Now comes the fun part. We dissect both the code snippets to see why they do the trick.

First you decide when your javascript function will be called. That is done by the code in Step 5 . As you can see it is an if-else block. The condition it checks is:

view plainprint?

1. <b:if cond='data:blog.pageType == "item"'>  
2. <data:post.body/>  
3. <b:else/>  

      <b:if cond='data:blog.pageType == "item"'>
      <data:post.body/>
      <b:else/>

which means if the pageType is "item" - which means "a specific post" - then show the body as it is. Which makes sense, because if you clicked on a specific post there is no point in adding a "Read More" tag in it. The "Read More" tag is used to reduce the per-post-hog-limit on the index page of your blog. More information on pageType - here

If the pageType is not "item" then:

view plainprint?

1. <b:else/>  
2. <div expr:id='"preview" + data:post.id'>  
3. <data:post.body/>  
4. </div>  
5. <script type='text/javascript'>  
6.   getPostPreview("preview<data:post.id/>", "<data:post.url/>");  
7. </script>    

      <b:else/>
      <div expr:id='"preview" + data:post.id'>
      <data:post.body/>
      </div>
      <script type='text/javascript'>
        getPostPreview("preview<data:post.id/>", "<data:post.url/>");
      </script>  

call the getPostPreview function with the post id and the post url and let it compress the post into a preview post. The data:post.id, data:post.url hold this meta-information.

What goes on inside the getPostPreview function?

view plainprint?

1. <script type="text/javascript">  
2.     var cutPostAtPattern = "<!-- cut_from_here -->";   
3.     function getPostPreview(pID, blogPostUrl){  
4.         var div = document.getElementById(pID);  
5.         var doc = div.innerHTML;  
6.         var patt_idx = doc.indexOf(cutPostAtPattern);  
7.         var previewContent;  
8.         if (patt_idx == -1) {  
9.             previewContent = doc;     
10.         } else {  
11.             splitContent = doc.split(cutPostAtPattern);  
12.             var readMoreLink = "<br/><br/><b><a href=" + blogPostUrl + ">Read More >></a></b>";  
13.             previewContent = splitContent[0] + readMoreLink;  
14.         }  
15.         var preview = '<div>' + previewContent + '</div>';  
16.         div.innerHTML = preview;  
17.      }      
18. </script>     

line 02      : Initialize the pattern at which the post will be split into 2 parts and only the first one
                 (the one before the pattern) will be displayed.
line 05-06 : get the HTML corresponding to the post id.
line 07      : get the point at which the cutPostAtPattern occurred.
line 10      : if the pattern is not found, the preview content is equal to the document itself.
line 12-14 : if the pattern is found, split the content at that pattern and append the preview content with
                 the "Read More" link.
line 16-17 : Place the preview content + link within a div and set it as the post's HTML content.

This is just one example. You can replace the getPostPreview function by any function to preprocess your post before displaying it. A google search on the buzzwords - data:blog.pageType, data:post.id, etc. will give you many hits to know more about the tag syntax and meta information.

When I was done testing this plugin (it has one small flaw which I leave for the reader to observe and point out), I wanted to submit it on some site that hosted blogger plugins. It was then that I found out that blogger had already integrated a similar feature in their rich text editor - Read More That's the one I used for adding a "Read More" link to this post. But I enjoyed the process as I got to know interesting things while working on the plugin. Hope you find this information useful while playing with blogger templates.