Jump to content
Sitecrawler

How do I make social like/share buttons horizontal?

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

Share this post


Link to post
Share on other sites

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

Edited by niche

Share this post


Link to post
Share on other sites
3 hours ago, niche said:

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

Hmm thank you. How do I do that?

Do I put a "<div> the float:left; property/value " right before the code I pasted. Or how should it be done exactly?

 

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Wrap all social links with a div

	<div class="social-icon-wrap">
	 
	</div>
	

Then use CSS

	.social-icon-wrap {
	padding: .25em;
	}
	.social-icon-wrap > * {
	margin: .25em;
	padding: 0;
	}
	

 

Share this post


Link to post
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;
    }

 

 

Share this post


Link to post
Share on other sites

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;
    }
	

Share this post


Link to post
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

Share this post


Link to post
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?

 

 

Share this post


Link to post
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

Share this post


Link to post
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/

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...