A MODX Revolution extra to display social share and follow buttons
website
·
bugs
·
requests
Contents
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.
- Log-in to your MODX Manager
- Go to the Insaller
- Search for BookmarkThis and instal
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.
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.
The use
property allows you to specify which buttons to show. Buttons returned will be in the same order that you specify them.
The size
property allows you set the size of the buttons. You can currenlty choose from 16, 36, 48 and 64.
The type
property allows you set the style of the buttons. You can currently choose from rounded, square, custom and circle.
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. |
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 |
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"
}
}
All the styles used are prefixed with bookmarkThis. Simply extend these styles in your own css.
All the teamplate chunks used by BookmarkThis can be customised by making your own one with the same name.
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>
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>
Each set of follow buttons are rendered using a chunk named BookmarkThisFollowWrapper, as defined by the tplWrapper
property.
<p class="bookmarkThisFollow">[[+items]]</p>