Share Buttons - Customizing with the "data-*" attribute

Follow

Once you have installed our Share Buttons, you can customize the content that is shared when people (Title, Link, Image & Summary) by defining "data attributes" within the button code. To do this, add the following within the div tag embedded in the Share Button code you added to your page:
 

data-title

data-title='This is my Page Title'


data-link

data-link='http://www.TheURLtoShare.com/page.html'


data-image

data-image='http://www.TheURLtoShare.com/image.jpg'


data-summary

data-summary='You can place your own description of the page here.'

 

Example

<div class='shareaholic-canvas' data-app='share_buttons' data-app-id="xxxxx" data-title='Page Title' data-link='http://www.domain.com/home.html' 
data-image='http://www.domain.com/image.jpg' data-summary='Description of the page you are sharing'></div>


For Tumblr:

For Tumblr, you can use data-title and data-link along with the dynamic variable keys.

<div class='shareaholic-canvas' data-app='share_buttons' data-app-id="xxxxx" data-title='{title}' data-link='{permalink}'></div>


Please, see Tumblr's documentation on theme variables for more information.

 

For WordPress: 

For WordPress, you can use data-link along with the function that retrieves the permalink path. 

<div class='shareaholic-canvas' data-app='share_buttons' data-app-id="xxxxx" data-link='http://www.your-domain-here.com<?php the_permalink(); ?>'></div>

Reference: http://codex.wordpress.org/Function_Reference/the_permalink


For a more complete Shareaholic experience on the WordPress platform, we have a plugin available that does all of the work for you, but still provides full customization capability.