How to Add a Facebook Fan Page Box To WordPress

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

4 Flares Filament.io 4 Flares ×

facebook logo

Over the last couple of weeks I have been thinking about adding a Facebook Fan Page. Well yesterday I finally did it. It is still a bit rough and I will be working on it over time to make it better. But I at least I got the my RSS feed added to the site.

So How Do I Add a Fan Page for Facebook To My WordPress Blog?

The first thing you need to do is create a fan page on Facebook for your blog. Once you have your fan page setup, then go to the Facebook Widget Fan Box page. Next, select the button that says “other.”

facebook fan page boxs etup

Third, you need to copy the code from the field below.

facebook fan page box setup

Once you have the code copied, you need to open your WordPress admin panel and click on the edit link under the appearance section. Once you have the editor open, you need to select the single.php or the index.php file depending on what theme you are using.

After opening single.php drop the code anywhere you want the fan box to appear. For this tutorial, I added the code to the end of the post after the content.

In order to put the code in place, scroll to the bottom of the page and look for this code.

facebook fan page box setup

You can then add the code just before <– /post –> and should look this.

facebook fan page box setup

After you get the code in place. Save and open one of your posts. Then adjust (stylize the code) the box by changing the width size so it sized the way you like it. Here is what the code looks like and what you need to change.

<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US”></script><script type=”text/javascript”>FB.init(“49ff6ecfec1295a960db7ada2d5b55c4″);</script><fb:fan profile_id=”295667978946″ stream=”0″ connections=”10″ logobar=”1” width=”665″></fb:fan><div style=”font-size:8px; padding-left:10px”><a href=”http://www.facebook.com/pages/Evolutionary-Designs/295667978946″>Evolutionary Designs</a> on Facebook</div>

To see what my custom box looks like, You can find it just after the bookmarking icons you can see the fan box. While your down there looking at it, become a fan.

EvolutionaryDesigns.net runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

About James

James spends most of his free time using social media and loves to teach others about design, web development, CSS, SEO, and social media. He is addicted to Wordpress, social media, and technology. You can reach him on his, personal website, Do not forget to follow him on Twitter @element321

Comments

  1. Truly is easy! I had one months ago. Makes me wonder why a lot haven't still implemented it on their blogs.
    My recent post Liane is Back! (and she's got loads to tell you!)

  2. This is something that I have been wanting to do for a while! Thanks for the information!

  3. That's it – I'm your fan now 🙂

    I've used that thing some time ago.. but I couldn't get any profit – only extended page loading time.

    Well.. If it depends on the number of your visitors using facebook.. I guess installing fan box for me should be delayed a little bit 🙂
    My recent post Dynamic Sidebar Plugin: Certain Widgets for Certain Web Traffic and Pages

  4. I have not got around to setting up a facebook fanpage, but I have seen quite a few bloggers doing it, and it seems to be quite effective!
    My recent post The Aweber Code….And Why You Need To Promote It!

  5. I have been looking around for a good post on how to make a fan page for facebook. I'm really glad I came across your post and I cant wait to do something like this for my clients
    My recent post Fackbook password reset scam!

  6. [url=http://free-lg-viewty-downloads.zanjatost.pp.ua/]free lg viewty downloads[/url]
    [url=http://free-dan-hill-mp3-download.zanjatost.pp.ua/]free dan hill mp3 download[/url]
    [url=http://cobra-sierra-35-bh-trailer.zanjatost.pp.ua/]cobra sierra 35 bh trailer[/url]
    [url=http://creative-artist-agency-caa.zanjatost.pp.ua/]creative artist agency caa[/url]
    [url=http://force-download-with-perl.zanjatost.pp.ua/]force download with perl[/url]

Trackbacks

  1. How to Add a Facebook Fan Page Box To WordPress | Evolutionary Designs…

    Simple steps to add a facebook fan page box to your wordpress driven website….

  2. Story added…

    Your story was featured in Featured in MMO Social Network! Here is the link to vote it up and promote it: http://www.mmosocialnetwork.com/Facebook/Simple_steps_needed_to_Add_Facebook_Fan_Page_to_WordPress

  3. Social comments and analytics for this post…

    This post was mentioned on Twitter by Element321: New Blog Post: How to Add a Facebook Fan Page Box To WordPress | Evolutionary Designs http://ow.ly/188Zk

  4. pligg.com says:

    How to Add a Facebook Fan Page Box To WordPress Single.php…

    Have you ever browsed a site and noticed that they have a fan page box under each submission instead setup under the standard sidebar widget? Have you been searching for a way to do this, looking for the perfect widget that can do this? Well look no fu…

  5. Tom says:

    RT @element321 How to Add a Facebook Fan Page Box To WordPress | Evolutionary Designs http://bit.ly/cNfHK6

  6. @Element321 I'm on your site! http://bit.ly/93wgEY via Twitte

  7. Rohit Sane says:

    RT @element321 How to Add a Facebook Fan Page Box To WordPress | Evolutionary Designs http://bit.ly/cNfHK6

  8. Ileane Smith says:

    RT @element321 How to Add a Facebook Fan Page Box To WordPress | Evolutionary Designs http://bit.ly/cNfHK6

  9. RT @Ileane: RT @element321 How to Add a Facebook Fan Page Box To WordPress | Evolutionary Designs http://bit.ly/cNfHK6

  10. Element321 says:

    Evolutionary Designs has fan page! Learn how to add a fan page to wordpress end of post page http://bit.ly/cXggwM #wordpress #facebook

  11. Paul Milford says:

    RT @Element321: Evolutionary Designs has fan page! Learn how to add a fan page to wordpress end of post page http://bit.ly/cXggwM #wordp …

  12. RT @Element321: Evolutionary Designs has fan page! Learn how to add a fan page to wordpress end of post page http://bit.ly/cXggwM #wordp …

  13. RT @element321: How to Add a Facebook Fan Page Box To WordPress http://ow.ly/188Zk

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 Flares Twitter 0 Facebook 4 Pin It Share 0 Buffer 0 Email -- Filament.io 4 Flares ×
%d bloggers like this: