Skip to content

2. Data Attribute API

Jacob Burden edited this page Jun 2, 2016 · 29 revisions

OpenShare can be used in full without having to write a single line of JavaScript. Both share and count nodes can be created by simply adding a few data attributes to your HTML elements. You can even create dynamic OpenShare nodes on the fly using OpenShare Watchers. Here is the complete OpenShare Data Attributes API reference.

Jump to a section

Facebook

Initialize an OpenShare Facebook instance with data-open-share="facebook" and customize with the following.

Attribute Notes
data-open-share-link Required
data-open-share-picture
data-open-share-caption
data-open-share-description
data-open-share-dynamic Fetch new attribute values on every share

Twitter

Initialize an OpenShare Twitter instance with data-open-share="twitter" and customize with the following.

Attribute Notes
data-open-share-url Required
data-open-share-text
data-open-share-via Username without @
data-open-share-hashtags Comma separated
data-open-share-dynamic Fetch new attribute values on every share

Google

Initialize an OpenShare Google instance with data-open-share="google" and customize with the following.

Attribute Notes
data-open-share-url Required
data-open-share-dynamic Fetch new attribute values on every share

Google Maps

Initialize an OpenShare Google Maps instance with data-open-share="google-maps" and customize with the following.

Attribute Notes
data-open-share-center comma separated string of latitude,longitude.
data-open-share-views 'satellite', 'traffic', or 'transit'
data-open-share-zoom An integer that specifies the zoom level of the map.
data-open-share-search A Google Maps search query.
data-open-share-saddr This can be a latitude,longitude or a query formatted address.
data-open-share-dadd Sets the end point for directions searches. Has the same format and behavior as saddr.
data-open-share-directions-mode Method of transportation. Can be set to: driving, transit, bicycling or walking.

Pinterest

Initialize an OpenShare Pinterest instance with data-open-share="pinterest" and customize with the following.

Attribute Notes
data-open-share-media Required. URL of image to pin
data-open-share-url URL to share with image
data-open-share-description
data-open-share-dynamic Fetch new attribute values on every share

LinkedIn

Initialize an OpenShare LinkedIn instance with data-open-share="linkedIn" and customize with the following.

Attribute Notes
data-open-share-url Required
data-open-share-title
data-open-share-dynamic Fetch new attribute values on every share

Buffer

Initialize an OpenShare Buffer instance with data-open-share="buffer" and customize with the following.

Attribute Notes
data-open-share-url Required
data-open-share-text
data-open-share-dynamic Fetch new attribute values on every share

Tumblr

Initialize an OpenShare Tubmlr instance with data-open-share="tumblr" and customize with the following.

Attribute Notes
data-open-share-url Required
data-open-share-title
data-open-share-caption
data-open-share-dynamic Fetch new attribute values on every share

Reddit

Initialize an OpenShare Reddit instance with data-open-share="reddit" and customize with the following.

Attribute Notes
data-open-share-url Required
data-open-share-title
data-open-share-dynamic Fetch new attribute values on every share

Email

Initialize an OpenShare Email instance with data-open-share="email" and customize with the following.

Attribute Notes
data-open-share-to Required. Email address
data-open-share-subject
data-open-share-body
data-open-share-dynamic Fetch new attribute values on every share

Flickr

Initialize an OpenShare Flickr instance with data-open-share="flickr" and customize with the following.

Attribute Notes
data-open-share-username Required. Username
data-open-share-dynamic Fetch new attribute values on every share

whatsapp

Initialize an OpenShare Flickr instance with data-open-share="flickr" and customize with the following.

Attribute Notes
data-open-share-text Required. Text message.
data-open-share-dynamic Fetch new attribute values on every share

Github

Initialize an OpenShare Github instance with data-open-share="github" and customize with the following.

Attribute Notes
data-open-share-url Full Github repo url
data-open-share-repo user/repo (for use instead of full Github repo url)
data-open-share-issue Issue title
data-open-share-body Issue body
data-open-share-dynamic Fetch new attribute values on every share

Dribbble

Initialize an OpenShare Dribbble instance with data-open-share="dribbble" and customize with the following.

Attribute Notes
data-open-share-url Full Dribbble shot url
data-open-share-shot shot (for use instead of full Dribbble url)
data-open-share-dynamic Fetch new attribute values on every share

Codepen

Initialize an OpenShare Codepen instance with data-open-share="codepen" and customize with the following.

Attribute Notes
data-open-share-url Full Codepen url
data-open-share-username (for use instead of full codepen url)
data-open-share-view (for use instead of full codepen url)
data-open-share-pen (for use instead of full codepen url)
data-open-share-dynamic Fetch new attribute values on every share

Counts

Initialize a count node by specifying the URL to count shares of and the platform(s) to count on.

<span data-open-share-count="facebook" data-open-share-count-url="http://www.digitalsurgeons.com"></span>
<span data-open-share-count="facebook,pinterest,reddit" data-open-share-count-url="http://www.digitalsurgeons.com"></span>

Watchers

OpenShare uses Mutation Observers in order to support dynamically created OpenShare nodes using straight up HTML with data attributes. You will need a polyfill for <= IE10 support but otherwise it's as simple as follows.

<div data-open-share-watch>
    <!-- OpenShare nodes inserted here will be automatically instantiated -->
</div>
Clone this wiki locally