Consequences of Social Network For Template And Tutorials of Blogger

Since blogger has been joining with Google Plus social network, then blogger was changed several important code of template tags. These tags has side effect to all tutorials for blogger including the template to around the world. Blogger has change the several important code to ensure the snippet for open graph is work properly. Remember, blogger is a part of Google, and Google has been joining with social network (Google Plus) on their search engine. So, good snippet will has good side effect to Google search engine.

Basically Google Plus and Facebook have same basic principle. They are using Open Graph in connect you with what you care. They try to make every thing like in real life. Snippet tool is one of way to make it like real life. So that the reason why blogger must change several important code of template tags. So, if you are using old tutorials or old template, then you must change it. Here the list what tutorials are get the side effect of this change:

1. Automatic read more
2. Related posts
3. Social share plugin
4. Template

And below is the several template tags that was added automatically to blogger template

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>​

What should I do?

What you should to do is simple, just add the following open graph meta tags before </head>

  <meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
    <b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>​

Google Plus and Facebook agree with open graph meta tags. So you don't have to add itemprop meta tags to your blog. After you add meta tags above, and if you want to repair your automatic read more, related posts, social share plugin, then find the code below

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

and repalce it with below
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<!--for readmore-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<br/>
<p>
<! -- Put your social share plugin in here -->
</p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<h2 style='margin-top:28px;'>Related Posts</h2>
    <script src='http://plugin-codes.googlecode.com/files/threelasrelatedposts-v-2.js'/>
<script type='text/javascript'>
var widthplugin = 532;
var feedUri = &quot;<data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/>?alt=json-in-script&amp;max-results=9&amp;callback=?&quot;;
</script>  
<div id='result'/>

</b:if>
</b:loop>
</b:if>
<br/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!--for readmore-->;
        <data:post.body/>
<!--for readmore-->
<b:else/>
          <b:if cond='data:post.isFirstPost'>
               <data:post.body/>
           <b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/>
</b:if>
</b:if>
<!--for readmore-->
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<!--for readmore-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<br/>
<p>
<! -- Put your social share plugin in here -->
</p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<h2 style='margin-top:28px;'>Related Posts</h2>
    <script src='http://plugin-codes.googlecode.com/files/threelasrelatedposts-v-2.js'/>
<script type='text/javascript'>
var widthplugin = 532;
var feedUri = &quot;<data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/>?alt=json-in-script&amp;max-results=9&amp;callback=?&quot;;
</script>  
<div id='result'/>

</b:if>
</b:loop>
</b:if>
<br/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!--for readmore-->;
        <data:post.body/>
<!--for readmore-->
<b:else/>
          <b:if cond='data:post.isFirstPost'>
               <data:post.body/>
           <b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/>
</b:if>
</b:if>
<!--for readmore-->

        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>​

Then add the following code before </head>

<script type='text/javascript'>
        var thumbnail_mode = &quot;float&quot; ;
        summary_noimg = 170;
        summary_img = 170;
        img_thumb_height = 72;
        img_thumb_width = 72;
    </script>
    <script src='https://for-threelas-site.googlecode.com/svn/trunk/readmore.js' type='text/javascript'/>
    ​

After that, put the following code before before ]]></b:skin>

 #tl-related{

    list-style:none;

    margin:0;

    padding:0;

    font-size:13px;

    font-family:Times New Roman;

    position:absolute;

    left:0;

    top:0;

}

#tl-related li{

    width:72px;

    padding:2px;

    float:left;

}

#tl-related li .image{

    width:72px;

    height:72px;

    padding-bottom:2px;

}

#tl-related li .title{

    width:72px;

    height:16px;

    overflow:hidden;

}

#expand{

    width:152px;

    display:none;

    position:absolute;

    top:0;

    left:0;

    box-shadow:0 0 13px #565755;

    padding:5px;background:white;z-index:500;

}

#result{

    position:relative;

}

#result img {

     border-radius: 0px 0px 0px 0px;

     border: medium none;

     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);

     padding: 0px;

}

Don't forget, you must add jquery lib to your blog. If you are not already put jquery lib, then put the following code before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

We also add related post expand widget on the code above. If you are using our template, then all this problem is not happen. We hope this tutorial help you how to engage your blog with social network.