Grow your CSS skills. Land your dream job.

Trouble with adding like or share buttons for Google+ and Facebook.

  • # July 5, 2013 at 8:32 pm

    Hey folks,

    I had only partial success using the “[Lazy Load Social Media Buttons](http://www.paulund.co.uk/lazy-load-social-media “Lazy Load Social Media Buttons”)” tutorial. I’m trying to add like or share buttons to the footer for Google+, Facebook, and Twitter, but only the Twitter button appears [here](http://wpossidento.com/test/index.html “test site”). Any help would be appreciated. Thank you.

    # July 6, 2013 at 12:56 am

    That’s because you missing href values for both G+ and FB. Use the code from the vendor.

    # July 6, 2013 at 2:48 pm

    jurotek,

    That worked. The FB like button only displays on a public site and not on a local site, I think, but I’ll try to remember that.

    Thanks.

    # July 6, 2013 at 3:33 pm

    Oops, I’m still having a smaller problem. While the like and share buttons seem to display OK in a wide screen in Firefox 22.0, at narrow screen widths they stack as I wished, except that they are not well aligned horizontally. I built the [site](http://wpossidento.com/test/index.html “Preview site”) using Twitter Bootstrap. Any suggestions on the best way to get them to align while stacked?

    # July 6, 2013 at 5:55 pm

    The only reason they are positioned vertically at 768 width and below is that they are enclosed in span4 which is set to 100% width with media query for view-port width of 768 and below. You can’t align them right now as you’d like because span4 is inside the footer with attribute text-align center which the content alignment of span4 inherits. I would suggest that you create element class social and put G+, FB and Twitter in it and place it below the footer. Than you can display them inline at any view-port width instead having them stacked vertically which looks funky.

    # July 6, 2013 at 9:37 pm

    jurotek,

    I did as you suggested and also found something on Github which helped me to adjust the CSS. Everything is satisfactory now though I may make a few tweaks.

    Thanks again.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".