Facebook Like button

Peggy

Well-known member
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
Try adding this to EXTRA.css

Code:
.sidebar .sharePage .shareControl {
float: left;
}
 

Brogan

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

Peggy

Well-known member
so the float left is going to look like this?

Code:
.sidebar .sharePage .shareControl {
float: left;
}
 

Brogan

XenForo moderator
Staff member
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
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
Just increase the min-height value from 60px to whatever you need.

Something around 80px will probably work.
 
Top