Social Media Share Icons in First Thread/Post

Social Media Share Icons in First Thread/Post

Mod Version: 1.00, by ShawneyJ

vB Version: 3.8.x	Rating: (2 votes - 5.00 average)	Installs: 12
Released: 01 Oct 2014	Last Update: 02 Oct 2014	Downloads: 84
Not Supported Template Edits

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:

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

http://www.maddiez.com/index.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

Download

22-square.zip (15.8 KB, 52 downloads)
32-square.zip (14.8 KB, 51 downloads)
22-round.zip (13.8 KB, 43 downloads)
32-round.zip (17.1 KB, 64 downloads)

Screenshots

vBulletin LTS