vb.org Archive - Show Thread Enhancements - Add Tweet, Google+ FB like/Share buttons in your threads

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)

- - Show Thread Enhancements - Add Tweet, Google+ FB like/Share buttons in your threads (https://vborg.vbsupport.ru/showthread.php?t=312155)

Add Tweet, Google+ FB like/Share buttons in your threads

Im basically adding this Template modification for safe keeping if thats ok by the staff.
This is pretty simply and does what i need it to do for my forums.
As the title kinda stats, you can add "Tweet, Google+ FB like/Share" share buttons under the post title of your threads and, or above signature. These 2 places i find looks neater and kinda more effective. You can chose to place your code anywhere in post_bit that fits your needs. FYI: This only shares the URL of the Thread.

Ok lets get to it.

In your Header Template, add this Code to the very Top:

Code:

<div id="fb-root"></div>

<script type="text/javascript">(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/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript">

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/platform.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

And Save.

In Your Additional CSS Add the following:

Code:

.social-buttons {

margin: 0 0 0 0;

}



#twitterbutton, #likebutton, #plusonebutton, #linkedinshare {

float: left;

display: block;

}



#plusonebutton {

margin-left: 15px;

margin-top: 0px;

}



#likebutton {

margin-top:0px;

margin-left: 15px;

overflow: hidden !important;

}

Ok thats it for header and CSS, you don't need to change the above codes for any of the following options.

Now its time to place your Share Buttons into your Threads.
You have 1 of 3 Options on where you would like to add your Share Buttons.
1. Below Post Title
2. Above Signature
3. Next To Edit Buttons.

Option 1.
How to add Share Buttons Below Post Title:

Find in Template postbit_legacy:

Code:

                        <!-- / icon and title -->

                </if>

Add Below:

Code:

<if condition="(($post[postcount] % $vboptions[maxposts] == 1))">

<if condition="THIS_SCRIPT =='showthread'">

<div class="social-buttons">



<div id="twitterbutton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="YOUR-TWITTER-NAME">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>



<div id="plusonebutton"><div class="g-plusone" data-size="medium" data-annotation="none"></div>

</div>



<div id="likebutton"><script src="http://connect.facebook.net/es_US/all.js#xfbml=1"></script><fb:like href="$vboptions[bburl]/showthread.php?t=$thread[threadid]" send="true" width="400" show_faces="false" font=""></fb:like></div>

</div><br /><br />

</if>

</if>

And Save.

Option 2.
How to add Share Buttons above your Signature:

In postbit_legacy Template, Search for:

Code:

<if condition="$post['signature']">

Add Above:

Code:

<if condition="(($post[postcount] % $vboptions[maxposts] == 1))">

<if condition="THIS_SCRIPT =='showthread'">

<br />

<div class="social-single">



<div id="twitterbutton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="YOUR-TWITTER-NAME">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>



<div id="plusonebutton"><div class="g-plusone" data-size="medium" data-annotation="none"></div>

</div>



<div id="likebutton"><div id="fb-root"></div><script src="http://connect.facebook.net/es_US/all.js#xfbml=1"></script><fb:like href="$vboptions[bburl]/showthread.php?t=$thread[threadid]" send="true" width="400" show_faces="false" font=""></fb:like></div>

</div>

<br />

<br />

</if>

</if>

And Save.

This is only if you have modified Signature Coding in your postbit.
Try searching in postbit_legacy Template for:

Code:

$ad_location[ad_showthread_firstpost_sig]

And add the code below it.

Option 3.
How to add Share Buttons below next to the Edit, Quote Buttons etc:

Find in your postbit_legacy Template:

Code:

And add Above, this Code:

Code:

<if condition="(($post[postcount] % $vboptions[maxposts] == 1))">

<if condition="THIS_SCRIPT =='showthread'">

<div class="social-single">



<div id="twitterbutton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="YOUR-TWITTER-NAME">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>



<div id="plusonebutton"><div class="g-plusone" data-size="medium" data-annotation="none"></div>

</div>



<div id="likebutton"><div id="fb-root"></div><script src="http://connect.facebook.net/es_US/all.js#xfbml=1"></script><fb:like href="$vboptions[bburl]/showthread.php?t=$thread[threadid]" send="true" width="400" show_faces="false" font=""></fb:like></div>

</div>

</if>

</if>

And Save.

Hide Share Buttons in certain Forums:

You would simply use these lines around the Code above and change x to Forums ID:

Code:

<if condition="!in_array($GLOBALS[forumid], array(x,x,x))">

Full Share Button Code

</if>

For Example, if i wanted to hide the Share Buttons in my Staff Forums, i would place in the Forums ID 43 and 44. My code would look like this:

Code:

<if condition="!in_array($GLOBALS[forumid], array(43,44))">

Full Share Button Code

</if>

Screenshot Added.

Haven't tried this on normal post bit template but pretty sure it will work.
You can add extra buttons to this code for your site, like Pin It etc.

And hope this works for anyone that actually uses it.

Thanks for marking Installed!

