Skip navigation
Currently Being Moderated

Having trouble making a Facebook "Like Us" plugin look good.

Jan 29, 2012 6:59 AM

Hello.

 

I'm having troulble getting a Facebook "Like Us" link to look good on a site I built. It seems that no matter where I insert the code for the plugin it just doesn't fit or look right.

 

Here's the site: http://friendsoflafayette.org/index.html

 

If I put the plugin in the rightside div it extends past the box. If I put in in the footer it isn't centered. As you can tell, I'm not a master with code and aren't sure how to make this fit properly. Ideally I'd like to put it in the rightside div but is there a way to line-break the text "American Friends of Lafayette" or somehow shorten the width to make it fit the div box? Alternately, how can I center the plugin in the footer so at least it looks presentable?

 

Any suggestions welcome.

 

Best Regards,

John

 
Replies
  • Currently Being Moderated
    Jan 29, 2012 11:29 AM   in reply to grusvag

    In code view, try changing this:

     

    <div class="fb-like-box fb_iframe_widget" data-href="http://www.facebook.com/pages/The-American-Friends-of-Lafayette/168772 073195787" data-width="292" data-height="200" data-show-faces="false" data-stream="false" data-header="false">

     

    to this with an inline style noted in red:

     

    <div class="fb-like-box fb_iframe_widget" style="margin-left: 35%" data-href="http://www.facebook.com/pages/The-American-Friends-of-Lafayette/168772 073195787" data-width="292" data-height="200" data-show-faces="false" data-stream="false" data-header="false">

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb


     
    |
    Mark as:
  • Currently Being Moderated
    Jan 30, 2012 10:08 AM   in reply to grusvag

    You might not be able to change the content inside that

    <div class="fb-like-box fb_iframe_widget...

    much.

    so put that inside a <div id="fb_like_holder"> div and style that as you want.... create this container so that you have something to center

    inside of.

    But you should be able to style both .

    Also you should be able to add some other styles to

    class="fb-like-box fb_iframe_widget

    but if that is not a class you control, then style the holder div as needed or create another inner holder....

    Of course, styling will depend on how the parents are styles... so centering in a floated left 400 wide container will look different from centering in a full width parent... if you can see what I mean.

    Example of Facebook Like box in holder <div>

    http://www.hiesequim.com/

    the CSS:

    #facebook_like_holder {

    width: 300px;

    height: 650px;

    float: left;

    margin-left: 5px;

    border-style: double;

    border-color:#0255a5;

    }

    #facebook_like {

    width: 300px;

    height: 600px;

    float: left;

    text-align: center;

    }

    Of course this is just an example, you can style yours as needed.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 30, 2012 11:12 AM   in reply to grusvag

    I have the same problem on my site www.toncourtierimmobilier.com and can't make it work.

     

    Mat

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 30, 2012 4:56 PM   in reply to MATHIEUVENDETTE

    I don't see any FaceBook Like Box on your page in the link.... but either way, the trick is to style the <div> you put the FBLike box in or put it in a "holder" <div> that you can style... or better yet, style both.

    One feature I REALLY, and I mean REALLY don't like about your site:

    window.resizeTo(screen.availWidth, screen.availHeight);

    The last thing in the world I want is someone else telling me how wide or how much of my available screen their Web page should take up.... and your site is not even 100% width (which is a GOOD thing). But PLEASE, don't spread your Web page window over the top of other work I have going on at the same time on my screen.

    My advice... kill that feature.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points