Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Add like + social icons to my header WordPress

I want to add like button and social/share icons to the header of my wordpress site [[LINK href="http://1000pugs.com"]]1000pugs.com[[/LINK]].

I know how to remove the current ones, but not how to replace them.

See attached.

Thanks!

Answers (4)

2011-11-06

Hardeep Singh answers:

For facebook like button, you can its code from link below

http://developers.facebook.com/docs/reference/plugins/like/

For other share icons you can use a service like two links below. These are popular ones and used on many sites. You can customize the icons as needed.

https://www.addthis.com/get/sharing
http://sharethis.com/publishers/get-sharing-button

They also have WP Plugins also available for integration.

If you need (paid) help on installation, drop me a private message and I'll help you out on that.


amanda bradshaw comments:

Thanks, but none of the plugins allow for custom placement. At least not by me. I tried 3.


Hardeep Singh comments:

Don't use the plugin, add the code directly where needed.

If you need me to get this done, I can do it for you.

2011-11-06

Romel Apuya answers:

Hi,

I can help you with this one.
Sent you PM.


cheers,

2011-11-06

rhand answers:

See a great tutorial here: [[LINK href="http://www.wpbeginner.com/wp-tutorials/how-to-add-facebook-like-button-in-wordpress/"]]http://www.wpbeginner.com/wp-tutorials/how-to-add-facebook-like-button-in-wordpress/[[/LINK]] It explains how to add a Facebook like button
Iframe version:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;
width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;">
</iframe>

XFBML version to use FB insights
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450"></fb:like>


amanda bradshaw comments:

Thanks Jasper, but I still need to put it in the header & I don't know how to style that (#tagline is div but... ?). Also need the other social share buttons in the header.

Maybe this is more of a CSS question??

2011-11-06

Luis Cordova answers:

yes it is more a css and wp hacky question:

do the following:

reuse one of the wp_nav_menu functionality so create an extra menu and use it to enter/order/reorder your social links, use custom links so you can define always the url of the social

then edit the template and insert the menu you just defined there on the section header

then work on css:

1 first make it horizontal divs menu

2 there is a way you can replace the text with an image with css so you do that for each icon social

3 adjusts distances etc, finish polish here and there

that is it, you have your modular social icons completely manageable from css and dashboard


amanda bradshaw comments:

Thanks, but that is way more involved than it needs to be. There is a place in the header where a div with social icons can go, it just defaults to the upper left and that's not where I want them to be. I just don't know how to align them correctly.


Luis Cordova comments:

so it is a css problem? in that case I can work on it, just private message me and provide me with login details and also a screenshot of the final result how it should look like and all the info, thanks