BookmarkThis
A MODX Revolution extra to display social share and follow buttons
website
·
bugs
·
requests
Contents
About The Project
BookmarkThis is a MODX Revolution extra that displays inline social share and follow buttons on your website. The BookmarkThis package is made up of several chunks and snippets, and includes very light weight CSS and JavaScript. It is fully customisable, allowing you to add your own links and icons.
Built With
Installation
- Log-in to your MODX Manager
- Go to the Insaller
- Search for BookmarkThis and instal
Usage
Share
Use the BookmarkThis snippet to dispaly inline social share buttons. By default, all the buttons from the data chunk are shown, where a share
property has been set.
Follow
Use the BookmarkThisFollow snippet to dispaly inline social follow buttons. By default, all the buttons from the data chunk are shown, where a follow
property has been set.
Examples
Including only certain items
The use
property allows you to specify which buttons to show. Buttons returned will be in the same order that you specify them.
Changing the size
The size
property allows you set the size of the buttons. You can currenlty choose from 16, 36, 48 and 64.
Altering the style
The type
property allows you set the style of the buttons. You can currently choose from rounded, square, custom and circle.
Circle icons
Custom icons
Options
Share
The share options are set on the BookmarkThis snippet.
Property | Description | Default |
---|---|---|
use |
Comma separated list of items to be used from the data. If empty, all data items will be used. | |
exclude |
Comma separated list of items to be excluded from the data. | |
data |
Name of chunk containing the JSON data items. | bookmarkThisData |
type |
Type of icon to be used. Either - circle, rounded, custom or square | rounded |
size |
Size of icon to be used. Either - 16, 36, 48 or 64 | 36 |
tpl |
Name of chunk to apply to each item. | bookmarkThisShare |
tplWrapper |
Name of chunk to wrap all tpl items inside. |
bookmarkThisShareWrapper |
appendJS |
Whether to append the JavaScript to the end of the resource output. | 1 |
appendCSS |
Whether to append the CSS to the end of the resource head. | 1 |
customFields |
JSON data specifying the queries and attributes from which to obtain a bookmarklets title, description and tags. |
Follow
The follow options are set on the BookmarkThisFollow snippet.
Property | Description | Default |
---|---|---|
use |
Comma separated list of items to be used from the data. If empty, all data items will be used. | |
exclude |
Comma separated list of items to be excluded from the data. | |
data |
Name of chunk containing the JSON data items. | bookmarkThisData |
type |
Type of icon to be used. Either - circle, rounded, custom or square | rounded |
size |
Size of icon to be used. Either - 16, 36, 48 or 64 | 36 |
tpl |
Name of chunk to apply to each item. | bookmarkThisFollow |
tplWrapper |
Name of chunk to wrap all tpl items inside. |
bookmarkThisFollowWrapper |
appendCSS |
Whether to append the CSS to the end of the resource head. | 1 |
Customise
Button data
You can edit existing social buttons, or add your own ones. The data for the buttons is stored in a chunk named BookmarkThisData. To customise BookmarkThis, simply create your own chunk with the same name. You can then apply your changes to this new data chunk.
Here's an example of the data within BookmarkThisData.
{
"facebook":{
"name" : "Facebook",
"share" : "https://www.facebook.com/sharer/sharer.php?u={link}&t={title}",
"follow" : "https://www.facebook.com/",
"image" : "{bookmarkthis_assets_url}images/v1.8/{size}/facebook-{type}.png"
},
"github":{
"name" : "Github",
"follow" : "https://github.com/",
"image" : "{bookmarkthis_assets_url}images/v1.8/{size}/github-{type}.png"
},
"pinterest":{
"name" : "Pinterest",
"share" : "https://www.pinterest.com/pin/create/button?url={link}&media=&description={title}",
"follow" : "https://www.pinterest.com/",
"image" : "{bookmarkthis_assets_url}images/v1.8/{size}/pinterest-{type}.png"
},
"email":{
"name" : "E-mail",
"share" : "mailto:?subject={title}&body={link}",
"image" : "{bookmarkthis_assets_url}images/v1.8/{size}/email-{type}.png"
}
}
Button style
All the styles used are prefixed with bookmarkThis. Simply extend these styles in your own css.
Templates
All the teamplate chunks used by BookmarkThis can be customised by making your own one with the same name.
Share
Each share button is rendered using a chunk named BookmarkThisShare, as defined by the tpl
property.
<img [[+custom]] title="Share this page on [[+name]]" src="[[+image]]" alt="[[+name]]" onclick="return BookmarkThis.share('[[+share]]', this);" />
Each set of share buttons are rendered using a chunk named BookmarkThisShareWrapper, as defined by the tplWrapper
property.
<p class="bookmarkThisShare">[[+items]]</p>
Follow
Each follow button is rendered using a chunk named BookmarkThisFollow, as defined by the tpl
property.
<a href="[[+follow]]" title="Follow us on [[+name]]" rel="nofollow"><img src="[[+image]]" alt="[[+name]]" /></a>
Wrapper template
Each set of follow buttons are rendered using a chunk named BookmarkThisFollowWrapper, as defined by the tplWrapper
property.
<p class="bookmarkThisFollow">[[+items]]</p>