• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Social Site Icons in footer "Share This Page"

Mutt

Well-known member
#1
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.

Screenshot_2.jpg

DIRECTIONS

make a new template called social_icons
Code:
<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
Code:
.socialicons li {
float: left;
}
.socialicons img {
height: 24px;
width: 24px;
margin-right:5px;
}
open template share_page and just after

Code:
        <h3 class="textHeading larger">{xen:phrase share_this_page}</h3>
add this
Code:
<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.
 

Brogan

XenForo moderator
Staff member
#5
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

Well-known member
#6
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

Well-known member
#7
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)
 

Crazyfruitbat

Well-known member
#9
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

Well-known member
#10
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.

Screenshot_1.jpg
 

Crazyfruitbat

Well-known member
#11
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!
 

Brogan

XenForo moderator
Staff member
#12
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.
 

Wuebit

Well-known member
#13
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

Well-known member
#14
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
Code:
<fb:like href="{$url}" show_faces="true" width="500" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
into this
Code:
<fb:like href="{$url}" layout="button_count"  width="200" action="{$xenOptions.facebookLikeAction}" font="trebuchet  ms" colorscheme="@fbColorScheme"></fb:like>
 

Brogan

XenForo moderator
Staff member
#15
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.
 

Wuebit

Well-known member
#16
this was a good idea. you can edit the share_page template by changing this
Code:
<fb:like href="{$url}" show_faces="true" width="500" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
into this
Code:
<fb:like href="{$url}" layout="button_count"  width="200" action="{$xenOptions.facebookLikeAction}" font="trebuchet  ms" colorscheme="@fbColorScheme"></fb:like>
Yea I did mate :)