AddThis button in your posts

From Bloggerhacks

(Difference between revisions)
m (Sites Using This Hack)
 
(One intermediate revision not shown)
Line 1: Line 1:
-
==Platform==
+
{{moved}}
-
For use with [[Blogger]] blogs, but probably can easily be adapted to other template based platforms (e.g., [[WordPress]]).
+
-
 
+
-
==License==
+
-
[http://creativecommons.org/licenses/by-sa/2.5/ Creative Commons Attribution Share-Alike 2.5]
+
-
 
+
-
==Required Skills==
+
-
You should be able to edit and save your [[Blogger template]] file.
+
-
 
+
-
==Description== What does it do?
+
-
This hack, through use of JavaScript, will add a dropdown '''AddThis button''' to each of your posts. [http://www.addthis.com 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 the template file.
+
-
* Create a backup: 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 within the template (you will insert the ''AddThis code'', i.e. the hack, right above these lines):
+
-
<nowiki>
+
-
</div>
+
-
 
+
-
<div class='post-footer-line post-footer-line-2'></nowiki>
+
-
* Insert the JavaScript code so that the result looks like this:
+
-
<nowiki>
+
-
<!-- AddThis Bookmark Button BEGIN -->
+
-
<script type='text/javascript'>
+
-
  expr:addthis_url  = '<data:post.url/>';
+
-
  expr:addthis_title = '<data:post.title/>';
+
-
  expr:addthis_pub  = 'JOHNDOE';
+
-
</script>
+
-
 
+
-
<span style='float:right; display:inline;'>
+
-
  <script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/>
+
-
</span>
+
-
<!-- AddThis Bookmark Button END -->
+
-
 
+
-
</div>
+
-
 
+
-
<div class='post-footer-line post-footer-line-2'></nowiki>
+
-
: You'll probably want to replace ''JOHNDOE'' (line 5) with your AddThis username. If you don't have an account, you can register to [http://www.addthis.com AddThis] for free.
+
-
* That's it! Just click '''Save Template''' and watch the result.
+
-
 
+
-
==Modifications (optional)==
+
-
When using the code as given here, the ''AddThis button'' will be placed in the post footer section, aligned to the right. Optionally, you can place the button in the post header section or elsewhere. Just paste the JavaScript code suitably. Remember to always make a backup of the template file prior to any changes! A broken template file can make your blog unusable and it's quite a mess to repair a template file manually.
+
-
 
+
-
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==
+
-
* [http://ankerboje.blogspot.com Boat Builder's Blogbook]
+
-
 
+
-
* [http://www.digitalpurview.com/ Digital Purview]
+
-
 
+
-
==See Also==
+
-
* [[How to add a digg button to your blogger post]]
+
-
* [[PopMarks - Blog Buttons]]
+
-
* [[Social bookmark new blogger posts using AddThis]]
+
-
* [[Social bookmarking in Blogger beta]]
+
-
 
+
-
[[Category:Hacks]]
+
-
[[Category:Bookmarking]]
+
-
[[Category:New Blogger]]
+
-
[[Category:Platform Unknown]]
+

Current revision as of 13:45, 22 September 2009

Bloggerhacks has moved!

Please visit

the AddThis button in your posts page at Wikia.
Personal tools
FreshTags