[7.5.8] Shareaholic Bar v0.3 (2013.12.07)

Author: Gizmo (James of VNC Web Design)

Requirements:
Valid UBB.Threads 7.5.8 install and license as well as a Shareaholic account as you'll need to setup your site for use with their bar (through Publisher Tools).

About:
I rather detest the built in Facebook/Twitter "like" buttons, so I poked around for a replacement and stumbled on Shareaholic which is a service which lets you display a listing of "share" buttons for content (which you can see running here above the "Quick Reply" box and on A Gardeners Forum).

Note: The "Thread View" portion of the initial modification is in the stock version of UBB.Threads 7.5.8; additional coding was added to 7.5.8 that this mod (in this thread) now relies on. If you're looking for the version pre-7.5.8 look here.

In the Control Panel (CP -> Display Options -> General -> HTML Includes Tab -> "Shareaholic 'Setup Code'") add:
Your "Shareaholic" setup code for your site.

To make this work at all you must complete this step, it is not optional (unlike several below):
In libs/html.inc.php"
Move:

Code

			// Determine the header insert contents
			if ($shareHeader) {
				$insert = @file_get_contents("{$config['FULL_PATH']}/includes/header-shareaholic.php");
				$shareinsert = ($insert === FALSE) ? '' : $insert;
				$headerinsert .= $shareinsert;
			}

Above:

Code

		// Special for diplaying a topic

To add a Shareaholic Bar to the "Category Index" page:
In scripts/cfrm.inc.php:
Find:

Code

	$smarty_data = array(

Add Above:

Code

	if (is_numeric($config['SHAREAHOLIC']) && $config['SHAREAHOLIC'] > 0) {
		$shareaholic = '<div class="shareaholic-canvas" data-app="share_buttons" data-app-id="' . $config['SHAREAHOLIC'] . '"></div>';
		$shareHeader = 1;
	}

Find:

Code

		'catrow' => & $catrow,

Add Below:

Code

		'shareaholic' => $shareaholic,

Find:

Code

			"refresh" => 0,

Add Below:

Code

			"shareHeader" => $shareHeader,

In templates/default/cfrm.tpl:
Find:

Code

{include file="forum.tpl" type="cfrm" catrow=$catrow forum=$forum}

Add Below:

Code

{if $shareaholic}
<div class="ubb-shareaholic">{$shareaholic}</div>
{/if}

To add a Shareaholic Bar to the "Post Listing" page:
In scripts/postlist.inc.php:
Find:

Code

	$smarty_data = array(

Add Above:

Code

	if (is_numeric($config['SHAREAHOLIC']) && $config['SHAREAHOLIC'] > 0) {
		$shareaholic = '<div class="shareaholic-canvas" data-app="share_buttons" data-link="' . make_ubb_url("ubb=postlist&Board=$Board&page=1", $forum_title, true) . '" data-app-id="' . $config['SHAREAHOLIC'] . '"></div>';
		$shareHeader = 1;
	}

Find:

Code

		"Title" => $Title,

Add Below:

Code

		"shareaholic" => $shareaholic,

Find:

Code

			"refresh" => 0,

Add Below:

Code

			"shareHeader" => $shareHeader,

In templates/default/postlist.tpl:

Code

<br />

{if $modlist}{$lang.USER_MOD}: {$modlist}{/if}

Add Above:

Code

{if $shareaholic}
<div class="ubb-shareaholic">{$shareaholic}</div>
{/if}

To add a Shareaholic Bar to the "Post Listing" page:
In scripts/activetopics.inc.php:
Find:

Code

	$smarty_data = array(

Add Above:

Code

	if (is_numeric($config['SHAREAHOLIC']) && $config['SHAREAHOLIC'] > 0) {
		$shareaholic = '<div class="shareaholic-canvas" data-app="share_buttons" data-app-id="' . $config['SHAREAHOLIC'] . '"></div>';
		$shareHeader = 1;
	}

Find:

Code

		"pages" => $pages,

Add Below:

Code

		"shareaholic" => $shareaholic,

Find:

Code

			"refresh" => 0,

Add Below:

Code

			"shareHeader" => $shareHeader,

In templates/default/activetopics.tpl:

Code

<div style="clear:both;"></div>

Add Below:

Code

{if $shareaholic}
<div class="ubb-shareaholic">{$shareaholic}</div>
{/if}

To add a Shareaholic Bar to the Portal page:
In scripts/portal.inc.php:
Find:

Code

	$smarty_data = array(

Add Above:

Code

	if (is_numeric($config['SHAREAHOLIC']) && $config['SHAREAHOLIC'] > 0) {
		$shareaholic = '<div class="shareaholic-canvas" data-app="share_buttons" data-app-id="' . $config['SHAREAHOLIC'] . '"></div>';
		$shareHeader = 1;
	}

Find:

Code

		"news" => $news,

Add Below:

Code

		"shareaholic" => $shareaholic,

Find:

Code

			"refresh" => 0,

Add Below:

Code

			"shareHeader" => $shareHeader,

In templates/default/portal.tpl:

Code

{/section}

Add Below:

Code

{if $shareaholic}
<div class="ubb-shareaholic">{$shareaholic}</div>
{/if}

Please leave your thanks below so we can know that we've helped you!

Works for me.. thanks..

Not for me.

I believe I followed the instructions correctly and was careful to keep permissions as they were.

Shareaholic site claims it can't verify because it can't find the code.

Originally Posted by PianoWorld

Not for me.

I believe I followed the instructions correctly and was careful to keep permissions as they were.

Shareaholic site claims it can't verify because it can't find the code.

That's actually an issue outside of this mod; their validation pages validate your site based on the landing page of your web root having the shareaholic code in place and as the default coding does not apply it to the cfrm or portal pages it'll never be on your landing page (unless you add it manually).

If you have a webpage at your web root, the landing page there would also need the shareaholic bar header code.

For note, the share bar works even if you don't verify your site; I have one site that was the original modded site that has never been "verified" and their techs can't figure out why it won't verify.

Thanks, I'll try dropping the code in my sites root/index page.

I'm still not getting the share buttons to show up though, likely something I missed.
I'll work through the instructions again and double check the code.

Dumb question, you have inserted your affiliate id into the UBB CP? The checks on this code require that individual check as well. You can find that:
CP -> Display Options -> General -> Primary Tab -> Topic Display Options Section -> Your Shareaholic ID Option

Got it working.

Thanks.

Now I just need to figure out how to remove the old Twitter / Facebook buttons/code.

I see they are showing up in the view source as:

HTML

<div class="fb-twitter-share">
<script src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/share?url=http://www.pianoworld.com/forum/ubbthreads.php/topics/2195274.html&via=PianoWorld" class="twitter-share-button" data-related="PianoWorld">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.pianoworld.com/forum/ubbthreads.php/topics/2195274.html&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=24" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:24px;" allowTransparency="true"></iframe>
</div>
<div class="ubb-shareaholic"><div class="shareaholic-canvas" data-link="http://www.pianoworld.com/forum/ubbthreads.php/topics/2195274.html" data-app="share_buttons" data-app-id="4681955"></div></div>

But I'm not sure where to go to kill the old buttons and rely on the new shareaholic.

Well, that's pretty easy, simply turn them off in the Control Panel:
CP -> Display Options -> General -> Primary Tab -> Topic Display Options ->
"Show Facebook 'Like' Button"
"Show Tweet Button"

To remove the extra 10px paddings surrounding the Shareaholic bar, add the following code to your style sheet.

Admin/Control Panel > Styles > Edit [YOUR STYLE] > Extra Properties

Code

.shareaholic-canvas .shareaholic-share-buttons-container .shareaholic-share-buttons-wrapper ul.shareaholic-share-buttons {
	margin: 0 auto !important;
	padding: 0px 0px 0px 0px !important;
}

OR add it to the bottom of your styles/common.css file to apply the change to all styles.

Originally Posted by Gremelin

Well, that's pretty easy, simply turn them off in the Control Panel:
CP -> Display Options -> General -> Primary Tab -> Topic Display Options ->
"Show Facebook 'Like' Button"
"Show Tweet Button"

Seriously? Ok, now I'm embarrassed.

Originally Posted by PianoWorld

Seriously? Ok, now I'm embarrassed.

'eh, don't be... When I get the word these features make it into the CP I generally ask that they put a CP hook in to enable/disable things...

Unfortunately how Rick chose to implement the FB/Tweet buttons wasn't how I had envisioned it, I hoped over the years that he would have expanded it lol. The Shareaholic bar is generally what I had hoped for.

Originally Posted by id242

To remove the extra 10px paddings surrounding the Shareaholic bar, add the following code to your style sheet.

Yup, there is also an added class in common.css as of the 7.5.8 addition of:

Code

.ubb-shareaholic { margin:4px 0; }

Originally Posted by Gremelin

Yup, there is also an added class in common.css as of the 7.5.8 addition of:

I noticed that, but the ".ubb-shareaholic" css only handles the margin pertaining to the DIV code as it relates to UBB and it does not override the imbedded "padding-top:10px!important;padding-bottom:10px!important;" which is inside the Sharaholic code.

Examples:
http://wordpress.org/support/topic/styling-shareaholic-social-media-plugin

Solution:
http://wordpress.org/support/topic/how-to-reduce-spacing-abovebelow-buttons

Ok, so I followed all the instructions for adding the Shareaholic buttons to the Post Listing page.

But now instead of getting the buttons, the post listings have disappeared, and no buttons.

Any suggestions, ideas?

I've gone over the code a number of times, but who knows.

Have you cleared the cache? Have you checked your server error logs to see if anything is being displayed after the change?

Cleared cache.
No SQL errors for 25th or 26th.

Not talking SQL errors, I'm talking about your webserver's error logs.

Problem solved, thanks to Gremelin.

And lesson learned. Amateur coders like me need to make good clean copies of all files before monkeying around with them.

Thanks Gremelin.

Not a problem... And always backups... lol