Jump to content
vBWarez - Rest In Peace

Social Buttons with Short Share URL

Recommended Posts

[B][COLOR="#FF0000"]vB Version: 5.0.1[/COLOR][/B]

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

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





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

[CODE]<vb:if condition="!empty($showSubscriberFilter)">[/CODE]

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

[CODE] ... ... ...
... ... ...

<vb:if condition="!empty($showSubscriberFilter)">
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.
... ... ...
... ... ...[/CODE]

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

[CODE] <vb:comment>START of Social Buttons Code</vb:comment>
<vb:if condition="$page['view'] == 'thread'">
.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; } }
<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>
<vb:comment>END of Social Buttons Code</vb:comment>[/CODE]

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

Edited by Zombie
Link to post
Share on other sites
  • 4 months later...
  • 3 weeks later...
  • 4 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...