Adding share buttons in a post

  • Unknown's avatar

    Hi, Support sent me over to this forum.
    My problem: Is there a way I can include a share button or two at the beginning of my posts? My posts are generally long, with references at the end, so that the share buttons at the end of the post are probably very rarely seen by the readers…
    I do not talk nor write HTML-ish nor CSS-ish, so I need a user friendly advice. If anybody there is able to help, it would be great!

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

  • Unknown's avatar

    Howdy einarflydal!

    I created a code that will move all your share buttons right above your posts if that’s something you would like.

    .sd-content{
    	position:fixed;
    	top:50px;
    	left:460px;
    }

    If this isn’t what you would like, you could create a linked image that you paste into the “HTML” section of your post, at the begging of each post. If this is more to your liking, I’ll write up a code for you.

  • Unknown's avatar

    Wow! Help came that soon!
    Yes, I would like to try what you suggest. Where should the code be written? I never wrote HTML…

  • Unknown's avatar

    Hey again!

    Go to https://wordpress.com/customize/ → Click on CSS → Copy the code I provided above → Paste it into the CSS box → Click Save & Publish

    Let me know if you run into any problems!

  • Unknown's avatar

    Well, it almost worked, but the positioning is wrong. Should be on the white area, i.e. more to the right. I suppose it means something should be done with the “left:460px;” statement. Any suggestion?

  • Unknown's avatar

    Fixed it by myself! Very proud…
    Thank you so much for your help!
    But the text remains fixed at the screen when I scroll down.
    Could it be positioned at the top, so that it remains above the heading and dissappears upwards when scrolling down?

  • Unknown's avatar

    Congrats on getting it! You now how some CSS works! :D

    I am going to slightly change the code. Fixed was the wrong property to use. I changed it to absolute so the format is a bit different. Here:

    .sd-content {
        position: absolute;
        top: 20px;
    }
  • Unknown's avatar

    Well, you are flattering me. I tried, and added a line:
    .sd-content {
    position: absolute;
    top: 20px;
    left: 720px;
    }
    First, they seemed to disappear, as I was looking at the front page, not the bloggpost itself. Then I understood that mistake. But:
    Now, the buttons appear in a column to the right…
    Any suggestions?

  • Unknown's avatar

    The position fixed works different to absolute.

    The reason the icons a bunched up in a column is because the higher the number in left is, the further right it moves. Since you set it to 720px, it crunches everything to the right 720 pixels. Try lowering the number to 20px or similar.

  • Unknown's avatar

    Great. Issue resolved.
    I understand it was a piece of cake, but not to one who is completely foreign to programming, even after a whole life in the ICT-business…
    Thanks!

  • Unknown's avatar

    You’re welcome! Don’t worry, you did great! Thanks for being patient and understanding. Happy blogging!

  • Unknown's avatar

    Hello again,
    I just discovered that at the bottom of my posts, there is still the text “Del dette:”, i.e. “Share this:”. That text too should have been moved to the top – or deleted. Any suggestions?

  • Unknown's avatar

    Howdy again!

    If you would like it the text “Del dette:” moved to the top, use this code:

    /* Share This */
    .sd-title{
      position: absolute;
    	top: 5px;
    	left: 20px;
    	border-top: 0px !important;
    }
    
    body.highlander-light h3.sd-title::before {
        display: none !important;

    If you would like the text “Del dette:” deleted, use this code.

    .sd-title{
      display: none !important;
    }
  • Unknown's avatar

    Worked at firs try!
    Thank you!

  • Unknown's avatar

    Great! You’re welcome! :)

  • The topic ‘Adding share buttons in a post’ is closed to new replies.