XF 1.4 Problem with social buttons

[imthebest]

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:



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:



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

 

[TickTackk]

Add this to EXTRA.css

.fb-share-button
{
margin-right: 30px;
}

 

[kaieivindm]

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:

View attachment 103442

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:

View attachment 103443

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

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

Thanks!

 

[kaieivindm]

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

Thanks!

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>





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>

 

[kaieivindm]

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;
}

 

[Charles_cz]

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

 

[imthebest]

@Charles_cz see question number #7 in this link: Frequently Asked Questions

 

[Charles_cz]

Super120 - Thank you!