A PHP MODX Revolution extra to generate social bookmarklets and links

Last modified: 20/07/2015 - 1 year, 8 months ago

Requirements: MODX Revolution 2.2+ | PHP5+

Download: MODX Installer | MODX Extras Repository | GitHub

A project tagged as: modx, plugin

Twitter Google+ Facebook Reddit

Overview

BookmarkThis uses two snippets to display social bookmarklets and follow-me links. Each snippet can be customised using the properties 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.
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

Sharing

The BookmarkThis snippet displays a set of social bookmarklets that a visitor can use to share your page.

Default example

By default, BookmarkThis will display all the bookmarklets from its default data chunk. Only items with a share property in the data chunk will be shown.

Google+ Delicious Digg Facebook Google LinkedIn StumbleUpon Twitter Reddit Newsvine E-mail
[[!BookmarkThis]]

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.

Twitter Facebook Google+ Reddit
[[!BookmarkThis?
    &use=`twitter, facebook, googleplus, reddit`
]]

Changing the size

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

Twitter Facebook Google+ Reddit
[[!BookmarkThis? 
    &use=`twitter, facebook, googleplus, reddit`
    &size=`48`
]]

Altering the style

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

Google+ Delicious Digg Facebook Google LinkedIn StumbleUpon Twitter Reddit Newsvine E-mail
[[!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.

Google+ Delicious Digg Facebook Google LinkedIn StumbleUpon Twitter Reddit Newsvine E-mail
[[!BookmarkThis? 
    &appendJS=`0`
    &appendCSS=`0`
    &type=`custom`
    &size=`48`
]]

Following

The BookmarkThisFollow snippet displays a set of follow-me links to send a visitor to your own social networks.

BookmarkThisFollow uses many of the main BookmarkThis properties. It is common for a website to have only one set of follow-me links. If this is the case, you could call this snippet un-cached, where as the BookmarkThis snippet would always be called cached.

Default example

By default, BookmarkThisFollow will display all the items from the data chunk where a follow property is shown.

Google+FacebookLinkedInTwitterPinterestGithub

[[BookmarkThisFollow]]

The data chunk

BookmarkThis can be customised by creating your own data chunk. This means you can set your own custom images, follow-me links and share bookmarklets.

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

Default data

By default, BookmarkThisFollow will display all the bookmarklets from its default data chunk.

{
  "googleplus":{
      "name" : "Google+",
      "share" : "https://plus.google.com/share?url={link}",
      "follow" : "https://plus.google.com/",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/googleplus-{type}.png"
    }, 
  "delicious":{
      "name" : "Delicious",
      "share" : "https://delicious.com/save?v=5&noui&jump=close&url={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/delicious-{type}.png"
    }, 
  "digg":{
      "name" : "Digg",
      "share" : "http://digg.com/submit?phase=2&url={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/digg-{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.5/{size}/facebook-{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.5/{size}/google-{type}.png"
    }, 
  "linkedin":{
      "name" : "LinkedIn",
      "share" : "http://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.5/{size}/linkedin-{type}.png"
    }, 
  "stumbleupon":{
      "name" : "StumbleUpon",
      "share" : "https://www.stumbleupon.com/badge?url={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/stumbleupon-{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.5/{size}/twitter-{type}.png"
    }, 
  "reddit":{
      "name" : "Reddit",
      "share" : "http://reddit.com/submit?url={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/reddit-{type}.png"
    }, 
  "newsvine":{
      "name" : "Newsvine",
      "share" : "https://www.newsvine.com/_tools/seed?popoff=0&u={link}&title={title}",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/newsvine-{type}.png"
    }, 
  "pinterest":{
      "name" : "Pinterest",
      "follow" : "https://www.pinterest.com/",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/pinterest-{type}.png"
    }, 
  "github":{
      "name" : "Github",
      "follow" : "https://github.com/",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/github-{type}.png"
    }, 
  "email":{
      "name" : "E-mail",
      "share" : "mailto:?subject={title}&body={link}",
      "image" : "{bookmarkthis_assets_url}/images/v1.5/{size}/email-{type}.png"
    }
}

Adding your own style

BookmarkThis can be customised by extending the default styles.

Simply use the BookmarkThis style in your own style-sheet.

Default CSS

.bookmarkThisShare>img, .bookmarkThisShare>a, .bookmarkThisFollow>a
{
  margin: 3px;
  cursor: pointer;
}

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

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

.bookmarkThisShare img
{
  opacity: 0.4;
  filter: alpha(opacity=40);
}

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

.bookmarkThisShare, .bookmarkThisFollow
{
  text-align: center;
  padding-top: 20px;
}

Templates

BookmarkThis uses chunks to template the output.

Default template

BookmarkThisShare is the tpl chunk for each item.

<img [[+custom]] title="Share this page on [[+name]]" src="[[+image]]" alt="[[+name]]" onclick="return BookmarkThis.share('[[+share]]', this);" />

Wrapper template

BookmarkThisShareWrapper is the tplWrapper chunk that wraps all the items.

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

Default template

BookmarkThisFollow is the tpl chunk for each item.

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

Wrapper template

BookmarkThisFollowWrapper is the tplWrapper chunk that wraps all the items.

<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 license may be available by contacting me.