Buttons for Blogs

We're putting together some instructions for different blog sites and software to make implementing our buttons as easy as possible. If you need assistance with implementing these buttons or want some help with another blog site, please contact us for help.

Blogger
If you are a user of Blogger and want to implement the MindBodyGreen buttons on every post, you'll need to modify your Blogger template just a bit. Please follow these steps to modify your template:

1. Log into your account at www.blogger.com and go to your blog
2. Go to the Setting tab and then click Archiving
3. Ensure that "Enable Post Pages?" is set to Yes
4. Click on the Template tab and then click Edit HTML
5. Click the checkbox that says "Expand Widget Templates" and then download a copy of your template by clicking "Download Full Template". You'll want to do this to ensure that any changes you make can be easily reversed.
6. Select and Copy the text of the template from the web page
7. Open a text editor (like Notepad) and paste in the text
8. Search for the text <p><data:post.body/></p>
9. If you can't find that text, make sure you selected "Expand Widget Templates" and start back from step 5
10. To have the MindBodyGreen links appear below your post, paste the following code after <p><data:post.body/></p>
    <script type="text/javascript">
    mbg_url = &quot;<data:post.url/>&quot;;
    mbg_title = &quot;<data:post.title/>&quot;;
    </script>
    <script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>
11. Click on the preview button to see your handiwork
12. If it looks good, click on Save Template and all of your posts will have the button added.

If you don't like the position of the buttons and are familiar with HTML and CSS, feel free to play around and position them wherever you'd like. Near the body or footer is probably the best place, though. Just remember to always save your template before starting so you can roll back to a clean copy!

TypePad
We are currently working on a widget for TypePad users who do not use Advanced Templates. If you are a TypePad user with access to Advanced Templates (available to Pro or Premium users), then you can customize your page to include the MindBodyGreen buttons automatically on every post. Be advised that this is not for the faint of heart. In order to get started, you'll need to convert your design to an advanced template. For more on that, read this article. Once you've converted your template, follow similar instructions to adding a Digg or del.icio.us buttons in this article . You'll need to pay attention to some of the comments to the article to get your hands on some template elements as well. The text you want to add to your individual post module is
<a href="http://www.mindbodygreen.com/passvote.action?u=<$MTEntryPermalink$>&t=<$MTEntryTitle encode_url="1"$>">Add to MindBodyGreen</a>

Doing the above will create a text link. You can create any type of link you want, using the graphics from the buttons page. Play around with the placement of the buttons, too, to get them in the spot you want.

Alternatively, or if you do not have access to the Advanced Templates, you can do the following:

1. Create your post in TypePad and publish it
2. Once published, get the permalink URL (the URL to the individual post page)
3. Edit your post, and put the following in your page, replacing 'YOUR POST URL' and 'YOUR POST TITLE' with your actual post URL and title:
   <script type="text/javascript">
   mbg_url = 'YOUR POST URL';
   mbg_title = 'YOUR POST TITLE';
   </script>
   <script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>
4. Re-publish your post and check on the results.
5. Remember that when you use the javascript style buttons, you can customize them any way you want

WordPress
Users who run blogs using the WordPress software can configure their templates to display the MindBodyGreen links automatically. Special thanks to Jason at EcoInsomniac.com for the instructions below:

WordPress users will have to modify the source code to index.php and single.php. Place the following code

<script type="text/javascript">
mbg_url = '<?php the_permalink(); ?>';
mbg_title = '<?php the_title(); ?>';
</script>
<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>

in index.php directly under this code:

<?php the_content('[Read more &rarr;]'); ?>

and in single.php directly under this code:

<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>

Remember that when you use the javascript style buttons, you can customize them any way you want.

If you would like to put the buttons at the top of your post (like the image below), you can use the following code:

<div style="float:left; margin: 0px 10px 0px 0px;">
<!--start mindbodygreen submit button in left corner-->
<div style="float:left; margin: 0px 10px 0px 0px;">

<!--begin MindBodyGreen button-->
<script type="text/javascript">
mbg_url = '<?php the_permalink(); ?>';
mbg_title = '<?php the_title(); ?>';
mbg_energy = true;
</script>
<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>
<!--end MindBodyGreen button-->

This code needs to be added to both the index.php and single.php BEFORE this line of code:
<?php the_content('[click to continue...]'); ?>
Here's what the result will look like:

WordPress.com
If you blog on wordpress.com, you will also have to follow the the second methodology for TypePad users.