WordPress.org

Ready to get started?Download WordPress

Forums

How to right align Facebook like botton (7 posts)

  1. patrickpankalla
    Member
    Posted 4 months ago #

    Hello guys,

    Can someone please help me?

    I'm trying to move the Facebook like button to the right in the bottom of my blog posts.

    Do you have a CSS code or another resolution?

    I've put this in content.php in my Child Theme.

    <div style="float:right;">
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&width&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=550781011637731" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
    </div>

    Link to my blog: http://www.bypankalla.com

  2. Senff
    Member
    Posted 4 months ago #

    You assigned a height of 21px to the iframe, but no width. I would suggest to add a width of 90px.

    <div style="float:right;">
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&width&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=550781011637731" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
    </div>
  3. patrickpankalla
    Member
    Posted 4 months ago #

    Thank you, but the problem is that it's multi language.

    I both have a lot of danish and international readers.

    When you're coming from Denmark it says "Synes godt om", when you're coming from USA or other english talking countries it says "Like" and so on.

    The width of the button is therefore different from where ever you're coming from. If I set the width to 90px it will only show the half of the danish Facebook like button.

  4. Senff
    Member
    Posted 4 months ago #

    Yup, that's indeed a problem. But, since you're working with an iframe (that always has the same width, regardless of its contents), you're going to have to define a width for it.

    This is no problem when the button is aligned left, but to align it right it is tricky. Give it a width of 110 or 120 or something. It will not be aligned all the way to the right, but close. And the Danish should still show.

  5. patrickpankalla
    Member
    Posted 4 months ago #

    Thank you! But is there another way (non iframe) that will solve the problem?

  6. patrickpankalla
    Member
    Posted 4 months ago #

    I used this code on another site and it's align right, which is perfect, but when I click "like" I'm liking my blog (www.bypankalla.com) and not the post (fx. http://www.bypankalla.com/black-and-leather).

    <div style='float:right'>
    <b:if cond='data:post.isFirstPost'>
    <script>(function(d){
      var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
      js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      d.getElementsByTagName('head')[0].appendChild(js);
    }(document));</script>
    </b:if>
    <fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='arial' layout='button_count' send='false' show_faces='false'/>
    </div>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    Any resolutions?

  7. Senff
    Member
    Posted 4 months ago #

    I'm not sure, I'm not familiar with that specific format, I only know the ones that are described here: https://developers.facebook.com/docs/plugins/like-button/

    But that needs a specific width as well....

    Can you show me where you implemented that specific code that works for you?

Reply

You must log in to post.

About this Topic