Add Tweet, Google+ FB like/Share buttons in your threads
Mod Version: 1.00, by ShawneyJ
| vB Version: 3.8.7 | Rating:  (4 votes - 4.00 average) |
Installs: 14 |
| Released: 14 Jun 2014 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
|
||
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:
And Save.
In Your Additional CSS Add the following:
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:
Add Below:
And Save.
Option 2.
How to add Share Buttons above your Signature:
In postbit_legacy Template, Search for:
Add Above:
And Save.
This is only if you have modified Signature Coding in your postbit.
Try searching in postbit_legacy Template for:
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:
And add Above, this Code:
And Save.
Hide Share Buttons in certain Forums:
You would simply use these lines around the Code above and change x to Forums ID:
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:
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: http://www.forumcentral1.com/chatforums/index.php?t=5
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.
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>
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;
}
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>
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>
Option 2.
How to add Share Buttons above your Signature:
In postbit_legacy Template, Search for:
Code:
<if condition="$post['signature']">
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>
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]
Option 3.
How to add Share Buttons below next to the Edit, Quote Buttons etc:
Find in your postbit_legacy Template:
Code:
<!-- controls -->
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>
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>
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: http://www.forumcentral1.com/chatforums/index.php?t=5
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.
Download
No files for download.
Screenshots
