Styling Like Buttons like Example

grantbroadcasters
Offline

Active Subscriptions:

None

10 years 8 months ago - 10 years 8 months ago #35606 by grantbroadcasters

Styling Like Buttons like Example was created by grantbroadcasters

Hi,

I am trying to add like buttons to my site and would like them to look the same as the examples shown on the screenshots -

www.sourcecoast.com/images/jfbconnect/fe...ial-buttons-full.png

I can't seem to find a guide on how to setup and style like this.

Any help would be greatly appreciated!

Cheers
Adam

Last edit: 10 years 8 months ago by grantbroadcasters.

The topic has been locked.

alzander
Offline

Support Specialist

10 years 8 months ago #35617 by alzander

Replied by alzander on topic Styling Like Buttons like Example

Adam,
The buttons in that picture are using the "Box Count" layout style. If you're adding the buttons from the "Social" configuration area of JFBConnect, change the layout to Box Count and you should be good to go.. it will automatically change all the button styles in your Joomla articles.

If you're adding the buttons another way (a module or the {JFBCLike} tag), let me know and I can tell you how to do it there as well.

Thanks,
Alex

The topic has been locked.

grantbroadcasters
Offline

Active Subscriptions:

None

10 years 8 months ago #35659 by grantbroadcasters

Replied by grantbroadcasters on topic Styling Like Buttons like Example

Hi Alex,

Thanks for helping me out.

I am adding them using the module tags - '{JFBCLike layout=box_count}' the Facebook one is appearing properly, but need some help to add Twitter and Google the same way and side by side.

Appreciate your help.

Cheers,
Adam

The topic has been locked.

alzander
Offline

Support Specialist

10 years 8 months ago #35784 by alzander

Replied by alzander on topic Styling Like Buttons like Example

Adam,
Sorry for the delayed response. I'm realizing that it's a bit more difficult to add all the buttons in a similar style. I've added it to our to-do list to standardize the options across each of the buttons to make things easier.

Until then, if you want them all to be button count, you should add them like:

<div class="mysocialbuttons">
{JFBCLike layout=box_count}
{JLinkedShare counter=top}
{SCTwitterShare data_count=vertical}
{SCGooglePlusOne size=tall annotation=bubble}</div>

That will get them to all look similar compared to the Like box_count. Then, to horizontally align them, add the following to your template's CSS:

.mysocialbuttons .jlinkedShare, .mysocialbuttons .sc_twittershare, .mysocialbuttons .sc_gplusone, .mysocialbuttons .jfbclike { float: left}

No arguments that that could be a lot cleaner!

I hope that helps get you going, but let me know if you need anything else.

Thanks,
Alex

The topic has been locked.

grantbroadcasters
Offline

Active Subscriptions:

None

10 years 8 months ago #35789 by grantbroadcasters

Replied by grantbroadcasters on topic Styling Like Buttons like Example

Hi Alex,

Thanks for your help, it has worked!!

Cheers
Adam

The topic has been locked.

alzander
Offline

Support Specialist

10 years 8 months ago #35831 by alzander

Replied by alzander on topic Styling Like Buttons like Example

Adam,
Awesome! Glad to hear that got it going for you in one stab. If you have any questions, comments or other feedback in general, definitely let us know.

Finally, if you haven't already, please consider leaving a rating and review for JFBConnect, or our support, on the Joomla Extension Directory. It certainly isn't required, but is very appreciated:
extensions.joomla.org/extensions/social-...ook-integration/7215

Thanks,
Alex

The topic has been locked.

Start
Prev
1
Next
End

SourceCoast Login

Styling Like Buttons like Example