Skip to content

madaboutbrighton/bookmarkthis

Repository files navigation

BookmarkThis

BookmarkThis

A MODX Revolution extra to display social share and follow buttons

website · bugs · requests

Contents

About The Project

BookmarkThis Screen Shot

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

  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.

Logo

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.

Logo

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.

Logo

Changing the size

The size property allows you set the size of the buttons. You can currenlty choose from 16, 36, 48 and 64.

Logo

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

Logo

Custom icons

Logo

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>