WordPress.org

Support

Support » How-To and Troubleshooting » Facebook and Pinterest button – How to get them side by side

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

  • I just added the facebook like and the pinterest button on my site. The problem is that the facebook and pinterest button are not on the same “line”. the pinterest button is a bit below the facebook button. Can someone help me to make them on the same straight line?

    Heres an demo on how it looks like: http://funny-pictures-blog.com/2012/05/18/robert-downey-jr-2/

    This is the code im using right now:

    <div align="center"><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=35&appId=1961208" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:35px;" allowTransparency="true"></iframe>  
    
    <a href="http://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="http://assets.pinterest.com/js/pinit.js"></script></div>
Viewing 15 replies - 1 through 15 (of 21 total)
  • 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="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
       <a href="http://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: http://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="http://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="http://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="http://assets.pinterest.com/js/pinit.js"></script><img class="alignnone size-full wp-image-37678" title="Like this picture of Facebook" src="http://funny-pictures-blog.com/wp-content/uploads/2012/05/arrow_left.png" alt="" width="32" height="21" /></div>

    still need help with this guys!

    Moderator Jose Castaneda

    @jcastaneda

    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: http://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="http://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="http://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="http://assets.pinterest.com/js/pinit.js"></script><img class="alignnone size-full wp-image-37678" title="Like this picture of Facebook" src="http://funny-pictures-blog.com/wp-content/uploads/2012/05/arrow_left.png" alt="" width="32" height="20" /></div>
Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Facebook and Pinterest button – How to get them side by side’ is closed to new replies.