vb.org Archive - Show Thread Enhancements - Social Media Share Icons in First Thread/Post

First off, whos sick of Social Media mods. Here is another for you...Well this maybe a tiny bit different :o
Ok, so these are a little different than my other Share Icons Mod. Which i do believe maybe much better. A Client requested something a long the lines of this, and she seems happy with it. So again, for safe keeping. I will post it here. I don't really need to explain much, other than, this Mod is for Media sharing of a first Thread/Post of every page.

Option 1.
How to add Social Media Share Icons Below Post Title:

Find in Template postbit_legacy:

Code:

                        <!-- / icon and title -->

                </if>

Add Below:

Code:

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

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

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

<div id="share">

<!-- Facebook -->

<a href="http://www.facebook.com/sharer.php?u=$vboptions[bburl]/showthread.php?t=$thread[threadid]" target="_blank"><img src="images/social/facebook.png" alt="Facebook" /></a>

<!-- Twitter -->

<a href="http://twitter.com/share?url=$vboptions[bburl]/showthread.php?t=$thread[threadid]&text=$post[title]" target="_blank"><img src="images/social/twitter.png" alt="Twitter" /></a>

<!-- Google+ -->

<a href="https://plus.google.com/share?url=$vboptions[bburl]/showthread.php?t=$thread[threadid]" target="_blank"><img src="images/social/gplus.png" alt="Google" /></a>

<!-- Digg -->

<a href="http://www.digg.com/submit?url=$vboptions[bburl]/showthread.php?t=$thread[threadid]" target="_blank"><img src="images/social/digg.png" alt="Digg" /></a>

<!-- Reddit -->

<a href="http://reddit.com/submit?url=$vboptions[bburl]/showthread.php?t=$thread[threadid]&title=$post[title]" target="_blank"><img src="images/social/reddit.png" alt="Reddit" /></a>

<!-- LinkedIn -->

<a href="http://www.linkedin.com/shareArticle?mini=true&url=$vboptions[bburl]/showthread.php?t=$thread[threadid]" target="_blank"><img src="images/social/linkedin.png" alt="LinkedIn" /></a>

<!-- Pinterest -->

<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img src="images/social/pinterest.png" alt="Pinterest" /></a>

<!-- StumbleUpon-->

<a href="http://www.stumbleupon.com/submit?url=$vboptions[bburl]/showthread.php?t=$thread[threadid]&title=$post[title]" target="_blank"><img src="images/social/stumbleupon.png" alt="StumbleUpon" /></a>

<!-- Email -->

<a href="mailto:?Subject=$post[title]&Body=I%20thought%20you%20might%20be%20interested%20in%20reading%20this%20web%20page!%20$vboptions[bburl]/showthread.php?t=$thread[threadid]" target="_blank"><img src="images/social/email.png" alt="Email" /></a>

</div>

</if>

</if>

</if>

Save.

Now In Your Additional CSS Add the following to the very bottom:

Code:

<style type="text/css">

#share img {

width: 22px;

height: 22px;

padding: 5px;

border: 0px;

box-shadow: 0;

display: inline;

}

#share img:hover {

background-position: 0px -48px;

box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);

}

a img {

    border: 0;

}

</style>

Save.

If you have custom coding in your Additional CSS, make sure the above edit
is always added to the bottom of all coding. Or you will get errors.

Now Download the Zip file, and upload to your Forums Images Folder. Example: images/social

Thats it!

Dont for get to change the x,x,x highlighted in red.
For Example, if i wanted to hide the Share Buttons in my Admin 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))">

Also, i have uploaded and resized Square Icons and Round Icons. The Icons size i made 22?22 to fit in with my forum. Client was happy with 32?32.

So you now have your pick of sizes 22?22-Square, 22?22-Round, 32?32-Square, 32?32-Round Zips. All Icons fit Dark and Light Themes.

Credits to Position Relative for these Social Images.

I'm not a member of some of these Social Networks, so im not even sure they all work. Going by the coding they should work, even the Email! :erm:

Client Demo

FYI: Anyone wondering about the "a img { border: 0; }" in CSS. This removes the outline border around Linked Images using IE.

PLEASE MARK AS INSTALLED FOR SUPPORT

Thanks for any feedback to ;)

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01297 seconds Memory Usage 1,750KB 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 (6)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)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: