Hello friends,

Do you want to promote your Facebook page in your website? And do you want to do this in a cool way? In this post I will show you how to achieve this by adding a floating Facebook Page Plugin in WordPress.

This is a great way to present your visitors with the option to follow your brand in this social media by simply click on the “Like” button or on the Call-to-action button that you have set up for your page. The floating Facebook Page Plugin will be constantly present before the eyes of each visitor.

Before I proceed I need to say something very important! The described method in this post will work, however it is using the deprecated “Like box” plugin code in order to function. Currently this code is automatically upgraded to the new Facebook Page Plugin but you should be aware that someday Facebook may decide to now longer support it and thus it won’t work.

This solution is in the form of a code that you need to copy&paste (and change a little) in a text widget for your current WordPress theme. So let’s start by doing this. Go to Appearance -> Widgets and add a Text widget in the widget area of your choice. I’d suggest to use the footer area if possible.

Next paste the following code in the text widget:

<div align=”center”>Thank you for visiting our site! </div>
<script type=”text/javascript”> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.tcplikebox”).hover(function() {jQuery(this).stop().animate({right: “0”}, “medium”);}, function() {jQuery(this).stop().animate({right: “-250”}, “medium”);}, 500);}); /*]]>*/ </script> <style type=”text/css”> .tcplikebox{background: url(“http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png”) no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .tcplikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .tcplikebox span{bottom: 4px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .tcplikebox span a{color: gray;text-decoration:none;} .tcplikebox span a:hover{text-decoration:underline;} } </style> <div class=”tcplikebox” style=””> <div> <iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FThe-CMS-Place-1458735701110090&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;”></iframe><span>By :<a href=”http://thecmsplace.com/“>thecmsplace.com</a></span> </div> </div>

If you click “Save” and then view your website you will notice a blue floating Facebook logo that will display the Facebook Page Plugin on mouse over. This code is currently set to promote the Facebook page of TheCMSPlace and it should look like this on your website:

Floating Facebook Page Plugin

Floating Facebook Page Plugin in WordPress

We would be really honored if you keep this code as it is and thus promote our Facebook page, but somehow I really doubt that you want to do this. That is why you need to change the code a little in order to adjust this for your own Facebook page.

Please scroll back to the code and change the everything that is colored in:

  • Green – this is a text that should fill the blank white spot that will be left out for the text widget in the respective widget area. You can either keep this text or change it or you can delete the whole <div></div> line;
  • Red – this is your Facebook page URL. You need to go to your page and copy everything after facebook.com in your browser’s URL box until the final “/”. Now paste it over the code marked in red and you are done;
  • Yellow – you probably want to show that this is your floating Facebook Page Plugin. So you can change the code here with the URL of your website and the anchor text in a similar way. If you don’t wish to display this you can delete the <span></span> line.

Now save the widget, clear your caching plugin (if you use one), return to your website and enjoy your floating Facebook Page Plugin in WordPress!

Bear in mind that in the past it was possible to tweak the code a little bit in order to use the functionality of the deprecated “Like box”. However this is pointless as Facebook will convert the code to the new Page Plugin automatically, as I have written at the beginning of this post. So keep to the changes that I have highlighted and you will receive the necessary result.

As for the blank space that might be left out in case you don’t want to display the “thank you” or some other text, you can try to write custom CSS and hide it by applying: display: none !important;

Also you may add a text widget in any PageBuilder that you might be using. This will enable you to use the floating Facebook Page Plugin on specific pages only.

This solution will be available on mobile devices if you are using a responsive WordPress theme. Otherwise you may need to configure your mobile theme to use this widget.

So this is it friends! Would you use this method? Share your thoughts, questions and suggestions in the comments below.

See you soon!