Topic-icon Social tags for K2 'Social button' code

Active Subscriptions:

None
14 years 3 weeks ago #22830 by gusmor
Hello: First of all congratulations for this amazing product and the efficient support you provide here.

I recently bought JFBConnect v4.2 and have LOTS of questions, but let's start with might be the simplest one :P

I want to add social buttons above the images of my K2 items. JFBC content plugin inserts social buttons right after the captions of K2 images and before the intro text (and at the end of the article if enabled). There's nothing wrong with that, but I also want to take advantage of K2's ability to add social buttons ABOVE the images between the comments count and the rating.

This is done in K2 by adding custom code into a text box in the parameters, which I previously did to get some AddThis buttons. Problem is, I don't want to use or mix any other plugins now that I have JFBC, so I removed the AddThis code and began to experiment with your tags. That's when i hit a wall.

I I add one tag like {JFBCLike} it looks fine, but subsequent linkedin, twitter and google plus tags break the format and they kinda position vertically one on top of the other (or in any way they want, really). What I'd like to know is if there is a tag that will include all those buttons in the same way (one after the other, aligned) they are included with the content plugin. Thanks in advance.
The topic has been locked.
Support Specialist
14 years 3 weeks ago #22832 by alzander
Gustavo,
Glad you're liking JFBConnect so far! As to your question, no, there isn't one tag that will add all the buttons. It's something we should probably add though :)

In the parameters though, I believe you can do standard HTML. If that's the case, add the tags like below, and the JFBConnect stylesheet should be loaded to float the buttons horizontally:
<div style="position: relative; top:0px; left:0px; z-index: 98;" class="scsocialbuttons">{JFBCLike}{SCGooglePlusOne}{JLinkedShare}{SCTwitterShare}</div>
If that doesn't work, there's a simply line you can alternatively add to your stylesheet to make the buttons go horizontally as well.

Best of luck, and we look forward to helping with your other questions!
Alex
The topic has been locked.
Active Subscriptions:

None
14 years 3 weeks ago #22864 by gusmor
Thanks for the quick reply. This code did the trick. I tweaked it a bit to make it look like the other buttons (order of the buttons) and added a parameter to the {JFBCLike} tag in order to remove the "Be the first of your friends to like this" text. It is too long for my page. If anyone else needs it, here is what I used. Thanks again for your help. We'll meet again! :lol:

<div style="position: relative; top:0px; left:0px; z-index: 98;" class="scsocialbuttons">{JLinkedShare}{SCTwitterShare}{SCGooglePlusOne}{JFBCLike layout=button_count}</div>
The topic has been locked.
Active Subscriptions:

None
14 years 3 weeks ago #22866 by gusmor
Also, because there are some odd spaces between the buttons (I believe to allow the likes or shared numbers to grow indefinitely) I tweaked their styles. This might not be efficient in terms of code (I'm not a developer) but it makes more sense to me in terms of spacing. Please let me know if this looks like a horribly bad idea :O These are my changes in Joomla's override file.

div.scsocialbuttons div { margin-right: 10px; }
.sc_twittershare { width: 100px !important; }
.twitter-share-button { width: 100px !important; }
.twitter-count-horizontal { width: 100px !important; }
#___plusone_0 { width: 80px !important; }
#___plusone_1 { width: 80px !important; }
#I2_1337456103386 { width: 80px !important; }
.jfbclike { width: 130px !important; }
The topic has been locked.