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

XF 1.4 Problem with social buttons

Discussion in 'Styling and Customization Questions' started by imthebest, Apr 10, 2015.

  1. imthebest

    imthebest Formerly Super120

    Hi,

    On the template share_page I have moved the <xen:if is="{$xenOptions.facebookLike}"> block to the top so it becomes the first button available:

    fb1.png

    But now still on share_page I replaced:

    <div class="fb-like" data-href="{$url}" data-width="400" data-layout="standard" data-action="{$xenOptions.facebookLikeAction}" data-show-faces="true" data-colorscheme="@fbColorScheme"></div>

    With:

    <div class="fb-share-button" data-href="{$url}" data-width="400" data-layout="button_count" data-action="{$xenOptions.facebookLikeAction}" data-show-faces="true" data-colorscheme="@fbColorScheme"></div>

    And this is the end result:

    fb2.png

    The question is: how I can set an spacer between the Facebook and Twitter buttons just like the one present between the Twitter and Google buttons?

    Thanks,
    Super120
     
  2. batpool52!

    batpool52! Well-Known Member

    Add this to EXTRA.css
    Code:
    .fb-share-button
    {
    margin-right: 30px;
    }
     
    imthebest likes this.
  3. kaieivindm

    kaieivindm Active Member

    Think you could share your share_page template?
    I can't get this to work at all.

    Thanks!
     
  4. kaieivindm

    kaieivindm Active Member

    Nevermind. I fixed it my self for once! Yay!

    Anyway, in XF 1.4 the code above is not the same.

    So here is what my code looks like (Just to remove facebook recommend, and in with facebook share:
    This is for share_page templates

    <xen:if is="{$xenOptions.facebookLike}">
    <div class="facebookLike shareControl">
    <xen:container var="$facebookSdk">1</xen:container>
    <fb:share-button href="{$url}" width="400" data-action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme" data-layout="button_count" share="true"></fb:like>
    </div>
    </xen:if>

    upload_2015-4-13_22-45-15.png

    upload_2015-4-13_22-46-16.png

    Just FYI: Del = Share in Norwegian.

    & sidebare_share_page

    <xen:if is="{$xenOptions.facebookLike}">
    <div class="facebookLike shareControl">
    <xen:container var="$facebookSdk">1</xen:container>
    <fb:share-button href="{$url}" width="400" data-action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme" data-layout="button_count" share="true"></fb:like>
    </div>
    </xen:if>
     
    Skylined and imthebest like this.
  5. kaieivindm

    kaieivindm Active Member

    For those of you that dont want share button first, but keep the twitter and need the 30px space in between. Add this to Extra.css as @batpool52! said.

    .tweet
    {
    margin-right: 30px;
    }
     
  6. Charles_cz

    Charles_cz New Member

    kaieivindm, thanks for the update. it works great for me. Do you know how to change picture that load as default (XenForo) to something more relevant to the website?
    It looks like it is pulling image from somewhere else. Facebook usually get image from post etc..

    Do you have any suggestion? I am new to XF...

    Thanks in advance. Charles
     
  7. imthebest

    imthebest Formerly Super120

    Charles_cz likes this.
  8. Charles_cz

    Charles_cz New Member

    Super120 - Thank you!
     

Share This Page