Show Thread Enhancements - Social Buttons with Short Share URL

Description:
This Modification will help you to add social buttons in thread conversation toolbar

• using your site short urls e.g. http://example.com/node/xxxx
• using original social buttons code
• only one template modification
• supporting vb5 responsive style
• supporting LTR and RTL style
• supporting style variables

Screenshots:







Instructions:

• Open your site [Admin CP]
• Go to [Styles & Templates] > [Search Templates]
• Select your style from [Search in Style]. Put the following code in [Search for Text] and press [Find] button
  

  <vb:if condition="!empty($showSubscriberFilter)">

• Select the template named [conversation_toolbar]
• Find the above line in the [conversation_toolbar] template code as shown bellow
  

  ... ... ...
  ... ... ...
        </vb:if>
      </ul>
    </div>
  
    <vb:if condition="!empty($showSubscriberFilter)">
      <vb:comment>
        This form will be hidden and will not be shown at all but this will be programmatically used for paginating and sorting the Subscriber header 'Last Activity' in Subscription widget.
      </vb:comment>
  ... ... ...
  ... ... ...

• Add the the following code above the red line
• Note 1: You must replace "EXAMPLE.COM" with your website naked domain. There are 3 links.
• Note 2: If your vBulletin files installed inside a folder, add the folder. e.g. example.com/vb
  

  <vb:comment>START of Social Buttons Code</vb:comment>
  <vb:if condition="$page['view'] == 'thread'">
  	<style>
  		.share-buttons { float:{vb:stylevar left}; position:relative; padding:8px 10px; height:20px; margin-top:-37px; }
  		.share-buttons.withRB { margin-{vb:stylevar left}:150px; }
  		.share-buttons iframe { float:{vb:stylevar left}; border:none; height:20px; }
  		.share-buttons .facebook { width:135px; }
  		.share-buttons .twitter { width:90px; }
  		.share-buttons #___plusone_0 { width:72px !important; float:{vb:stylevar left} !important; }
  		@media only screen and (max-width:767px) { .share-buttons.withRB { margin-{vb:stylevar left}: 100px; } }
  		@media only screen and (max-width:636px) { .share-buttons { float: none; border: {vb:stylevar toolbar_border}; background:{vb:stylevar toolbar_background}; margin: 0; } .share-buttons.withRB { margin: 0; } }
  	</style>
  	<div class="share-buttons<vb:if condition="(isset($showReplyBtn) AND $showReplyBtn) OR (isset($showAll) AND $showAll) OR $showVmBtn"> withRB</vb:if>">
  {vb:set starterRoute, {vb:raw conversation.starterroute}}
  {vb:set starterPost.nodeid, {vb:raw conversation.starter}}
  {vb:set threadurl, {vb:url {vb:raw starterRoute}, {vb:raw starterPost}}}
  		<iframe class="facebook" src="//www.facebook.com/plugins/like.php?href=http://EXAMPLE.COM/node/{vb:raw nodeid}&layout=button_count&action=like&show_faces=false&share=true&width=135&height=20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  		<iframe class="twitter" src="//platform.twitter.com/widgets/tweet_button.html?text={vb:raw conversation.title}%0A&url=http://EXAMPLE.COM/node/{vb:raw nodeid}&counturl={vb:raw threadurl}" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  		<div class="g-plusone" data-size="medium" data-width="68" data-href="http://EXAMPLE.COM/node/{vb:raw nodeid}"></div>
  		<script type="text/javascript">(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = '//apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
  	</div>
  </vb:if>
  <vb:comment>END of Social Buttons Code</vb:comment>

Tags: Social, Share, button, buttons, Facebook, Twitter, Google+, Google Plus, Thread, Short, URL, Link

[vb_nils]

Hello,

THose buttons are not asynchronous.
Bellow you will found the code for making them asynchronous (note that I didn't include G+ but can be added).

<vb:comment>START of Social Buttons Code - VT</vb:comment>
<vb:if condition="$page['view'] == 'thread'">
	<style>
		.share-buttons { float:{vb:stylevar left}; position:relative; padding:8px 10px; height:20px; margin-top:-37px; }
		.share-buttons.withRB { margin-{vb:stylevar left}:150px; }
		.share-div { float:{vb:stylevar left}; border:none; height:20px; margin-right:10px; }
		@media only screen and (max-width:767px) { .share-buttons.withRB { margin-{vb:stylevar left}: 100px; } }
		@media only screen and (max-width:636px) { .share-buttons { float: none; border: {vb:stylevar toolbar_border}; background:{vb:stylevar toolbar_background}; margin: 0; } .share-buttons.withRB { margin: 0; } }
	</style>
	<div class="share-buttons<vb:if condition="(isset($showReplyBtn) AND $showReplyBtn) OR (isset($showAll) AND $showAll) OR $showVmBtn"> withRB</vb:if>">
{vb:set starterRoute, {vb:raw conversation.starterroute}}
{vb:set starterPost.nodeid, {vb:raw conversation.starter}}
{vb:set threadurl, {vb:url {vb:raw starterRoute}, {vb:raw starterPost}}}
		<div class="share-div fb-like" data-href="http://EXAMPLE.COM/node/{vb:raw nodeid}" data-layout="button" data-action="recommend" data-show-faces="false" data-share="true"></div>
		<div class="share-div"><a href="https://twitter.com/share" class="twitter-share-button twitter"></a></div>
		<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>
		<script>window.twttr = (function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};
			if (d.getElementById(id)) return t;
			js = d.createElement(s);
			js.id = id;
			js.src = "https://platform.twitter.com/widgets.js";
			fjs.parentNode.insertBefore(js, fjs);

			t._e = [];
			t.ready = function(f) {
				t._e.push(f);
			};

			return t;
		}(document, "script", "twitter-wjs"));</script>
	</div>
</vb:if>
<vb:comment>END of Social Buttons Code</vb:comment>

[Haiwan88]

does it work with vb 5.1.9 ?

[shimei]

Some reason, the facebook like and share buttons no longer display on my site. Only the tweet or google + 1 does. Version 5.1.9 ....

To note, it was working fine, did Facebook make a change?

[friendlymela]

Its useful thanks

[DemOnstar]

This one works well on 5.1.9.
I would prefer the little + symbol on the end to give people multiple choice though. It will save room in the toolbar.
I will try that one myself.

Thanks for your effort. . .

https://vborg.vbsupport.ru/attachmen...1&d=1446998119

[Hectorsky]

works fine , thanks

[jnabird333]

Looks like Google Plus changed their code so that doesn't work. I actually prefer @VB_Nils code but am having trouble getting the facebook buttons in english. v5.1.9

[jnabird333]

Does anyone know how to force or change the image that Facebook grabs on shared threads? This mod works great for me but the Facebook post grabs my logo in the header which isn't a 1:1 ratio so it looks crappy on Facebook.

Example Attached

[hakancik]

5.1.10 doesn't work

[Hectorsky]

On vb 5.2 doesn't work