vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=307814

Social Buttons with Short Share URL
by iBinJubair
01 Feb 2014 22:06

2 Attachment(s)
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:

http://www.vbulletin.org/forum/attac...hmentid=148043

http://www.vbulletin.org/forum/attac...hmentid=148044



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

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.


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

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View 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

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.



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

GamerUnguided 02 Feb 2014 13:43

Sweet :) just what i was looking for, thanks for this .... guaranteed that this is installed

heredia21 03 Feb 2014 11:52

Perfect! Thanks for sharing, works well on mobile devices as well.

crystalduna 25 Feb 2014 14:57

When I click conversion_toolbar it wont let me customize it

bxb 07 Mar 2014 20:02

Works, thanks a bunch! VB5.0.5

ecihanuysal 17 Mar 2014 12:43

works, thank you so mch

Macgiber 28 Apr 2014 03:45

thanks

fionix 21 May 2014 17:51

Any udate for the latest version 5.1.1 ? it seems this line we have to find isn't there any longer.

Thanks.

Daryn 21 May 2014 23:18

Tested and works on 5.1.1.

It seems like though it sends the right URL's to Facebook, the title it sends out as a share is pretty generic. Will fiddle some more with that.

Razgritz 24 Jun 2014 09:27

This work.

DisasterDotCom 21 Jul 2014 15:45

Works in 5.1.2 (and the line is there). Thanks!

badawidollah 26 Jul 2014 21:04

<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://www.xxx.org/node/{vb:raw nodeid}&layout=button_count&action=like&show_faces=false&share=true&width=135&he ight=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://www.xxx.org/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://www.xxx.org/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>

kehindelawal 30 Jul 2014 10:18

Quote:

Originally Posted by badawidollah (Post 2508385)
<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://www.xxx.org/node/{vb:raw nodeid}&layout=button_count&action=like&show_faces=false&share=true&width=135&he ight=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://www.xxx.org/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://www.xxx.org/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>

i made a mistake! Maybe i didnt. leaving the bolded did not work for my site(G+). however if i change the bolded to platform.js everything works fine. am not sure which .js google want people to use. in the snippet it was platform.js however in their documentation it is plusone.js.

any way if gplus one does not work for you just substitute the .js and see if it will work.

Jean Pierre 06 Nov 2014 21:32

It works for 5.1.4 thanks :D

gfran5 23 Nov 2014 13:39

Works great in 5.1.1 :D


All times are GMT. The time now is 20:49.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2017, vBulletin Solutions Inc.
Copyright ©2001 - , vbulletin.org. All rights reserved.