Tuesday, March 29, 2011

Blogger Tip: Install Social Network Plugin On Blogger


Social network is a tool to promote a page or URL to friends, visitors, or public. Many social nework plugin are available and you can get it either individually or groups. Individual social network plugins are such as Facebook, Twitter, Google Buzz, StumbleUpon, Digg, Delicious, and Yahoo Buzz. Example of group social network plugin are ShareThis and Addthis. By using this group social network, you can share a page easily. AddThis and ShareThis provide the plugin you like to choose, while individual social network, you have to install manually.

Related Post :
  1. How to Unfollow or Stop Following a Blog in Google Friend Connect
  2. Customize Your Facebook Like Button More Specific
If you are a Blogger.com user, then most of you will definitely install the social network plugin on the bottom/end of the post you wrote. What if you want to install it at the top of the post (below the Title Post) so that the reader will immediately know how many people/readers/visitors share/like the post? Here are the steps on installing the social network plugin on your Blogspot. Since Facebook is the most popular one, we will use Facebook Like Button as the sample.
  1. Open your blog template just like the picture below

  2. Choose Edit HTML


  3. Put a check mark on Expand Widget Templates 
  4. Save first your existing template by selecting Download Full Template.
  5. Press Ctrl-F, and type: <div class='post-header'> . You may copy and paste this script to the Find Box of your template.
  6. Righ under that row, insert this script:
  7. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Facebook BEGIN -->
    <div style='padding-top:2px; float:left'>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <fb:like expr:href='data:post.url' layout='button_count' show_faces='false' width='90'/>
    </div>
    <!-- Facebook End -->
    </b:if>
  8. Instead of the above script, you may install plugins of bookmarking and sharing service provider like AddThis, below:
  9. <!-- AddThis Button BEGIN -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
    <a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
    <a class='addthis_button_tweet'/>
    <a class='addthis_counter addthis_pill_style'/>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2425875fb8f1bb' type='text/javascript'/><br />
    </b:if>
    <!-- AddThis Button END -->

  10. You may combine together steps number 7 and 8, depend on your preference.
  11. Click SAVE TEMPLATE button.
  12. Finish. You may view your blog by opening each of your blog post.
For other social network plugin like Twitter, StumbleUpon, Google Buzz, and Yahoo Buzz please go to http://www.varieart.com/article81-How-To-Install-Social-Sharing-Network-Plugin-In-Your-Blogspot-Blogger-com.

No comments:

Post a Comment