Social Site Icons in footer "Share This Page"

[Mutt]

On the bottom left of most pages there's the "Share This Page" bar w/ links to Tweet & Like on FB but there's a whole bunch of open real estate to the right. I added some social site icons there & even though it's a little nothing template edit, I'm new & need to submit something just to get my feet wet. To make it a little nicer, I used the Xen tooltips.



DIRECTIONS

make a new template called social_icons

<div style="float: right;">
<ul class="socialicons">
<li title="Find us on Facebook" class="Tooltip"><a href="http://www.facebook.com/xxxxxxxxxxxxx" target="_blank"><img src="@imagePath/social/24px/facebook.png" border="0" width="24" height="24"></a></li>
<li title="Follow us on Twitter" class="Tooltip"><a href="http://www.twitter.com/xxxxxxxxxxx" target="_blank"><img src="@imagePath/social/24px/twitter-2.png" border="0" width="24" height="24"></a></li>
<li title="Subscribe to us on YouTube" class="Tooltip"><a href="http://www.youtube.com/user/xxxxxxxx" target="_blank"><img src="@imagePath/social/24px/youtube.png" border="0" width="24" height="24"></a></li>
</ul>
</div>

Edit this to add your information & whatever sites/icons you want.

I got the icons here. Dude has a tremendous collection & I'm sure you'll find what you are looking for. I found that the 24px icons fit the space well.
http://icondock.com/free/vector-social-media-icons

upload the icons you are using & adjust the template so the IMG tags point to them. If you don't want to change the template, I have them in /styles/default/social/24px/ but you put em where you want them. (for future reference, is there a generally accepted spot for this kind of thing? there isn't exactly an image dir)

open template EXTRA.css and add this

.socialicons li {
float: left;
}
.socialicons img {
height: 24px;
width: 24px;
margin-right:5px;
}

open template share_page and just after

        <h3 class="textHeading larger">{xen:phrase share_this_page}</h3>

add this

<xen:include template="social_icons" />

that's everything. like I said, I'm new so feel free to let me know if there a better way to do something.

 

[ddmmh]

Very very nice!

 

[Peggy]

I like it! Very nice job on this.

 

[Crazyfruitbat]

Hey man, really nice - I put this on today and it works fine, though it seems to have swallowed my facebook recommend bar - any ideas?

example: http://www.pixelatedphotographer.com/forums/index.php?threads/hi.307/#post-2034

 

[Paul B]

If you mean the optional text field which appears when you click on the Recommend button, that was fixed in RC3.

You're still running RC2 so you need to upgrade to resolve that issue.

 

[Crazyfruitbat]

If you mean the optional text field which appears when you click on the Recommend button, that was fixed in RC3.

You're still running RC2 so you need to upgrade to resolve that issue.

No, its not that - on my PC laptop the entire recommend tab is just blank, but looking on my mac it all looks fine - maybe something up with the browser, please ignore my comment!

 

[FredC]

No, its not that - on my PC laptop the entire recommend tab is just blank, but looking on my mac it all looks fine - maybe something up with the browser, please ignore my comment!

Sounds like a template somewhere needs to be reverted.. I had this problem a cpl months back and reverting the templates fixed it all up again.. (sorry cant remember which template was causing the problem specifically)

 

[Vincent]

This should be by default

 

[Crazyfruitbat]

Sounds like a template somewhere needs to be reverted.. I had this problem a cpl months back and reverting the templates fixed it all up again.. (sorry cant remember which template was causing the problem specifically)

Cheers, I think most if not all are up to date - I'll upgrade to RC3 this week and see if that solves it.

 

[Mutt]

i'm looking at ur site using firefox 3.6 & it looks fine. hopefully that means you fixed it. even when I tried shrinking the screen down, your forum stayed at a set width & never screwed up the recommend bar. for fun I also looked at in in IE & chrome. all looked fine.

if not, I suppose you could set a width for the div. those icons are 24px each & I think the spacing was 5px. so setting the width to 150 should fit everything you have there. maybe that will help.

 

[Crazyfruitbat]

i'm looking at ur site using firefox 3.6 & it looks fine. hopefully that means you fixed it. even when I tried shrinking the screen down, your forum stayed at a set width & never screwed up the recommend bar. for fun I also looked at in in IE & chrome. all looked fine.

if not, I suppose you could set a width for the div. those icons are 24px each & I think the spacing was 5px. so setting the width to 150 should fit everything you have there. maybe that will help.

View attachment 11780

Cheers for checking mate - It has to be a browser issue then, ill have a look when I get home from work.
BTW, great addon! Nice and subtle but really important!

 

[Paul B]

Nice touch but as the Facebook iframe is 500px wide I can't do this as I have a fixed width forum and there isn't enough space on pages with a sidebar.

 

[x4rl]

Nice touch but as the Facebook iframe is 500px wide I can't do this as I have a fixed width forum and there isn't enough space on pages with a sidebar.

Change the button to a count button work's great than ^_^ (plus looks better imo)

 

[Mutt]

Change the button to a count button work's great than ^_^ (plus looks better imo)

this was a good idea. you can edit the share_page template by changing this

<fb:like href="{$url}" show_faces="true" width="500" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>

into this

<fb:like href="{$url}" layout="button_count"  width="200" action="{$xenOptions.facebookLikeAction}" font="trebuchet  ms" colorscheme="@fbColorScheme"></fb:like>

 

[Paul B]

I prefer the face pile though so I'll just leave it as is.

Besides, once someone has subscribed to your twitter/facebook/youtube, they probably don't want to see it on every page so I'll just knock something up for the forum list sidebar.

 

[x4rl]

this was a good idea. you can edit the share_page template by changing this

<fb:like href="{$url}" show_faces="true" width="500" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>

into this

<fb:like href="{$url}" layout="button_count"  width="200" action="{$xenOptions.facebookLikeAction}" font="trebuchet  ms" colorscheme="@fbColorScheme"></fb:like>

Yea I did mate