Buttons

Bloggers and Web Publishers: Would you like to make sure your audience votes for your stories that appear on MindBodyGreen? Want a quick way to add your content to MindBodyGreen? Integrate MindBodyGreen buttons on your site so users can submit your content or vote for it directly from your story. It's easy to do and it's a great way to promote your content.

If your story already exists on MindBodyGreen, users who click on the button will vote for your story. If your story is not on our site, yet, users can add your story to MindBodyGreen. You don't have to submit stories yourself and you don't have to change the code on your page.

If you need assistance with implementing these buttons, please contact us for help.

Bloggers
The key thing to remember when implementing the MindBodyGreen buttons is that you want each individual story to have the buttons, not just your main blog page. You'll need to ensure that the buttons pass the URL and title of each individual story. The method for doing this may be different depending on what blog site or software you use. We have created some instructions for the more popular sites, and will add more as we get them:
Blogger
TypePad
WordPress Server Software
WordPress.com

If you use a different blogging package, you might have already implemented buttons from sites like Digg, reddit, Technorati, furl, etc. You'll need to take similar steps to integrate our buttons. Try giving the instructions below a try, and if you need assistance, please contact us for help.

If you use FeedBurner, you can find our FeedFlare at:
http://www.mindbodygreen.com/mbgflare.xml

Simple Graphic Buttons
The quickest way to integrate MindBodyGreen onto your site is to copy and paste the following text into your page where you want the MindBodyGreen icons to show up:

<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>

This will display the following on your site:



Note that this method will work best if you put the buttons on individual post pages, not on a summary page. This is because the buttons will read the URL and title of the current page and pass it to our site. If you need multiple buttons on the same page, you might need to customize the buttons - see below.

 

Customizing
You have multiple options for customizing the look of our buttons on your page. You can:

  • Pass a specific URL if it is different than the current page (useful for blog summary pages)
  • Pass a title that you want to be passed to MindBodyGreen when your story is submitted
  • Show a mini 16x16 pixel icon or text instead of the larger icon
  • Display your story's MindBodyGreen "energy"
The snippet of code below shows some of the ways to customize the display on your page.

<script type="text/javascript">
mbg_title = 'YOUR CUSTOM TITLE';
mbg_url = 'YOUR CUSTOM URL';
mbg_style = 'mini'; // or text or full (default)
mbg_energy = true;
mbg_text = 'THE MESSAGE DISPLAYED ON YOUR SITE';
mbg_width = '100px'; // Width in pixels of the box containing the text displayed on your site. Only used with mbg_style of text
mbg_height = '20px'; // Height in pixels of the box containing text displayed on your site. Only used with mbg_style of text
</script>
<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>

You can use any or all of the above modifiers to customize the display on your page. Please be aware that mini and full styles have designated heights and widths, so you cannot modify those. Also, energy can not be displayed with the mini icon.

Play around with it on your site, and if you have problems, contact us.

 

Example: Passing Specific URL and Title
If you have a blog and would like to put the MindBodyGreen buttons into the body of your post, you may need to pass us the individual post link and title per post. This is because many blogs will display the full post on a summary page with a number of other posts. If you used the simple method listed above, each post on your summary page would pass the same link and title to MindBodyGreen, which is not what you want. In this case, you will need to write your post, save it, get the permalink to your post, and then add the buttons back into the body of your post. Here's an example:

<script type="text/javascript">
mbg_url = 'http://blog.mindbodygreen.com/2007/12/turning-japanese.html';
mbg_title = 'Turning Japanese';
</script>
<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>

displays



and will pass the url http://blog.mindbodygreen.com/2007/12/turning-japanese.html and title "Turning Japanese" no matter where the post shows up.

 

Example: Mini 16x16 icon

<script type="text/javascript">
mbg_style = 'mini';
</script>
<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>

displays

 

Example: Text displaying + Energy count

<script type="text/javascript">
mbg_energy = true;
mbg_text = 'Vote on MindBodyGreen!';
mbg_width = '200px';
mbg_height = '20px';
</script>
<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>

displays

 

Example: Icon displaying + Energy count

<script type="text/javascript">
mbg_energy = true;
</script>
<script type="text/javascript" src="http://mindbodygreen.com/js/mbg.js"></script>

displays



243

 

Example: Link with full control
If you want to fully control the look of the MindBodyGreen link on your page, you must submit the story to MindBodyGreen first, and then use this as the anchor tag around your link:

http://www.mindbodygreen.com/passvote.action?u=MY_ENCODED_URL

This will allow you to create any sort of graphical or text link that you want!