-
Notifications
You must be signed in to change notification settings - Fork 15
2. Data Attribute API
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
- Google Maps
- Buffer
- Tumblr
- Flickr
- GitHub
- Dribbble
- CodePen
- Counts
- Watchers
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 |
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 |
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 |
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. |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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>
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>