-
Notifications
You must be signed in to change notification settings - Fork 16
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.
OpenShare can optionally build iOS-specific URL schemes (Android handles automatically) before defaulting to the web using the data-open-share-ios="true" attribute for a number of integrations. It's important to note that if the app is not installed an "invalid URL" alert will be displayed before redirecting to the web version. Unfortunately there is no workaround that we are aware of and so this feature is an optional addition for use where it makes sense.
Jump to a section
- Facebook Send
- Twitter Retweet
- Twitter Like
- Twitter Follow
- Google Maps
- YouTube
- YouTube Subscribe
- YouTube Follow
- Instagram Follow
- Buffer
- Tumblr
- Flickr
- GitHub
- Dribbble
- CodePen
- PayPal
- Analytics
- 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 Facebook instance with data-open-share="facebook-send" 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 |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
Initialize an OpenShare Twitter instance with data-open-share="twitter-retweet" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-tweet-id |
Required |
data-open-share-related |
Related accounts |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
Initialize an OpenShare Twitter instance with data-open-share="twitter-retweet" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-tweet-id |
Required |
data-open-share-related |
Related accounts |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
Initialize an OpenShare Twitter instance with data-open-share="twitter-follow" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-user-id |
Either user ID or Screen name required |
data-open-share-screen-name |
|
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
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. |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
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 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="youtube" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-video |
Required video ID |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
Initialize an OpenShare YouTube instance with data-open-share="youtube-subscribe" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-user |
Required user name |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
Initialize an OpenShare YouTube instance with data-open-share="youtube-follow" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-user |
Required user name |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
Initialize an OpenShare Instagram instance with data-open-share="instagram". This integration is iOS only.
Initialize an OpenShare Instagram instance with data-open-share="instagram-follow" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-username |
Required user name |
data-open-share-ios |
Set to true to attempt to open app before defaulting to web |
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="whatsapp" 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 an OpenShare PayPal instance with data-open-share="paypal" and customize with the following.
| Attribute | Notes |
|---|---|
data-open-share-buttonId |
PayPal button ID |
data-open-share-sandbox |
Boolean (default false) sandbox PayPal button |
Initialize an OpenShare Analytics instance with data-open-share-analytics="{analytics type}" and customize with the following.
| Data Attribute | Analytics Integration |
|---|---|
event |
[Google Analytics Event] (https://developers.google.com/analytics/devguides/collection/analyticsjs/events) |
social |
[Google Analytics Social Interaction] (https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) |
tagManager |
[Google Tag Manager Message] (https://developers.google.com/tag-manager/devguide) |
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>