AddThis button in your posts
From Bloggerhacks
(Difference between revisions)
m |
|||
| Line 1: | Line 1: | ||
==Platform== | ==Platform== | ||
| - | + | For use with [[Blogger]] blogs, but probably can easily be adapted to other template based platforms (e.g., [[WordPress]]). | |
==License== | ==License== | ||
| Line 9: | Line 9: | ||
==Other Requirements== | ==Other Requirements== | ||
| - | You need an [http://www.addthis.com AddThis] account/username to use this hack. Don't worry, it's free. | + | You'll probably need an [http://www.addthis.com AddThis] account/username to use this hack. Don't worry, it's free. |
==Description== What does it do? | ==Description== What does it do? | ||
| Line 15: | Line 15: | ||
==Method== | ==Method== | ||
| - | * Open template file: on your dashboard, go to '''Layout | Edit HTML''' to open | + | * Open template file: on your dashboard, go to '''Layout | Edit HTML''' to open the template file. |
| - | * Create a backup | + | * 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. | * 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): | + | * Search for the following lines of code (you will insert the ''AddThis code'', i.e. the hack, right above these lines): |
<nowiki> | <nowiki> | ||
</div> | </div> | ||
| Line 27: | Line 27: | ||
<!-- ADDTHIS CODE STARTS HERE --> | <!-- ADDTHIS CODE STARTS HERE --> | ||
<script type='text/javascript'> | <script type='text/javascript'> | ||
| - | expr:addthis_url | + | expr:addthis_url = '<data:post.url/>'; |
| - | expr:addthis_title | + | expr:addthis_title = '<data:post.title/>'; |
| - | expr:addthis_pub | + | expr:addthis_pub = 'JOHNDOE'; |
</script> | </script> | ||
| Line 40: | Line 40: | ||
<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 '' | + | : You'll want to replace ''JOHNDOE'' (line 5) with your AddThis username. I'm not sure if it even works without a given username. If it does, there will be no need for an AddThis account. |
* That's it! Just click '''Save Template''' and watch the result. | * That's it! Just click '''Save Template''' and watch the result. | ||
| - | ==Modifications== | + | ==Modifications (optional)== |
| - | When using the code as given here, the ''AddThis button'' will be | + | 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. | 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. | ||
| Line 58: | Line 58: | ||
[[Category:Bookmarking]] | [[Category:Bookmarking]] | ||
[[Category:New Blogger]] | [[Category:New Blogger]] | ||
| + | [[Category:Platform Unknown]] | ||
Revision as of 12:50, 15 February 2008
Contents |
Platform
For use with Blogger blogs, but probably can easily be adapted to other template based platforms (e.g., WordPress).
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'll probably 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 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 (you will insert the AddThis code, i.e. the hack, right 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 = '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 CODE ENDS HERE --> </div> <div class='post-footer-line post-footer-line-2'>
- You'll want to replace JOHNDOE (line 5) with your AddThis username. I'm not sure if it even works without a given username. If it does, there will be no need for an AddThis account.
- 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.
