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 21: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 12:43

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

heredia21 03 Feb 2014 10:52

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

crystalduna 25 Feb 2014 13:57

When I click conversion_toolbar it wont let me customize it

bxb 07 Mar 2014 19:02

Works, thanks a bunch! VB5.0.5

ecihanuysal 17 Mar 2014 11:43

works, thank you so mch

Macgiber 28 Apr 2014 02:45

thanks

fionix 21 May 2014 16: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 22: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 08:27

This work.

DisasterDotCom 21 Jul 2014 14:45

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

badawidollah 26 Jul 2014 20: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 09: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 20:32

It works for 5.1.4 thanks :D

gfran5 23 Nov 2014 12:39

Works great in 5.1.1 :D

[email protected] 23 Nov 2014 19:37

Nice little add-on, thanks! Works well with vBulletin 5.1.4.

gfran5 29 Nov 2014 12:31

Anyone know how to add this to the article (CMS) conversation bar?

classicrv 29 Jan 2015 17:18

Very nice! Seems to work well on 5.1.4. Thanks!!!

oxrageous 29 Jan 2015 18:46

Anyone have any idea how to adjust the code so these DO NOT show up on the floating bar?

fortunately102s 30 Jan 2015 00:00

Great, this is what I was looking for!

Red_Horse 31 Jan 2015 12:17

Works in 5.1.5
Thanks

drsmash 10 Feb 2015 13:51

Quote:

Originally Posted by gfran5 (Post 2524735)
Anyone know how to add this to the article (CMS) conversation bar?

any one have idea about that question , i need this urgently please !

classicrv 11 Feb 2015 16:32

Seems to be working well in 5.1.4. Thanks! :up:

justunboxing 16 Feb 2015 00:26

Quote:

Originally Posted by drsmash (Post 2536860)
any one have idea about that question , i need this urgently please !

You just need to edit the first line. Change this:

<vb:if condition="$page['view'] == 'thread'">

for this:

<vb:if condition="$page['view'] == 'thread' OR $page['view'] == 'stream'">

ceroalreves 18 Feb 2015 14:13

Tested en VB 5.1.5 it doesn't works u.u

DesignMVD 28 Mar 2015 07:26

Upgrade vb 5.1.6 please :)

TwinsForMe 28 Apr 2015 06:57

Can this be restricted to certain forums based on channel permissions? I have some private areas of the board where I wouldn't want this.

koko10ar 28 Apr 2015 19:57

Work fine in 5.1.6.

Great! :D

koko10ar 28 Apr 2015 20:10

In spanish forums replace this line:

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

for this:

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

because Like = "Me gusta" and Share = "Compartir" and 135 px cut the bottons.

Can you help me adding linkedin button?

Regards!

vb_nils 30 May 2015 08:52

Works well on 5.1.7.

For French, replace

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

by

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


vb_nils 30 May 2015 10:27

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).


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


Haiwan88 28 Aug 2015 01:34

does it work with vb 5.1.9 ?

shimei 20 Oct 2015 18:17

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 21 Oct 2015 10:30

Its useful thanks

DemOnstar 08 Nov 2015 14:55

1 Attachment(s)
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. . .

http://www.vbulletin.org/forum/attac...1&d=1446998119

Hectorsky 18 Nov 2015 14:43

works fine , thanks

jnabird333 14 Dec 2015 20:44

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 04 Jan 2016 16:23

1 Attachment(s)
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 07 Jan 2016 22:00

5.1.10 doesn't work

Hectorsky 23 Jan 2016 21:01

On vb 5.2 doesn't work

DemOnstar 26 Jan 2016 16:25

Quote:

Originally Posted by faustvasea97 (Post 2563302)
On vb 5.2 doesn't work

Which part doesn't work?

Hectorsky 26 Jan 2016 16:49

Quote:

Originally Posted by DemOnstar (Post 2563462)
Which part doesn't work?

There doesn't work nothing , idk why ,, I will try again, is that works for you?

DemOnstar 26 Jan 2016 17:51

Quote:

Originally Posted by faustvasea97 (Post 2563472)
There doesn't work nothing , idk why ,, I will try again, is that works for you?

The reason I ask is because the elements all go into position, so that works.
The Tweet aspect also works.. But Facebook, and Google+ have issues. . .

Hectorsky 26 Jan 2016 18:25

Quote:

Originally Posted by DemOnstar (Post 2563484)
The reason I ask is because the elements all go into position, so that works.
The Tweet aspect also works.. But Facebook, and Google+ have issues. . .

For me doesn't work nothing ,,,, idk why ...

DemOnstar 26 Jan 2016 18:37

1 Attachment(s)
Go to the style you want to add it to. Open the conversation_toolbar template in that style and delete all code there. Then copy and paste the code in the attachment into the conversation_toolbar and save.
Don't forget to change the site name for your site.

I am not sure yet what the node/xxxx stuff means yet.

Hectorsky 26 Jan 2016 19:42

Quote:

Originally Posted by DemOnstar (Post 2563490)
Go to the style you want to add it to. Open the conversation_toolbar template in that style and delete all code there. Then copy and paste the code in the attachment into the conversation_toolbar and save.
Don't forget to change the site name for your site.

I am not sure yet what the node/xxxx stuff means yet.

Thanks , already fixed :)
I just put code on wrong line

DemOnstar 26 Jan 2016 19:55

Quote:

Originally Posted by faustvasea97 (Post 2563494)
Thanks , already fixed :)
I just put code on wrong line

And how about Facebook and Google+?

Hectorsky 26 Jan 2016 20:03

Quote:

Originally Posted by DemOnstar (Post 2563495)
And how about Facebook and Google+?

are working ok , just changed a little bit on code there

DemOnstar 26 Jan 2016 20:16

Quote:

Originally Posted by faustvasea97 (Post 2563499)
are working ok , just changed a little bit on code there

Then it would be good to show me the code that you changed in order to make it work don't you think?

Thanks.

Hectorsky 26 Jan 2016 20:44

I will pm you

shimei 26 Jan 2016 21:27

Quote:

Originally Posted by DemOnstar (Post 2563501)
Then it would be good to show me the code that you changed in order to make it work don't you think?

Thanks.


I think it would be good for you to show others the code that was changed in order to make it work.

Thanks,
Secret Squirrel

Hectorsky 26 Jan 2016 23:28

Quote:

Originally Posted by shimei (Post 2563514)
I think it would be good for you to show others the code that was changed in order to make it work.

Thanks,
Secret Squirrel

there is not big deal, I just changed a the width a little bit and that's it

DemOnstar 28 Jan 2016 18:44

Quote:

Originally Posted by shimei (Post 2563514)
I think it would be good for you to show others the code that was changed in order to make it work.

Thanks,
Secret Squirrel

What would you say was contained within the attachment here. . .?

DemOnstar 03 Feb 2016 18:54

I tried this and a couple of others. I am sure it isn't the mod that is at fault but no images are pulled from the database when a link is posted to any of the sites.

I think this is related:

http://www.vbulletin.com/forum/forum...facebook-image

And this:
http://www.vbulletin.org/forum/showthread.php?t=320779

Basically, when an attachment is quoted or when a link is posted, no images are seen.
vB5 issue I am sure. . . Correct me if I am wrong. . .

bigbear83 21 Apr 2016 19:13

Working fine in 5.2.1

But just a quick question here -- how about if I wanted to have this show up in every post so that one could just use it to tweet a link to each individual post rather than tweet the first post of a thread? I tried tinkering around with this code but failed horribly LOL.

nakul 23 Jun 2016 07:48

Thank you so much. The website is looks really good with this.

KimK 11 Aug 2016 19:52

Works good with 5.2.3! I don't suppose anyone knows the code to add Linkedin share? This one I can probably figure out through linkedin but I thought I would ask.

It pulls my logo into the posts, but the logo is too big on facebook and google. Any remedies?

Also, I would love to add this into my articles and blogs as well. Thanks so much, this is great, I needed it.

KimK 11 Aug 2016 20:21

Nevermind about adding to articles and blogs, @justunboxing posted the code above, and that worked too! Marked as installed.

I found the linkedin code from the developer site, <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-url="http://www.agentlinkus.com"></script>

MokeyII 26 Sep 2016 03:57

Where does it pull the image from on a share to facebook? https://www.vbulletin.org/forum/external/2016/09/3.png

as you can see it just shows a plain white image. How would I change this?

noypiscripter 27 Sep 2016 23:25

Quote:

Originally Posted by MokeyII (Post 2576251)
Where does it pull the image from on a share to facebook? https://www.vbulletin.org/forum/external/2016/09/3.png

as you can see it just shows a plain white image. How would I change this?

Your site has to implement Open Graph meta tags in order for social media sites to be able to extract the metadata that includes the image thumbnail to use. I have a mod that does this.

Ashlar217 15 Nov 2016 03:12

Working just dandy in 5.2.4 along with Glenns Open graph meta tag mod. Highly recommend that to anyone sharing content across social media platforms.

noypiscripter 17 Nov 2016 04:32

Quote:

Originally Posted by Ashlar217 (Post 2578189)
along with Glenns Open graph meta tag mod.

Glad my mod works for your site. :)

keyla31 02 Jan 2017 14:00

works perfect thank you

heristbd 05 Jan 2017 02:10

Work, And very nice. thx u so much brother

cheikhi2003 15 Jun 2017 19:42

Excellent application

http://www.alwatanrim.net/vb/node/120341

Thank you so much


All times are GMT. The time now is 07:11.

Powered by vBulletin® Version 3.8.14
Copyright © 2021, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.