WordPress.org

Ready to get started?Download WordPress

Forums

Facebook and Pinterest button - How to get them side by side (22 posts)

  1. phattrance
    Member
    Posted 2 years ago #

    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>
  2. charlietech
    Member
    Posted 2 years ago #

    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.

  3. Aaron
    Member
    Posted 2 years ago #

    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.

  4. charlietech
    Member
    Posted 2 years ago #

    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!

  5. phattrance
    Member
    Posted 2 years ago #

    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

  6. Aaron
    Member
    Posted 2 years ago #

    Is the code you are pasting in contain

    data-count="none"

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

  7. phattrance
    Member
    Posted 2 years ago #

    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

  8. Aaron
    Member
    Posted 2 years ago #

    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.

  9. phattrance
    Member
    Posted 2 years ago #

    that didnt work either. the data counter was still there

  10. phattrance
    Member
    Posted 2 years ago #

    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>
  11. phattrance
    Member
    Posted 2 years ago #

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

  12. Aaron
    Member
    Posted 2 years ago #

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

  13. phattrance
    Member
    Posted 2 years ago #

    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>
  14. phattrance
    Member
    Posted 1 year ago #

    still need help with this guys!

  15. Jose Castaneda
    Member
    Posted 1 year ago #

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

  16. phattrance
    Member
    Posted 1 year ago #

    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>
  17. Jose Castaneda
    Member
    Posted 1 year ago #

    Hm.. Strange. I would say try messing with the height of either one until you get it to align.

  18. phattrance
    Member
    Posted 1 year ago #

    any hint on what i could use? im not good at this :/

  19. Jose Castaneda
    Member
    Posted 1 year ago #

    One way of trying is in the one of the css stylecheets try inputting:
    iframe html .horizontal { margin-top: -1px; }

  20. phattrance
    Member
    Posted 1 year ago #

    i added the code u gave me in the css file, like this: http://i.imgur.com/EuF1o.jpg

    but it still looks like this: http://i.imgur.com/TjT11.jpg

    as you can see, the arrows are not synced and in "line" as the facebook and pinterest button.

    you can see it live here: http://funny-pictures-blog.com/

  21. phattrance
    Member
    Posted 1 year ago #

    did you take a look?

  22. Jose Castaneda
    Member
    Posted 1 year ago #

    Sorry for the late response. Yes, I did. That is really strange as to how it still keeps showing the way it does. This one is going to drive me crazy. :/

Topic Closed

This topic has been closed to new replies.

About this Topic