PDA

View Full Version : Show Thread Enhancements - Social Buttons with Short Share URL


iBinJubair
01-31-2014, 11:00 PM
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:

https://vborg.vbsupport.ru/attachment.php?attachmentid=148043

https://vborg.vbsupport.ru/attachment.php?attachmentid=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
<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

GamerUnguided
02-02-2014, 12:43 PM
Sweet :) just what i was looking for, thanks for this .... guaranteed that this is installed

heredia21
02-03-2014, 10:52 AM
Perfect! Thanks for sharing, works well on mobile devices as well.

crystalduna
02-25-2014, 01:57 PM
When I click conversion_toolbar it wont let me customize it

bxb
03-07-2014, 07:02 PM
Works, thanks a bunch! VB5.0.5

ecihanuysal
03-17-2014, 11:43 AM
works, thank you so mch

Macgiber
04-28-2014, 01:45 AM
thanks

fionix
05-21-2014, 03:51 PM
Any udate for the latest version 5.1.1 ? it seems this line we have to find isn't there any longer.

Thanks.

Daryn
05-21-2014, 09:18 PM
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
06-24-2014, 07:27 AM
This work.

DisasterDotCom
07-21-2014, 01:45 PM
Works in 5.1.2 (and the line is there). Thanks!

badawidollah
07-26-2014, 07:04 PM
<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
07-30-2014, 08:18 AM
<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&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://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
11-06-2014, 07:32 PM
It works for 5.1.4 thanks :D

gfran5
11-23-2014, 11:39 AM
Works great in 5.1.1 :D

M@tthew
11-23-2014, 06:37 PM
Nice little add-on, thanks! Works well with vBulletin 5.1.4.

gfran5
11-29-2014, 11:31 AM
Anyone know how to add this to the article (CMS) conversation bar?

classicrv
01-29-2015, 04:18 PM
Very nice! Seems to work well on 5.1.4. Thanks!!!

oxrageous
01-29-2015, 05:46 PM
Anyone have any idea how to adjust the code so these DO NOT show up on the floating bar?

fortunately102s
01-29-2015, 11:00 PM
Great, this is what I was looking for!

Red_Horse
01-31-2015, 11:17 AM
Works in 5.1.5
Thanks

drsmash
02-10-2015, 12:51 PM
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
02-11-2015, 03:32 PM
Seems to be working well in 5.1.4. Thanks! :up:

justunboxing
02-15-2015, 11:26 PM
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
02-18-2015, 01:13 PM
Tested en VB 5.1.5 it doesn't works u.u

DesignMVD
03-28-2015, 06:26 AM
Upgrade vb 5.1.6 please :)

TwinsForMe
04-28-2015, 04:57 AM
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
04-28-2015, 05:57 PM
Work fine in 5.1.6.

Great! :D

koko10ar
04-28-2015, 06:10 PM
In spanish forums replace this line:
.share-buttons .facebook { width:135px; }
for this:
.share-buttons .facebook { width:175px; }

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

Can you help me adding linkedin button?

Regards!

vb_nils
05-30-2015, 06:52 AM
Works well on 5.1.7.

For French, replace
.share-buttons .facebook { width:135px; }
by
.share-buttons .facebook { width:160px; }

vb_nils
05-30-2015, 08:27 AM
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
08-27-2015, 11:34 PM
does it work with vb 5.1.9 ?

shimei
10-20-2015, 04:17 PM
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
10-21-2015, 08:30 AM
Its useful thanks

DemOnstar
11-08-2015, 01:55 PM
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/attachment.php?attachmentid=153640&stc=1&d=1446998119

Hectorsky
11-18-2015, 01:43 PM
works fine , thanks

jnabird333
12-14-2015, 07:44 PM
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
01-04-2016, 03:23 PM
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
01-07-2016, 09:00 PM
5.1.10 doesn't work

Hectorsky
01-23-2016, 08:01 PM
On vb 5.2 doesn't work

DemOnstar
01-26-2016, 03:25 PM
On vb 5.2 doesn't work

Which part doesn't work?

Hectorsky
01-26-2016, 03:49 PM
Which part doesn't work?

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

DemOnstar
01-26-2016, 04:51 PM
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
01-26-2016, 05:25 PM
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
01-26-2016, 05:37 PM
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
01-26-2016, 06:42 PM
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
01-26-2016, 06:55 PM
Thanks , already fixed :)
I just put code on wrong line

And how about Facebook and Google+?

Hectorsky
01-26-2016, 07:03 PM
And how about Facebook and Google+?

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

DemOnstar
01-26-2016, 07:16 PM
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
01-26-2016, 07:44 PM
I will pm you

shimei
01-26-2016, 08:27 PM
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
01-26-2016, 10:28 PM
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
01-28-2016, 05:44 PM
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 (https://vborg.vbsupport.ru/showpost.php?p=2563490&postcount=45). . .?

DemOnstar
02-03-2016, 05:54 PM
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/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-support-issues-questions/4337767-facebook-image

And this:
https://vborg.vbsupport.ru/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
04-21-2016, 05:13 PM
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
06-23-2016, 05:48 AM
Thank you so much. The website is looks really good with this.

KimK
08-11-2016, 05:52 PM
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
08-11-2016, 06:21 PM
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
09-26-2016, 01:57 AM
Where does it pull the image from on a share to facebook? https://vborg.vbsupport.ru/external/2016/09/3.png

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

noypiscripter
09-27-2016, 09:25 PM
Where does it pull the image from on a share to facebook? https://vborg.vbsupport.ru/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
11-15-2016, 02:12 AM
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
11-17-2016, 03:32 AM
along with Glenns Open graph meta tag mod.
Glad my mod works for your site. :)

keyla31
01-02-2017, 01:00 PM
works perfect thank you

heristbd
01-05-2017, 01:10 AM
Work, And very nice. thx u so much brother

cheikhi2003
06-15-2017, 05:42 PM
Excellent application

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

Thank you so much