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
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:

			<!-- / icon and title -->
		</if>

Add Below:

<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:

<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:

<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

[tbworld]

Nice work, and I loved the intro line.

"First off, whos sick of Social Media mods. Here is another for you...Well this maybe a tiny bit different "

[DR-WoWo]

wow wonderful work

[ShawneyJ]

Originally Posted by tbworld

Nice work, and I loved the intro line.

lol, thanks. it will be same when i add my youtube bbcode, theres so many of them to

Originally Posted by DR-WoWo

wow wonderful work

Thanks, you haven't marked as installed. not sure if you tested? kinda looking for feed back.
thanks

[DR-WoWo]

If you want to change the location of icons like this

Here

Put the code after

<!-- controls -->

[ShawneyJ]

Originally Posted by DR-WoWo

If you want to change the location of icons like this

Here

Put the code after

<!-- controls -->

yes, nice, i was going to add that edit, but i ended up actually getting the icons inline with edit etc. i will add soon. thanks.
dont forget to mark as installed

[DR-WoWo]

Originally Posted by ShawneyJ

yes, nice, i was going to add that edit, but i ended up actually getting the icons inline with edit etc. i will add soon. thanks.
dont forget to mark as installed

ok

[RELAX13]

Good Id

[Jihuatz]

Please, How I can use this one in the mobile theme, (Default Mobile Style)?