Facebook and Pinterest button – How to get them side by side

Hey there,

Im not an expert but to move things in stuff like that in the website, you would have to access you’re css file. There, you can move just about anything as long as you know the class its in.

You can kind of cheat and change the height of the FB to 24px.

So use

<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo get_permalink($id); ?>&send=false&layout=standard&width=50&show_faces=false&action=like&colorscheme=light&font&height=24&appId=1961208" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:24px;" allowTransparency="true"></iframe>

It won’t be perfect since they arent the same size, but it is close.

A good tool to really help you play with css files and others is something call firebug. its in firefox, or better yet here it go.

getfirebug.com/

download it and master this and you’ll be fine. Good luck!

thx guys, the wpburns code worked fine. I was also wondering what code i should add if i want a Twitter icon there?

my twitters username is “dailylolblog” and i would like to have on WITHOUT the counter.

i used the code that i got from twitters page ( https://twitter.com/about/resources/buttons ) , but it is still showing the counter (which i do not want)

can someone help me with this?

thx

Is the code you are pasting in contain

data-count="none"

If not it needs to. If it does then it’s twitters problem.

This is the code i got from the twitter page:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="dailylolblog" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

but it is still showing the data count

That should work but since it doesn’t then Twitter is having an issue.

But just curious…

Change

data-count="none"

to

data-show-count="false"

and try it. I would expect it NOT to work but it could.

that didnt work either. the data counter was still there

i finally got the tweet button working without displaying the counter.

how can i get the code to display the hashtags?

the code in using so right now:

<script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
   <a href="https://twitter.com/share" class="twitter-share-button"
      data-url="<?php the_permalink(); ?>"
      data-via="dailylolblog"
      data-text="<?php the_title(); ?>"
      data-count="none">Tweet</a>

there must be some way to add hastags to the twitter button?

Honestly you will get better answers asking twitter support since this isnt a wordpress problem.

Hi guys!
how can i get the arrows to be in the same “line” as the facebook like and the pinterest button?

Screenshot: https://i.imgur.com/7T2Gz.jpg

The code im using:

<div align="center">
<img class="alignnone size-full wp-image-37677" title="Like this picture of Facebook" src="https://funny-pictures-blog.com/wp-content/uploads/2012/05/arrow_right.png" alt="" width="32" height="21" /> <iframe src="//www.facebook.com/plugins/like.php?href=<?php echo get_permalink($id); ?>&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=20&appId=196120853743077" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true"></iframe> <a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" class="pin-it-button" count-layout="none">Pin It</a>
<script type="text/javascript" src="https://assets.pinterest.com/js/pinit.js"></script><img class="alignnone size-full wp-image-37678" title="Like this picture of Facebook" src="https://funny-pictures-blog.com/wp-content/uploads/2012/05/arrow_left.png" alt="" width="32" height="21" /></div>

still need help with this guys!

I see no issue now. The elements line up fine on all my browsers.

This is how it looks like for me when using firefox and chrome: https://i.imgur.com/Dxv3B.jpg

as you can see, the arrows and pinterest button are not synced in place with the same row / line

The code om using:

<div align="center">
<img class="alignnone size-full wp-image-37677" title="Like this picture of Facebook" src="https://funny-pictures-blog.com/wp-content/uploads/2012/05/arrow_right.png" alt="" width="32" height="20" /> <iframe src="//www.facebook.com/plugins/like.php?href=<?php echo get_permalink($id); ?>&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=20&appId=196120853743077" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true"></iframe> <a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" class="pin-it-button" count-layout="none">Pin It</a>
<script type="text/javascript" src="https://assets.pinterest.com/js/pinit.js"></script><img class="alignnone size-full wp-image-37678" title="Like this picture of Facebook" src="https://funny-pictures-blog.com/wp-content/uploads/2012/05/arrow_left.png" alt="" width="32" height="20" /></div>