[Twenty Fourteen] Social Buttons and Sharing Help

theundisciplined · Member · Nov 17, 2014 at 1:38 pm
Copy link

Add topic to favorites
Hi guys,

(1)Unfortunately my knowledge of coding is next to non-existent. But I was wondering if anyone could advise me on how to add Social Media buttons to the header menu on my site using the Twenty Fourteen theme. I haven’t got the custom CSS upgrade yet, but am playing around with the preview to see if it’s worth it.

(2)My readership at http://www.theundisciplined.com isn’t bad, but I feel the sharing social media buttons being at the bottom of the post means that they are often of little use. Is there a way I can edit the CSS to place them at the top of each blog post?

Thanks

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Nov 18, 2014 at 12:31 pm
Copy link
For the second point you can move the sharing buttons (and in this example I’ve hidden the sharing header too) using the following code.
```
.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;
}
```
This is aimed at desktop size views, you might need to tweak it for tablet and mobile visitors slightly. I think it looks good, however you should keep in mind that people tend to share articles only after they’ve read them, so I would expect them to get used more at the bottom of your posts!
theundisciplined · Member · Nov 18, 2014 at 12:47 pm
Copy link
Thanks very much Hallluke.
I know what you mean, I would very much tend to share an article once I get to the very end. But statistics seem to show that people are more likely to use sharing buttons near the heading. In addition, with the number of footnotes and further sources i often use, the sharing buttons can need a bit of scrolling to get to.

Is there any way to perhaps keep the sharing buttons at the bottom, but also replicate them at the top? I have read that that is the ideal (even if it does look a bit excessive to some… myself included)

Thanks again
hallluke · Member · Nov 18, 2014 at 1:04 pm
Copy link
Im afraid duplicating them is not possible, CSS can only be used to style elements that already exist on the page.

As for your first question you can add social links in to your custom menu, and include a specific class so you can then target it with CSS. Once you’ve done that you can upload an image to your media library and use that in place of the text. In this example it assumes you used twitter as the class when setting up the menu item.
```
#primary-navigation li.twitter a {
  background:url("http://placehold.it/40x40") no-repeat center center;
  text-indent:-99999px;
  width:40px;
}
```
Again you might want to use media queries so this only applies in the desktop view as it makes the pop-out menu on tablets and smartphones look a little odd!

No items found.