Screenshots added of All Placements added to this post.
Demo Test Site: DEMO.

Also don't forget to add your own Twitter name "YOUR-TWITTER-NAME" to whatever yours is!

Updated: 30/06/2014.
Fixed the following issues:
validator.w3.org was picking on an small error in the facebook header code - Fixed.
There was an issue with the Like Button, every time you clicked Like, a box would appear. No more Box! - Fixed.
The <br's were in the wrong spot in the codes effecting 2nd, 3rd, 4th posts etc - Fixed.
When someone clicked the FB Like Button, the line of text would increase in character and cause 2 lines - Fixed.

Aware of a small issue sometime a small with line appears behine the FB Like Button when Clicking Like. Works fine and isn't a real issue, but will try to find a fix anyways.

Quote:

Originally Posted by mangmel (Post 2502192)

any one have tried?

in those screenshots, is the share buttons running on 2 different forums. test forum and live in the demo.

you can see on blind eddies site, he is running just the like and share button from this mod, but without css edit.
thanks for like @ blind-eddie ;)

EDIT: added a 3rd site screenshot demo, and screenshots of this working on twitter, google, facebook.

Quote:

Originally Posted by ShawneyJ (Post 2502231)

you can see on blind eddies site, he is running just the like and share button from this mod, but without css edit.
thanks for like @ blind-eddie ;)

But, he can't.:D

Quote:

Originally Posted by Max Taxable (Post 2502236)

But, he can't.:D

HAHA, yeah lol. i didnt think of that when i was typing his name :D

Actually, the fb like/share is fb code, I did not add this to my test site, I added this to another site of mine.
It is a work in progress.
For some reason the Google button will not show in other styles.
I only edit the default style, all other styles are child styles.
I had to add the additional css to each style.
Each style is the default style edited.

So, with that said, any clues as to why the Google button will only show in the default style?

Code:

Site can also be reached at nacc.club or nacc.biz

http://northamericancarclub.com/showthread.php?t=5

Login: Jimmy

Password: 00000000

seems like maybe you need to add the header code for google+ to show. thats just my first thought as usually its the only reason google+ does not show.
going by your source code, i only see the i.e. javascript for google+ in your default style.

That's odd.... I did have to add header edit to each style.
Its working now, Thanks Shawn.

why its does not auto post in wall when you click like button ?

Quote:

Originally Posted by mangmel (Post 2502583)

why its does not auto post in wall when you click like button ?

Please see new update which has fixed this issue in first post.

Anyway to keep this from showing in certain forums? I have a staff forum and other forums where I do not want people to share to facebook from. I know it is a conditional of some sort but I am not a coder and don't know how to write it. By the way very nice hack and works well. :)

Quote:

Originally Posted by plubius (Post 2506640)

hi mate thanks.

i will have a mess around with this idea tomorrow for you. hope i can come up with a solution.

Use the following conditional around Shawn's code and change 1,2,3,4,5,6,7,8,9,10 to the forum id's you wish to not show this in.

Code:

<if condition="$forum[forumid] != 1,2,3,4,5,6,7,8,9,10"> "Shawn's code"

</if>

vbulletin conditionals: https://vborg.vbsupport.ru/showthread.php?t=215032

Thanks Blindeddie you rock man

Received this error The following error occurred when attempting to evaluate this template:
Parse error: syntax error, unexpected ',' in /hermes/waloraweb048/b2393/moo.gamelandcom/forums/includes/adminfunctions_template.php(3950) : eval()'d code on line 166
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

I am sorry, I did not add proper code. Again, change x,x,x,x,x to the forum id's you wish to hide this in.

<if condition="!in_array($forumid, array(x,x,x,x,x))"> Shawns Code </if>

Thanks heaps guys. I have updated the first post to what i tested and worked for me, on how to hide in certain forums.
Let me know how you go for those that test it, thanks.

Quote:

I have a staff forum and other forums where I do not want people to share to facebook from

Worked like a bleddy charm. Shawney I love your forum can I join it? And do you have a forum Blind Eddie

I do, its a test site full of 3.8 addons and edits, link in sig. Its a hobby.
I have two other vb sites up, one is not quite finished yet.

Works great, thanks.

have support on vbb 4.2.x ??

Quote:

Originally Posted by tini_lam (Post 2512298)

have support on vbb 4.2.x ??

this would have to be slightly recoded for vb4.

although there is something similar for vb4, but atm i cant find it.

EDIT: actually. just a quick test on vb4 changing the <if to <vb:if the icons do show.
although i cant say it all works without further testing.
if i can get them working smoothly i will add a how to...to my first post.

it show in safari Ipad have error. content in first post blank...

Quote:

Originally Posted by tini_lam (Post 2512618)

it show in safari Ipad have error. content in first post blank...

vb3 or vb4?

Great mod, thanks! A questions though. How can i change the color of the text where it says "Be the first of your friends to like this." The default is in black but i need it in white. Thanks.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01507 seconds Memory Usage 1,807KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (13)bbcode_code_printable (8)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (25)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: