How to Put Social Media Buttons below Each post?

20 replies
I want to put Social Media Buttons Below Each post like this site I have in blogger - Diary of the Narcissist

I want to put something of the same thing in wordpress.org site but I am still trying to figure out PHP.

I have found a code that will give my website the desired effect.

The css to be added to the styles.css is this

.social-single {
margin: 17px 0 0 0;
}
#twitterbutton, #likebutton, #stumblebutton, #sharebutton, #linkedinshare {
float: left;
display: block;
}
#likebutton {
margin-top:0px;
margin-left:-3px;
}
#sharebutton {
margin-left:0px;
margin-top:0px;
margin-right: 5px;
}
#stumblebutton {
margin-left: 20px;
margin-top: 1px;
}
#linkedinshare {
margin-left: 20px;
margin-top: 1px;
}
#plusonebutton {
margin-left: 20px;
margin-top: 1px;
}
The Code to add to the single.php is this

<div class="social-single">
<div id="twitterbutton"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><div> <a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-counturl="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-via="username" data-related="username">Tweet</a></div></div>
<div id="likebutton"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=button_count&show_faces=false&width=100& action=like&font=verdana
&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>
<div id="sharebutton" style="padding-top:1px;"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<div id="stumblebutton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script></div>
<div id="linkedinshare"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script></div>
<div id="plusonebutton"><g:plusone size="medium"></g:plusone></div>
</div><br />
But I dont get the same effect. The buttons appear in a vertical line instead of a horizontal line.

ie assuming each of the smilieys is a social media button it appears as



instead of

What am i possibly doing wrong. Please help me.
#buttons #media #post #put #social
  • Profile picture of the author imsirigiri
    Why dont you use plugins on WordPress to achieve the effect?

    For eg: You can use this plugin in WordPress WordPress › Socializer! « WordPress Plugins

    Search for some more plugins which help you out in placing social networking buttons to share your posts. That would be much easier than hard coding.

    Reinventing the wheel, not good.
    Signature
    Need a Technical Support VA on an Hourly Basis? || Need AdSense Microniche Sites Research and Development? PM me.
    {{ DiscussionBoard.errors[6079552].message }}
  • Profile picture of the author msu
    Another good plugin is AddThis.com - probably about the easiest going, it also works for non WordPress sites too.
    Signature
    New to WordPress? Save time with my beginner's guide:
    WordPress Step-by-Step
    (for Kindle & Kindle Apps)

    I'm a top-notch WordPress developer: hire me
    {{ DiscussionBoard.errors[6080380].message }}
    • Profile picture of the author Torreylee
      Originally Posted by msu View Post

      Another good plugin is AddThis.com - probably about the easiest going, it also works for non WordPress sites too.
      Yup, that's what I use with 0 problems.
      Signature

      You Wanna Learn About The SEO Underground?

      Learn more at backlinkcheckerseo.com[/B].

      Learn about financing your small online business with peer-to-peer lending today.

      {{ DiscussionBoard.errors[6342942].message }}
    • Originally Posted by msu View Post

      Another good plugin is AddThis.com - probably about the easiest going, it also works for non WordPress sites too.
      Me too using Addme Its great and easy to implement with any kind platform.
      Signature
      {{ DiscussionBoard.errors[6354728].message }}
  • Profile picture of the author ProAffiliate01
    I could make good use of this code. Thank you. I have tried the AddThis code. It is one of the most helpful and easy ones to use.
    {{ DiscussionBoard.errors[6080988].message }}
    • Profile picture of the author abhishekranjith
      Originally Posted by ProAffiliate01 View Post

      I could make good use of this code. Thank you. I have tried the AddThis code. It is one of the most helpful and easy ones to use.
      Please let me know where in the single.php you added the code
      {{ DiscussionBoard.errors[6083164].message }}
  • Profile picture of the author abhishekranjith
    Well I finally made it work all by my self lol It turned out to be pretty easy. I removed the style sheets and the code in the html. It worked just as I expected. I added my own codes for pin interest and addthis. Thanks everybody
    {{ DiscussionBoard.errors[6083152].message }}
  • Profile picture of the author Allcityloan
    i want to plug button of facebook and twitter to my site.can anyone tell me how i get it
    {{ DiscussionBoard.errors[6085081].message }}
    • Profile picture of the author abhishekranjith
      Originally Posted by Allcityloan View Post

      i want to plug button of facebook and twitter to my site.can anyone tell me how i get it
      Use Addthis plugin. If you cant get it right, ping back here and I will give you a manual code you can add to your single.php
      {{ DiscussionBoard.errors[6085539].message }}
  • Profile picture of the author Yuvraj Pratap
    you can use floatingsocialmediabuttons.com
    {{ DiscussionBoard.errors[6213133].message }}
  • Profile picture of the author sandeep552
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[6218500].message }}
    • Profile picture of the author abhishekranjith
      Originally Posted by sandeep552 View Post

      You can placed media button under each post by use setting where you get tool for insert social media.
      I dont think I quite follow. How do you do this?
      {{ DiscussionBoard.errors[6218828].message }}
      • Profile picture of the author Karen Blundell
        just ignore the trolls who think they know stuff but don't really know squat...it happens quite a bit - and it's simply a tactic for running up their post counts and exposing their sig files. :rolleyes:
        Signature
        ---------------
        {{ DiscussionBoard.errors[6220301].message }}
  • Profile picture of the author dbwebdesignz
    Use a plugin if you are on the wordpress platform it will make your life so much easier
    Signature
    Lets Us Do Your Back linking >>> The Best SENuke X Campaign <<< Panda and Penguin friendly

    Cheap Web Hosting £2.49 per month
    London Website Design
    {{ DiscussionBoard.errors[6220574].message }}
  • Profile picture of the author teguhyuliantos
    If you want put social media button after your post, you can install some plugin. One of the best plugin for social media is "sociable". Also, you can customize various size as you want.
    {{ DiscussionBoard.errors[6343485].message }}
  • Profile picture of the author EndTheTrendNow
    If you can read a little html, you should be able to go into the WP editor and experiment with the template file that displays posts and figure out where code can be added.

    I had to do that with my latest wp template and figure out where to put a banner add. It took me a few attempts where I would place the code save the file and then look at it in the browser. Eventually I figured out where in the code to add it.

    Just remember to backup the file before you start mucking around with it.
    Signature

    Carpe Diem EndTheTrendNow.com
    Check out SEOBloggerBook for SEO tips.
    Check out AntiqueOutings.com for Antique Tips
    Check out MiniatureReview.blogspot.com for Gaming with miniatures.

    {{ DiscussionBoard.errors[6382325].message }}
  • Profile picture of the author john-7665
    its really good to step into wordpress. if you are using wordpress and want social media icons to work beneath each post, its very easy to find out the plugins which will do the same for you. you don't need to have good knowledge of php or html.
    {{ DiscussionBoard.errors[6406451].message }}
  • Profile picture of the author Jdunhin
    Jetpack, share daddy is awesome. For wordpress it is a nice plugin to use!
    Signature

    We handle all your WordPress Content,Theme and Plugins updates!
    iAdminWP

    {{ DiscussionBoard.errors[6406546].message }}
  • Profile picture of the author eluminousdev
    Its seems some minor css issue but I would recommend you for such things ready-made plugins are available which reduces our manual efforts with customize HTML.
    You can try from addthis site.
    {{ DiscussionBoard.errors[6433377].message }}

Trending Topics