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

Facebook Like button

Discussion in 'XenForo Questions and Support' started by Peggy, May 7, 2011.

  1. Peggy

    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!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Try adding this to EXTRA.css

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

    Peggy Well-Known Member

    OUCH! That, did this -

    fb like.jpg
     
  4. Brogan

    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.
     
  5. Peggy

    Peggy Well-Known Member

    Nope that did not work. It looks exactly the same. :(
     
  6. Brogan

    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.
     
  7. Peggy

    Peggy Well-Known Member

    Gah! lol. ok
     
  8. Brogan

    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.
     
  9. Peggy

    Peggy Well-Known Member

    okie doke.

    Don't go away! ;)
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    When do I ever?

    ;)
     
    Peggy likes this.
  11. Peggy

    Peggy Well-Known Member

    so the float left is going to look like this?

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

    Brogan XenForo Moderator Staff Member

  13. Peggy

    Peggy Well-Known Member

    Nope, didn't work.
     
  14. Brogan

    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.
     
  15. Peggy

    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;
    }
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    Just increase the min-height value from 60px to whatever you need.

    Something around 80px will probably work.
     
  17. Peggy

    Peggy Well-Known Member

    YAYYY that did it! Thanks so much Brogan. [​IMG]
     

Share This Page