add share buttons to jquery plugin

Hi all,

I’ve integrated a nice little jquery “Thumbnail Grid with Expanding Preview” (from this tutorial) as a preview for my posts. I am now trying to integrate the ability to share posts from the preview area, currently with the “Simple Share Buttons” plugin (open to other options).

I’ve gone about it a couple of ways but mainly by attempting to append the plugin or manual share code to the div through the main JS file but I’m not fully sure how to do this.. See my current code below (from my modified “grid.js” file of the above tutorial):

First I tried simply calling the Simple Share Buttons div but nothing happens..

Preview.prototype = {
		create : function() {
			// create Preview structure:
			this.$title = $( '<h3></h3>' );
			this.$description = $( '<p></p>' );
			this.$href = $( '<a href="#">Learn More></a>' );
			this.$social = $( '<div id="ssba"></div>' );
			this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$social );
			this.$loading = $( '<div class="og-loading"></div>' );
			this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
			this.$closePreview = $( '<span class="og-close"></span>' );
			this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
			this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
			// append preview element to the item
			this.$item.append( this.getEl() );
			// set the transitions for the preview and the item
			if( support ) {
				this.setTransition();
			}
		},
		update : function( $item ) {

Then I tried appending the Simple Share Buttons short code

Preview.prototype = {
		create : function() {
			// create Preview structure:
			this.$title = $( '<h3></h3>' );
			this.$description = $( '<p></p>' );
			this.$href = $( '<a href="#">Learn More></a>' );
			this.$social = $( '<?php echo do_shortcode('[ssba]');  ?>' );
			this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$social );
			this.$loading = $( '<div class="og-loading"></div>' );
			this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
			this.$closePreview = $( '<span class="og-close"></span>' );
			this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
			this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
			// append preview element to the item
			this.$item.append( this.getEl() );
			// set the transitions for the preview and the item
			if( support ) {
				this.setTransition();
			}
		},
		update : function( $item ) {

If anyone has any ideas or could point me in the right direction I would really appreciate it. Thanks so much in advance.