• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Facebook Like button

Peggy

Well-known member
#1
I'm just full of questions lately. :rolleyes:

In the Share The Page box on the forum index, I'd like to put the Face book Like button up next to the tweet # box (see screenie).

fb like.jpg

The code is below. How would I edit this to accomplish what I want?

Code:
<div class="tweet shareControl">
                        <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal"
                            data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
                            data-url="{$url}"
                            {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                            {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                    </div>
                </xen:if>
                <xen:if is="{$xenOptions.facebookLike}">
                    <div class="facebookLike shareControl">
                        <xen:container var="$facebookSdk">1</xen:container>
                        <fb:like href="{$url}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                    </div>
Thanks in advance!
 

Brogan

XenForo moderator
Staff member
#4
In that case just add a minimum height too.

Code:
.sidebar .sharePage .shareControl {
float: left;
min-height: 60px;
}
Change the height to suit.
 

Brogan

XenForo moderator
Staff member
#6
Gah!

The CSS must have changed as I've used that before when someone else asked how to do it.

I'll have a look at your site then, give me a few minutes.
 

Brogan

XenForo moderator
Staff member
#8
Of course an easy fix would be to edit the sidebar_share_page template and change <div class="secondaryContent"> to <div class="secondaryContent" style="min-height: 60px">

You still need the float left in EXTRA.css though.
 

Brogan

XenForo moderator
Staff member
#14
You sure?

I just tested it on my test installation and it worked fine.

You need both the float left in EXTRA.css and the template edit.
 

Peggy

Well-known member
#15
Yes I did both. Now, I went into the css for that template, and changed the 10px top margin to 1px, and that moved the images up. But now, I need a bottom margin code.

This is the code -
Code:
.sidebar .sharePage .shareControl
{
    margin-top: 1px;
}

.sidebar .sharePage iframe.fb_ltr
{
    _width: 200px !important;
}

.mast .sharePage .secondaryContent
{
    overflow: visible !important;
}
 

Brogan

XenForo moderator
Staff member
#16
Just increase the min-height value from 60px to whatever you need.

Something around 80px will probably work.