Learn More

Friday, November 23, 2012

Consequences of Social Network For Template And Tutorials of Blogger

facebook and google plus
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:13px #565755;
    padding:5px;background:white;z-index:500;
}
#result{
    position:relative;
}
#result img {
     border-radius0px 0px 0px 0px;
     bordermedium none;
     box-shadow0px 0px 20px rgba(0000.2);
     padding0px;
}

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.

    1. Let me know how to repair it without the social media feature, I just want to repair the auto readmore, please help me. My blog http://jemick.blogspot.com

      ReplyDelete
    2. Ok, give us time to see your blog. soon we will response your comment again.

      ReplyDelete
    3. I was check, I think our code is still valid when you want to use read more, you don't have to add any code, because the code above will result auto read more, you can see it via function of createSummaryAndThumb

      ReplyDelete