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

Move facebook button WordPress



I would like to move the top facebook button to the far right, see attached image.


Answers (4)


Jarret Minkler answers:

You want to put the FB code inside the h2 header in the template

and then add

style="float:right" to the <a name="fb-share"> tag

Charlotte Raboff comments:

In th ccs file? or which file & line?

Jarret Minkler comments:

This should be in your main template file for the homepage.

Charlotte Raboff comments:

Index file? Pls let me know the exact name of the file.... , thanks!

Jarret Minkler comments:


Appearance ->Editor -> Main Index File (index.php)

Charlotte Raboff comments:

No it´s not in the main index file...index.php

Jarret Minkler comments:

It may be a script or function call then, can you see were it is creating the posts on main page? Which theme is this?

Charlotte Raboff comments:

Maybe you find it in the plugin - /

The theme is Shaken Grid

Jarret Minkler comments:

In /wp-content/plugins/facebook-fb-share-wordpress-plugin/fbshare.php

There is :

function fbshare_button($display = true) {
global $wp_query;
$post = $wp_query->post;
$permalink = get_permalink($post->ID);
$title = get_the_title($post->ID);

$options = get_option('fbshare-style');
$align = $options['align'] || "";
$text = $options['text'] || "Share";

$output = '<a name="fb_share" type="'.$options['align'].'" share_url="'.$permalink.'">'.$options['text'].'</a>';

if ($display) {
echo $output;
} else {
return $output;

Change this line

$output = '<a name="fb_share" type="'.$options['align'].'" share_url="'.$permalink.'">'.$options['text'].'</a>';


$output = '<a style="float:right; margin-top: -40px;" name="fb_share" type="'.$options['align'].'" share_url="'.$permalink.'">'.$options['text'].'</a>';


Julio Potier answers:

This is the new link :

<a share_url="" type="button_count" name="fb_share" href=";src=sp" style="text-decoration: none; float: right; margin-top: -40px;"><span class="fb_share_size_Small "><span style="cursor:pointer;" class="FBConnectButton FBConnectButton_Small"><span class="FBConnectButton_Text">Like</span></span><span class="fb_share_count_nub_right "></span><span class="fb_share_count fb_share_count_right"><span class="fb_share_count_inner">3</span></span></span></a>

I added this :
float: right; margin-top: -40px;

It works !

Charlotte Raboff comments:

thanks - but where do I find the link? In which file?


Svilen Popov answers:

Put it before H2 tag and add style="float: right;"

<a name="fb_share" type="button_count" style="float: right;" share_url="URL">Like</a>


Kristin Falkner answers:

You're using a plug-in to automatically input that code. You could modify the plug-in as Jarrett suggested, but if you do so, make sure to not update that plug-in as your change will get overridden. The other option would be to edit the plug-in options and have it place the Facebook Share automatically at the end of posts only. Then, manually place the Facebook Share button for the top in your index.php between the post title and content like:

<div id="facebook-share">
<?php if (function_exists('fbshare_button')) echo fbshare_button(); ?>

Then place:

#facebook-share {float:right;}

in your theme's style.css. You can also play with a negative margin-top value to get it aligned exactly how you want.