BookmarkThis

Display social share and follow buttons

MODX 2.2+
PHP 5+
jQuery 3+

Bootstrap 3+

MODX Extras
GitHub

modx php plugin

Overview

BookmarkThis displays inline social share and follow buttons on your website. The BookmarkThis package includes very light weight CSS and JavaScript. It is fully customisable, allowing you to add your own links and icons.

Use BookmarkThis to display inline social share buttons. By default, all the buttons are shown, where a share property has been set.

[[!BookmarkThis]]

Follow

Use BookmarkThisFollow to display inline social follow buttons. By default, all the buttons are shown, where a follow property has been set.

[[BookmarkThisFollow]]

Options

The BookmarkThis method applies social share buttons. Their appearance can be customised using the options shown below.

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 BookmarkThisFollow method applies social follow buttons. Their appearance can be customised using the options shown below.

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

Examples

Including only certain items

The use property allows you to specify which items to show. Items returned will be in the same order that you specify them.

[[!BookmarkThis? &use=`twitter, facebook, reddit, pocket`]]

Excluding certain items

The exclude property allows you to specify which buttons to exclude from the default ones.

[[BookmarkThisFollow? 
  &exclude=`github,youtube`
  &style=`square`
]]

Changing the size

The size property allows you set the size of the icons. size will replace the {size} placeholder for each button. If using the default icons, you can currenlty choose from 16, 36, 48 and 64.

[[!BookmarkThis? 
  &use=`twitter, facebook, reddit, pocket`
  &size=`48`
]]

Altering the style

The type property allows you set the style of the icons. type will replace the {type} placeholder for each button. If using the default icons, you can currently choose from rounded, square, custom and circle.

[[!BookmarkThis? 
  &type=`circle`
  &size=`48`
]]

Including your own JS and CSS

A reference to the default BookmarkThis JavaScript file is automatically appended to the header of your document, and a reference to the default BookmarkThis style-sheet is appended to the body of your document.

However, you may not like too many calls being made. If you have incorporated the JS and CSS files into your own files, you can stop BookmarkThis appending them too.

[[!BookmarkThis? 
  &appendJS=`0`
  &appendCSS=`0`
  &type=`custom`
  &size=`48`
]]

Button data

BookmarkThis uses the following data when displaying the share and follow buttons. Use this as a starting point if you want to add your own butttons.

Custom button data on MODX?

Simply create a new chunk called bookmarkThisData and fill it with your own data.

Default data

{
  "blogger":{
      "name" : "Blogger",
      "share" : "https://www.blogger.com/blog-this.g?u={link}&n={title}",
      "follow" : "https://www.blogger.com/",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/blogger-{type}.png"
    },
  "digg":{
      "name" : "Digg",
      "share" : "https://digg.com/submit?url={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/digg-{type}.png"
    },
  "evernote":{
      "name" : "Evernote",
      "share" : "https://www.evernote.com/clip.action?url={link}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/evernote-{type}.png"
    },
  "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"
    },
  "flipboard":{
      "name" : "Flipboard",
      "share" : "https://share.flipboard.com/bookmarklet/popout?v=2&title={title}&url={link}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/flipboard-{type}.png"
    },
  "github":{
      "name" : "Github",
      "follow" : "https://github.com/",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/github-{type}.png"
    }, 
  "google":{
      "name" : "Google",
      "share" : "https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk={link}&title={title}&labels={tags}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/google-{type}.png"
    },
  "instagram":{
      "name" : "Instagram",
      "follow" : "https://www.instagram.com/",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/instagram-{type}.png"
    }, 
  "linkedin":{
      "name" : "LinkedIn",
      "share" : "https://www.linkedin.com/shareArticle?mini=true&ro=false&trk=bookmarklet&title={title}&url={link}",
      "follow" : "https://www.linkedin.com/",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/linkedin-{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"
    },
  "pocket":{
      "name" : "Pocket",
      "share" : "https://getpocket.com/save?url={link}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/pocket-{type}.png"
    },
  "reddit":{
      "name" : "Reddit",
      "share" : "https://reddit.com/submit?url={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/reddit-{type}.png"
    }, 
  "telegram":{
      "name" : "Telegram",
      "share" : "https://t.me/share/url?url={link}&text={title}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/telegram-{type}.png"
    },
  "tumblr":{
      "name" : "Tumblr",
      "share" : "https://www.tumblr.com/widgets/share/tool?canonicalUrl={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/tumblr-{type}.png"
    },
  "twitter":{
      "name" : "Twitter",
      "share" : "https://twitter.com/intent/tweet?text={title}&url={link}",
      "follow" : "https://twitter.com/",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/twitter-{type}.png"
    },
  "vk":{
      "name" : "VK",
      "share" : "https://vk.com/share.php?url={link}",
      "follow" : "https://vk.com/",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/vk-{type}.png"
    },
  "youtube":{
      "name" : "Youtube",
      "follow" : "https://www.youtube.com/",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/youtube-{type}.png"
    }, 
  "email":{
      "name" : "E-mail",
      "share" : "mailto:?subject={title}&body={link}",
      "image" : "{bookmarkthis_assets_url}images/v1.8/{size}/email-{type}.png"
    }
}

Adding your own style

All styles are prefixed with bookmarkThis or bookmarkThisFollow. Simply extend these styles in your own css.

Default CSS

.bookmarkThisFollow a
{
  display: inline-block;
}

.bookmarkThisShare>img, .bookmarkThisFollow>a
{
  margin: .2rem;
  cursor: pointer;
}

.bookmarkThisShare>img:first-child, .bookmarkThisFollow>a:first-child
{ 
  margin-left: 0;
}

.bookmarkThisShare>img:last-child, .bookmarkThisFollow>a:last-child
{ 
  margin-right: 0;
}

.bookmarkThisShare img
{
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.bookmarkThisShare img:hover
{
  opacity: 1;
  filter: alpha(opacity=100);
}

.bookmarkThisShare, .bookmarkThisFollow
{
  text-align: center;
}

Templates

Each individual button and group of buttons are rendered by a template.

Individual button

Each share button is rendered using a template 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);" />

Group of buttons

Each group of share buttons are rendered using a template named BookmarkThisShareWrapper, as defined by the tplWrapper property.

<p class="bookmarkThisShare">[[+items]]</p>

Follow

Individual button

Each follow button is rendered using a template named BookmarkThisFollow, as defined by the tpl property.

<a href="[[+follow]]" title="Follow us on [[+name]]" rel="nofollow"><img src="[[+image]]" alt="[[+name]]" /></a>

Group of buttons

Each group of follow buttons are rendered using a template named BookmarkThisFollowWrapper, as defined by the tplWrapper property.

<p class="bookmarkThisFollow">[[+items]]</p>

Licence

BookmarkThis by mad about brighton is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Permissions beyond the scope of this licence may be available by contacting me.