AddThis button in your posts

From Bloggerhacks

(Difference between revisions)
m
m
Line 25: Line 25:
* Insert the JavaScript code so that the result looks like this:
* Insert the JavaScript code so that the result looks like this:
  <nowiki>
  <nowiki>
-
<!-- HACK STARTS HERE -->
+
<!-- ADDTHIS CODE STARTS HERE -->
<script type='text/javascript'>
<script type='text/javascript'>
   expr:addthis_url    = '<data:post.url/>';
   expr:addthis_url    = '<data:post.url/>';
Line 35: Line 35:
   <script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/>
   <script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/>
</span>
</span>
-
<!-- HACK ENDS HERE -->
+
<!-- ADDTHIS CODE ENDS HERE -->
</div>
</div>
Line 41: Line 41:
<div class='post-footer-line post-footer-line-2'></nowiki>
<div class='post-footer-line post-footer-line-2'></nowiki>
: You'll want to replace ''USERNAME'' (line 5) with your AddThis username.
: You'll want to replace ''USERNAME'' (line 5) with your AddThis username.
-
* That's it! Just click ''Save Template'' and watch the result.
+
* That's it! Just click '''Save Template''' and watch the result.
==Modifications==
==Modifications==

Revision as of 12:30, 15 February 2008

Contents

Platform

Specifically for use with Blogger blogs.

License

Creative Commons Attribution Share-Alike 2.5

Required Skills

You should be able to edit and save your Blogger template file.

Other Requirements

You need an AddThis account/username to use this hack. Don't worry, it's free.

==Description== What does it do? This hack, through use of JavaScript, will add an AddThis button to each of your posts. AddThis is a free social bookmarking sharing tool that provides a one button for all functionality to your blog.

Method

  • Open template file: on your dashboard, go to Layout | Edit HTML to open your template file.
  • Create a backup of your template: click Download Full Template to download a backup copy before editing your template file (just in case).
  • Check Expand Widget Templates to see the full template.
  • Search for the following lines of code (you will insert the AddThis code, i.e. the hack, above these lines): 
</div>

<div class='post-footer-line post-footer-line-2'>
  • Insert the JavaScript code so that the result looks like this: 
<!-- ADDTHIS CODE STARTS HERE -->
<script type='text/javascript'>
  expr:addthis_url    = '<data:post.url/>';
  expr:addthis_title  = '<data:post.title/>';
  expr:addthis_pub    = 'USERNAME';
</script>

<span style='float:right; display:inline;'>
  <script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/>
</span>
<!-- ADDTHIS CODE ENDS HERE -->

</div>

<div class='post-footer-line post-footer-line-2'>
You'll want to replace USERNAME (line 5) with your AddThis username.
  • That's it! Just click Save Template and watch the result.

Modifications

When using the code as given here, the AddThis button will be place in the post footer section and aligned to the right. Optionally, you can place the button in the post header section or elsewhere. Just paste the JavaScript code suitably.

Of course, you can change the float:right; statement (line 8) to float:center; or float:left; to align the button to the center or to the left, respectively.

Sites Using This Hack

See Also:

Retrieved from "http://editthis.info/bloggerhacks/AddThis_button_in_your_posts"
Personal tools
FreshTags