Can I style the like button?

• 

  averagelon · Member · Nov 11, 2014 at 12:50 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I was thinking about an odd fact of my blog stats: My most popular post of all time has only 7 “likes.” That’s almost 10,000 views for this one post, and yet only 7 people like it? It dawned on me that perhaps the design and placement of the “Like” button is to blame.

  I would like to style it differently: bigger, bolder to match my theme (I have custom CSS). And I want to place it in several locations on each post: at the bottom and in the right rail as a widget with customizable copy (as in, “Like this post”).

  Is it possible? If not, could you build this flexibility?

  Thanks,

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Nov 12, 2014 at 12:56 am

  • Copy link

  I’m so sorry but because of the way the likes are inserted into WordPress.com posts and pages uses something called an iframe, that means you cannot edit the appearance of the like button using CSS in the Appearance > Customize > CSS editor.

  You also cannot add functionality using CSS only, such as duplicating an HTML block (like the like button) more times on a post. You would need access to edit code in order to make a customization like that, and editing theme and plugin code is not an option offered here at WordPress.com.

  If you were to switch to a WordPress.org setup, you would have complete access to modify code or add code in the form of a plugin. However, that’s pretty advanced, and I would recommend hiring a developer to make the changes you described and also move the site for you if you feel strongly you want to make the change and would be willing to change hosts in order to do it. Before you consider a switch, please check out these links first:
  http://en.support.wordpress.com/com-vs-org/
  http://en.support.wordpress.com/moving-a-blog/#moving-to-wordpress-org

  One thing you can do here at WordPress.com, however, is use something called absolute positioning to move the whole likes block to the top of a post.
  http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  Here is an example you can try out by adding it to the bottom of your Appearance > Customize > CSS editor:

  .entry-content {
  	position: relative;
  	padding-top: 57px;
  }
  
  div.sharedaddy .sd-like {
  	position: absolute;
  	top: 0px;
  }

• 

  averagelon · Member · Nov 12, 2014 at 10:20 pm

  • Copy link

  Thanks so much. I would like to suggest this as a way for WP.com to enhance their offerings. I’d pay an annual fee for this.

• 

  designsimply · Member · Nov 14, 2014 at 9:58 pm

  • Copy link

  I will pass along your suggestion for future consideration. Thanks for talking with us about it!