Location of sicial media buttons on webpage

• 

  luxurytravelexpert · Member · May 27, 2015 at 1:58 pm

  • Copy link
  • Add topic to favorites

  Dear all,

  I have a question, which seem to be beyond my knowledge of CSS (no matter how hard I try it), so I hope someone can help me with this.

  I do upload a lot of photos with each blogpost (example: http://theluxurytravelexpert.com/2015/05/20/aman-at-summer-palace-beijing/). As a consequence, you have to scroll down all the way to find the social media share buttons. Is there a possibility to place the social media share buttons just below the title of each post? And if so, how can I do that ? To give you an example, if you click articles on CNN.com, you will see that the social media share buttons are located right under the title of the ach article (e.g.: http://edition.cnn.com/2015/05/21/asia/japan-aquariums-taiji-dolphins/index.html).

  Many thx!

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

• 

  staff-totoro · Staff · Jul 15, 2015 at 10:54 pm

  • Copy link

  Hi there,

  With a bit of searching, I was able to find this thread:

  https://en.forums.wordpress.com/topic/twenty-fourteen-social-buttons-and-sharing-help?replies=4

  And it looks like the code there may work for you as well. You can try entering following code into the CSS tab of your site customizer here: https://wordpress.com/customize

  Here is the code to paste in:

  .single #jp-post-flair .sd-sharing-enabled {
    position:absolute;
    top:0;
  }
  
  .single .post {
    position:relative;
    padding-top:50px;
  }
  
  .single #jp-post-flair .sd-sharing-enabled .sd-title {
    display:none;
  }

  Hope that helps. Please let me know if you have any further questions.

• 

  luxurytravelexpert · Member · Jul 15, 2015 at 11:23 pm

  • Copy link

  Thx so much for your help!

  When I implement the code, the social media buttons appear above the title of each blog. Can I locate them under the title ? Or even better, in the white space to the left of the grey ‘comment button’ (you can see in the following post what i mean as I did not implement that comment button yet in all posts: http://theluxurytravelexpert.com/2014/12/15/free-things-to-do-in-new-york-city/ )

  Your help is much appreciated!

  Kind regards

• 

  supernovia · Staff · Jul 20, 2015 at 5:48 pm

  • Copy link

  Try this:

  .single #jp-post-flair .sd-sharing-enabled {
    position:absolute;
    top:50px;
  }
  
  .single .post {
    position:relative;
  }
  
  .single .entry-header { margin-bottom: 38px; }
  
  .single #jp-post-flair .sd-sharing-enabled .sd-title {
    display:none;
  }

  This won’t float the icons near the comment button, but it will put them under the title.

• 

  luxurytravelexpert · Member · Jul 20, 2015 at 10:01 pm

  • Copy link

  Hi there,

  thank you for your reply. Unfortunately, it is not solved yet.

  Right now, the social media symbols are placed on the second row of the title, meaning they overlap with the title when the latter takes two rows.

  Is it possible to fix that, so that they don’t overlap with the title ?

  Of course, it would be even greater, when it would be possible to place them in the white space to the left of the grey ‘comment button’ (you can see in the following post what i mean as I did not implement that comment button yet in all posts: http://theluxurytravelexpert.com/2014/12/15/free-things-to-do-in-new-york-city/ )

  MANY THANKS!!

• 

  supernovia · Staff · Jul 24, 2015 at 10:46 pm

  • Copy link

  The trouble is that the position of these icons is related to the box the post fits in. They can’t be positioned in relation to the title or the Leave a Comment button.

  By default, they go near the bottom of the post box.

  Or we can put them at the top of the box, like Jerry did. We can try to position them an inch or so from the top of the box, like I did, and then create extra space around your title. But that does not work if your titles are too long.

  Jerry’s solution is the best one since it works no matter the length of your title.

• 

  luxurytravelexpert · Member · Jul 25, 2015 at 12:18 pm

  • Copy link

  Thank you for your help. I appreciate it.

  I now placed them at the top of my posts, above the title.

  Perhaps one other question: is it possible to move the ‘comment button’ – which is now located under the title (see: http://theluxurytravelexpert.com/2014/12/15/free-things-to-do-in-new-york-city/) – to here as well, so that i have one line composed of all the social media buttons and the comment button?

  Thx for your help