Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 1.5 Support (CLOSED)
  7. How to align Like button to right side of article?
× Joomla Facebook Connect support forum

Topic-icon How to align Like button to right side of article?

Active Subscriptions:

None
15 years 1 month ago #9777 by dotcom22
hello

In your new version of JFB the Like button can appear now in each article at top/bottom of each article (great addition :-). I would like like align the button at top-right instead top-left. In fact I don't like to much this alignment because is displayed right above the title of article..

I take a look in "Content - JFBCContent" plugin and inside the "Content Plugin Like" tab of Social Menu but no setting available for do that. I imagine is possible to modify alignment but it require to change something in the code of plugin..

Can you tell me please how to do?

many thank
The topic has been locked.
Support Specialist
15 years 1 month ago #9788 by alzander
Glad you like the change. I don't believe you should have to change our code add all. Adding the following block to your CSS file will hopefully have the desired result. If this doesn't work, please post the URL of a page that's using the Like button so we can see the structure of your code, and I'll send a better fix.
.jfbclike { 
float:right;
}

Good luck!
The topic has been locked.
Active Subscriptions:

None
15 years 1 month ago #9792 by dotcom22
ok I try to add the css code and it work even if of course the button is not aligned to full right due to the FB text "be the first to like this".

Now the problem is the button is almost to the same level to my article title (see attached screenshot)... I would like increase the size of the Like box... If I'm not wrong each FB addition appear using Iframe and we can set the width size (like 450px) inside "Social setting" but not the Height...

I try to add to the JFBlike class a top or bottom padding but this don't work well...

Can you please tel me how to set Height ?

thank

File Attachment:
The topic has been locked.
Support Specialist
15 years 1 month ago #9802 by alzander
Yes, you can't set the height, but you should be able to set a top or bottom margin in the same CSS area as defined above, so try either or both of:
margin-top:20px;
margin-bottom:20px;

As for the text of "be the first to like..", we can't modify or remove that text in any way. If you don't want it, we'd recommend you try a different button-style to something other than "standard". You can set this in the Social configuration area similar to the other settings for the Content plugin.

Hope this helps, and good luck!
The topic has been locked.
Active Subscriptions:

None
15 years 1 month ago #9806 by dotcom22
Thank Alzander I'm now able to set the position I need and the button style...

Last question: I would like if possible take profit to the fact your Like button can be displayed where we want for include also a Twitter button. That mean I would like include a piece of twitter code at the right place of your file for display this button at left or right side to FB Like button..

I know plenty of plugin permit to do this and I try some but they conflict with your Like button and is a mess for solve the display problem (not well aligned, template problem,..). Instead to install different plugin I would prefer use only one...

Maybe you plan to include also a Twitter button in a near future but probably not...

The Twitter code look like this:
Tweet

Have you a suggestion?

thank
The topic has been locked.
Active Subscriptions:

None
15 years 1 month ago #9807 by dotcom22
forum code pasting problem...here the right code:
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
The topic has been locked.
Support Specialist
15 years 1 month ago #9814 by alzander
We have plans for integration with a few other systems, but nothing in the immediate future. Until then, if you want to include the Twitter code above, you can do so in the JFBCSystem plugin where we translate the {JFBCLike...} code. In the /plugins/system/jfbcsystem.php file, at line 372 (through 388) is where we generate the like button code. Right after the class="jfbclike"> (on line 372) or before the closing div (on line 388), simply put your code in there.

Depending on where, beginning or end, the Twitter button will show on the left or right of the Like button. This will add the Twitter button to the JFBCLike module, any {JFBCLike} tags, and the content plugin.. so it's all or nothing. Hope that's good for you.

Good luck,
Alex
The topic has been locked.
Active Subscriptions:

None
15 years 4 weeks ago #9902 by dotcom22
beautiful Alzander this work well and I'm now able to display also Twitter button... I choose to include it after FB button on line 388. Many thank for the tricks...

Please one more and last thing:

I choose to display a "button_count" FB style for match the same kind of look of Twitter button. I would like align horizontally this 2 button at the top right of articles.

I try many kind of CSS code (I'm not an expert but I go always take informations on W3schools) but I can't align the 2 button at same level (see screenshot).

I try to use the "float" attribute you suggest me but this don't help for align at right side I don't know why (even without Twitter code button). So I use and play with "margin" attribute and I'm near to get the result I want except the fact images are not on same level... Maybe including both button inside a table can work (I try but this broke my template) but it must be possible to do without using table...

here my css code:
margin-left:550px;
margin-right:300px;
margin-top:2px;
margin-bottom:20px;

any suggestion please?

many thank

File Attachment:
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 1.5 Support (CLOSED)
  7. How to align Like button to right side of article?
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS