madaboutbrighton/bookmarkthis

A MODX Revolution extra to display social share and follow buttons

BookmarkThis

A MODX Revolution extra to display social share and follow buttons

website · bugs · requests

Contents

• About The Project
• Installation
• Usage
• Examples
• Options
• Customise

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

• MODX

Installation

1. Log-in to your MODX Manager
2. Go to the Insaller
3. 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>