Social Media Share Icons in First Thread/Post

[ShawneyJ]

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:
<!-- / 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.cre ateElement('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%2 0in%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 (http://www.position-relative.com) 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 (http://www.maddiez.com/showthread.php?t=28)

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

:)

[DR-WoWo]

wow wonderful work

[ShawneyJ]

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

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 (http://img.dev-point.com/imgcache/2014/10/755840.png)

Put the code after

<!-- controls -->

:D

[ShawneyJ]

If you want to change the location of icons like this

Here (http://img.dev-point.com/imgcache/2014/10/755840.png)

Put the code after

<!-- controls -->

:D

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

[DR-WoWo]

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


ok :D

[RELAX13]

Good Id :D

[Jihuatz]

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