AddThis

AddThis class - a working experiment

NOTE: I'm still working on this one, so the contents of this article are not really meant as a tutorial.

Based on the main article, the idea is now to create an AddThis object that takes care of showing the plugin in one of the three basic layouts.  I want to be able to

  • set the AddThis id (based on the user's AddThis account, if any)
  • select from 3 templates, (still need to provide a way to add templates dynamically, choice is now hardcoded in Load()...
  • show or hide the counter in the 'preferred' setting (just for the fun of it
  • choose between a global setting or using shortcodes for selected pages? Again many thinkable options
  • generate the plugin using JavaScript (jQuery) so the page validates
  • don't show on the login page :-(

As always, there are a many ways to do this. This is just some example that, for time being, works for me.

Two templates

The template is basically the same for both versions of the 'preferred buttons' setup (let's call them 'small' and 'large'). The only difference is an extra class 'addthis_32x32_style' being added to the surrounding div. So we only need the one template for it:

AddThis_Preferred.ss

<div class="addthis_toolbox addthis_default_style $getExtraClass"
     addthis:url="{$AbsoluteLink}">
	<a class="addthis_button_preferred_1"></a>
	<a class="addthis_button_preferred_2"></a>
	<a class="addthis_button_preferred_3"></a>
	<a class="addthis_button_preferred_4"></a>
	<a class="addthis_button_compact"></a>
	<% if ShowCounter %>
		<a class="addthis_counter addthis_bubble_style"></a>
	<% end_if %>
</div>

The second template is slightly different. This is the one that shows the Facebook like button, the Tweet button and the Google+. I've called this layout 'custom'.

AddThis_Custom.ss

<div class="addthis_toolbox addthis_default_style " addthis:url="{$AbsoluteLink}">
	<a class="addthis_button_facebook_like" fb:like:layout="button_count"
	                                        fb:like:width="120"
	                                        fb:like:href="{$AbsoluteLink}"></a>
	<a class="addthis_button_tweet" tw:url="{$AbsoluteLink}"></a>
	<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
	<a class="addthis_counter addthis_pill_style"></a>
</div>

AbsoluteLink
Note that I've added a $AbsoluteLink variable, that is in fact a property of the page we're on. We cannot use $Top.AbsoluteLink here, that works for DataObjectSets the Page_Controller provides. In this setup thnk more along the lines of a Form: it too needs to be fed the controller of the page it lives on. In this case, just before rendering itself, The AddThis object will call Controller::curr()  to get the page controller and obtain its AbsoluteLink

The AddThis class

I've decided not to create any settings in the CMS this time. There will only be a couple of static functions to add to the _config file. The only basic functionality I expect from the AddThis class is that it can render itself - so it needs to extend ViewableData. And to render itself - it needs to know the AbsoluteLink of the page it's on.

AddThis.php

<?php
/**
 *  AddThis
 *  03-02-2012
 *
 *  Enable AddThis on this site (requires code: the id that is included in
 *  the javascriptcall, dependent on the useraccount at AddThis.
 *  Can be set from _config: AddThis::set_id('xx-xxxxxxxxxxxxxxxx');
 *
 *  Set the layout to small, large or custom and
 *  switch the counter on/off (preferred only) with:
 *  set_layout($layout = 'small', $counter = true)
 *
 *  @author: M. Bloem, Balbus Design
 */
class AddThis extends ViewableData {


	/*
	 *  Add an extra class to the AddThis div  (layout -> large!)
	 */
	protected $extraClass = '';


	/*
	 *  The absoluteLink
	 */
	public $AbsoluteLink = '';


	/*
	 *  global (true) or shortcode(false)
	 */
	protected static $global = true;



	/*
	 *  The id provided with the AddThis, depending on your AddThis account
	 */
	protected static $id = '';


	/*
	 *  How to display the buttons - equivalent to the 3 basic choices
	 *  you get with AddThis:
	 *  - small: preferred buttons, small
	 *  - large: preferred buttons, large
	 *  - custom: facebook like, tweet, google+ and AddThis
	 */
	protected static $layout = 'small';


	/*
	 *  Show the counter (in a preferred layout)
	 */
	protected static $counter = true;


	/*
	 *  Enable global display (false enables individual page setting <=> shortcode)
	 */
	public static function set_global($enabled = true){
		self::$global = ($enabled)? true: false;
	}

	/*
	 *  Enable sitewide display
	 */
	public static function is_global(){
		return self::$global;
	}


	/*
	 *  Set the id
	 */
	public static function set_id($id){
		self::$id = $id;
	}


	/*
	 *  get the id
	 */
	public static function get_id($id){
		return self::$id;
	}

	/*
	 *  Set the layout, and if a counter should display on preferred layouts
	 */
	public static function set_layout($layout = 'small', $counter = true) {
		if ($layout) self::$layout = $layout;
		self::$counter = (!empty($counter))? true: false;
	}


	/*
	 * Shortcodehandler: use [share] anywhere in the content
	 * ShortcodeParser::get('default')->register('share', array('AddThis' ,'AddThisShortcodeHandler'));
	 */
	public static function AddThisShortcodeHandler($arguments) {
		if (self::$id && !self::$global) {
			$addthis = new AddThis();
			return $addthis->Load();
		}
	}


 	/*
	 *  instantiate and return an AddThis Object. Called from
	 *  template $AddThis/Page_Controller::AddThis() if setting is global
	 */
	public static function get_global() {
		if (self::$id && self::$global) {
			$addthis = new AddThis();
			return $addthis->Load();
		}
		return '';
	}


	/*
	 *  show counter on preferred layouts? true - false
	 */
	public function ShowCounter(){
		return (self::$counter)? true: false;
	}

	/*
	 *  return an extra class (layout = large)
	 */
	public function getExtraClass() {
		return $this->extraClass;
	}


	/*
	 *  return the AddThis id  (xx-xxxxx...)
	 */
	public function AddThisID() {
		return self::$id;
	}


	/*
	 *  load AddThis into the page
	 */
	public function Load() {
		if ($id = self::$id) {

			// set the class for large layout
			if (self::$layout == 'large') $this->extraClass = 'addthis_32x32_style';

			// jQuery to load AddThis dynamically (validate!!)
			Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery-packed.js');

			//javascript
			Requirements::javascript("http://s7.addthis.com/js/250/addthis_widget.js#pubid={$id}");

			Requirements::customScript(<<<JS
				addthis_config={
					ui_cobrand: "MyBrand",
					ui_header_color: '#fff',
					ui_header_background: '#bc9f75'
				}
JS
			);

			// use a selection of templates
			switch (self::$layout) {
				case 'small': $template = 'AddThis_Preferred'; break;
				case 'large': $template = 'AddThis_Preferred'; break;
				case 'custom': $template = 'AddThis_Custom'; break;
			}
			
			$this->AbsoluteLink = Controller::curr()->AbsoluteLink();
			$addthis = $this->renderWith(array($template));
		
			$addthis = str_replace(array("\r\n", "\n", "\r"), '', $addthis);

			Requirements::customScript(<<<JS
				(function($){
					$(document).ready(function(){
						$("#Social").html('{$addthis}');
					});
				})(jQuery);
JS
			);


		}
		return '<div id="Social"></div>';
	}
}

Load()
The Load() function selects the proper template and renders it. It then adds the rendered string to the jQuery custom script that will load the plugin into a <div id="Social"></div>. This way the page will validate - if the plugin were to be hardcoded into the template, it wouldn't. Note that after rendering the template, all carriage returns are removed. This will create a single string, that can fit nicely into the custom javascript

Getting it to work:

In _config.php

// set AddThis id
AddThis::set_id('ra-xxxxxxxxxxxxxxxx');

// optional set different layout: small, large, custom (default = small, true)
AddThis::set_layout('small', true);

// optional: disable global setting to enable shortcodes (default=true)
// AddThis::set_global(false);

// optional: enable the shortcode handler if you want
//ShortcodeParser::get('default')->register('share', array('AddThis' ,'AddThisShortcodeHandler'));

This will set the AddThis id, and the template to be used. Based on the global setting, the plugin will either be used globally on every page (true), or wherever you want, using a shortcode (global=false).

In the Page Controller

function AddThis() {
	if ($this->URLSegment != 'Security') return AddThis::get_global();
}

Note that I added a checkso AddThis won't show on the login page. It is a simple check, because I haven't found a good alternative yet...this can sit in the Page_Controller even if you don't want to use AddThis, because only the settings in _config will enable the pluin.

In the page template:

...
$AddThis

Use a decorator??

Would be nice if there was no need for the AddThis function in the Page controller. One way would be to use a decorator. Maybe something like this?

In your AddThis.php:

class AddThis_Controller extends Extension {

	function AddThis() {
		if ($this->owner->URLSegment != 'Security') return AddThis::get_global();
	}
}
Now you'd enable the decorator in your _config, and that would be it:
DataObject::add_extension('Page_Controller', 'AddThis_Controller');

I often use one Decorator for all kinds of basic stuff for a site. It keeps the clutter from the page. There are some rumours that say lots of decorators slow the page down. But hey, one...

Comments

Het versturen van reacties is uitgeschakeld.

RSS feed voor reacties op deze pagina