Jump to content

How do I make social like/share buttons horizontal?


Sitecrawler

Recommended Posts

Hi

So in the article below I have added "share" "tweet" and "pin" button, between the headline and the bread text. Now, I want those to be displayed horizontally, in a row. And not vertically as they are displayed now. How can I change that?

The code I have added in the post code editor for this single post is this:

image.png.7960a9c9729e88b434be087e3ace8c1e.png

I have added an image below, where I have circled the social icons that I am talking about. The link to the article is right above the image here:

https://valuetrendsblog.com/2019/11/did-dow-theory-just-trigger-a-market-buy-signal/823136523_Screenshotsocialbuttons.thumb.png.66e33f73bfab4958ac185126a822fe09.png

Edited by Sitecrawler
Link to comment
Share on other sites

wrap them in a <div> and give that <div> the float:left; property/value 

Edited by niche
Link to comment
Share on other sites

On 2/5/2020 at 6:40 PM, niche said:

wrap them in a <div> and give that <div> the float:left; property/value 

Hmm ok, thank you. Could you tell me exactly where I should put that <div> in there? Inside the existing code that I pasted? Or on both sides around it? I am a beginner when it comes to coding so I am not entirely sure where to put code.

And is the "float left" value pasted in CSS or the code editor?  How do I make them connect to each other? I mean the code in CSS and the code in HTML editor. I will try to do some tests with the links you posted as well. Thank you

Link to comment
Share on other sites

Div and p elements are block elements meaning each of these will stack below the previous filling the total width available to them. 'a' anchor and img elements are inline there width is the width of content within them and will butt together to previous. So all you need is a single div container that will contain only anchor elements and images within them.

I would try first removing paragraphs surrounding the social icons/links. Even the empty p paragraph will cause links to break to a new line.

Edited by dsonesuk
Link to comment
Share on other sites

Aha I think I get it now. Thanks. That worked.

I used this one without lots of Parapgraph signs:

<div id="fb-root"><script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/sv_SE/sdk.js#xfbml=1&amp;version=v5.0"></script><a class="fb-share-button" data-layout="button" data-size="small"></a><a=" href="https://www.facebook.com/share"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><a href="https://www.pinterest.com/pin/create/button/" class="pinterest-pin-button" data-pin-do="buttonBookmark"></a><script async="" defer="" src="//assets.pinterest.com/js/pinit.js"></script></a="></div>

Now, I just have to align them so that they are on the exact same wave-length if that is possible? You see the twitter button jumping up and the pinterest "spara"-button jumping down a bit too much.

Also, is it possible to increase/decrease the space between them and the headline, as well as the breadtext? Where the arrows are in the image.

Icons.png

Link to comment
Share on other sites

That worked. Thanks

But they are not totally aligned as you can see from this link: https://valuetrendsblog.com/2019/11/did-dow-theory-just-trigger-a-market-buy-signal/. But maybe that is not possilbe?

The CSS I used to get them the most aligned as I could see was this one:

 

.social-icon-wrap {
    padding: .05em;
    }
    .social-icon-wrap > * {
    margin: .1em;
    padding: 10;
    }

 

 

Link to comment
Share on other sites

On 2/9/2020 at 10:19 AM, dsonesuk said:

Try this, I think some of the icons have higher precedence margin, this should override it hopefully.

 


	    .social-icon-wrap > * {
    margin: .1em !important;
    padding: .5em;
    }
	

 

Hmm. I have tinkered with the above code and tried different values now. But I don't seem to get it right. Maybe I/we are missing some extra component to add to the code? Do you get them totally alignes at your end when using this code?

Thanks

Link to comment
Share on other sites

On 2/12/2020 at 11:19 PM, Sitecrawler said:

Hmm. I have tinkered with the above code and tried different values now. But I don't seem to get it right. Maybe I/we are missing some extra component to add to the code? Do you get them totally alignes at your end when using this code?

Thanks

So the most aligned I managed to get them was by using your code along with some tinkering. This was the one that worked best:

.social-icon-wrap > * {

                         position: absolute;

  clip: rect(0px,200px,100px,0px);

  overflow: hidden;

}

 

Now, I still see a bit of unalignment(especially with the tweet button). Anyone has an idea of how to make them even more symmetric?

They are in this article below the headline now:

https://valuetrendsblog.com/2020/01/why-amazon-could-soar/

For some reason this code aligned the pinterest button with the facebook buttons. But the tweet button went all haywire. :) Any idea on why?

 

 

Link to comment
Share on other sites

The only thing I can suggest is press F12 while looking at page in browser. The browsers web developer tools should appear, then inspect the icons elements to identify the cause of the misalignment, the applied css should appear in the css panel and identify where it is placed and line. Only then can you truly fix the misalignment. I don't currently have access to PC to do this.

Edited by dsonesuk
Link to comment
Share on other sites

6 hours ago, dsonesuk said:

The only thing I can suggest is press F12 while looking at page in browser. The browsers web developer tools should appear, then inspect the icons elements to identify the cause of the misalignment, the applied css should appear in the css panel and identify where it is placed and line. Only then can you truly fix the misalignment. I don't currently have access to PC to do this.

Ok, I will try that.

Another thing, is it possible to get icons like these to appear in every article between headlines and breadtext by adding code in a php.file? I have tried this but I only manage to get them to appear above the post's headline, like in the link below(on the top left: the three square symbols). I did this by adding code to the pages.php file. But is there a way to add them in a php-file so that they appear between the headline and breadtext? Like the ones we have talked about in this thread I mean.

https://valuetrendsblog.com/2020/01/why-amazon-could-soar/

 

 

Link to comment
Share on other sites

The code and class name no longer exist now? the position: absolute does absolutely NOTHING! to correct it. 

using <div id="fb-root" class="social-icon-wrap fb_reset">

div#fb-root.social-icon-wrap * { /* remove unwanted margins and padding anywhere*/
    margin: 0 !important;
    padding: 0;
    vertical-align: middle;
  }

.social-icon-wrap > * {

min-width: 65px; /*set min-width of elements */

}

This does work in chrome.

Link to comment
Share on other sites

  • 4 weeks later...
On 2/16/2020 at 6:52 PM, dsonesuk said:

If the html code does not include a Id reference, you can add this html code ONLY to it's own php file. Then use php include to place it anywhere you require it.

Hmm.

I managed to add the social icons, by pasting the code below, in the single.php-file. And then it appears above all posts(on top of them). Which is what I want. But, I want them to appear between the headline and the bread-text. But I can only make them(the icons) appear above the post/article. Ad not between the headline and bread-text.

What I want is to add this code in only one place, in one of the PHP-files if it is possible. And the reason for that is because I have heard that adding code in every single article/post is not ideal. And that it is better to add it in only ONE place. Preferably in one of the PHP-files. So that it appears at the same spot, in every article.

But where in the single.php-file (or any other php-file) should I paste the code exactly? So that it appears between the headline and the text, in every single post/article?

When I paste the code (the one further below) it always appears on top of the article/post. Above the headline. But where should I paste the code to make it appear between the headline and breadtext, in every single post on my website? And not above the post.

 

The code I have added is this one between from row 15 to 18 in the single.php-file:

 

<!-- Add icon library -->SHARE &nbsp;&nbsp;<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- Add font awesome icons --><a
href="https://www.facebook.com/share" class="fa fa-facebook"></a><a
href="https://twitter.com/share/?url=#" class="fa fa-twitter"></a><a
href="http://pinterest.com/pin/create/link/?url=#" class="fa fa-pinterest"></a>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...