**THIS TUTORIAL IS ONLY APPLICABLE TO FAN PAGES. IT DOES NOT APPLY TO A REGULAR FACEBOOK FRIEND PAGE**
Since Facebook announced the ability to have your own personal url for your Facebook Pages, there has been an amazing increase in Fan Pages. One awesome feature that has recently been released is the ability to add a Facebook Fanbox Widget.
Like most new and cool things, I immediately had to try & add it to my page. So, I visited Facebook and noticed that the code was giving as a <script> which is not on the approved widget list yet on our network. But, as I scrolled down a little further, I found a version of the code in <iframe> which is supported by the network.
So what are Facebook FanBoxes?
The fanboxes are almost like mini versions of your fan page. It allows people to become a fan of your Facebook page right from your blog. It also shows some of your fans on rotating basis. The other fun thing is that you can bring in your wall from your Facebook page to show what is happening on Facebook on your blog.
How to install Facebook Fanbox on your ActiveRain Blog.
The <iframe> widget is rather generic and if you just copy & paste the generic version of the widget, it will be too wide & look funny on your blog here on ActiveRain. But, like any good community builder, I have taken the time to make the necessary changes so that the widget will look right on your page.
Two Versions for Your ActiveRain Blog.
The first version includes your stream from your Facebook Page Wall into your ActiveRain Blog. The finished product will look very similar to my personal widget over on the right. The first step is to copy this piece of code in it's entirety:
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php? id=YOUR ID NUMBER&connections=6&stream=1" allowtransparency="true" style="border: none; width: 205px; height: 600px;"></iframe> <div style="font-size:8px; padding-left:4px"><a href="YOUR FACEBOOK URL">YOUR FANPAGE NAME</a> on Facebook</div>
After you have copied the code above, you will then go to My Settings on your ActiveRain Blog. Paste the code into the Blog Description box. Once you have copied & pasted the code into your blog, it is now time to alter the coding to make it your personal page. Start by opening up a new tab on your web browser & bring up your Facebook FanPage. You are going to need to tab back & forth between the 2 pages to get all the information needed to customize your page.
You will notice 3 parts of the code above that I have placed in BOLD print. The reason for this, is that these three sections you must enter your information or the widget will not work properly. Also, it will be very generic & not customized to you.
The first section you are going to change is Your ID Number. This is found by visiting your facebook fan page. Under your profile picture there is a link to add a fanbox to your site. Click on that link. DO NOT USE THE CODE THAT APPEARS NEXT ON FACEBOOK.
Once it opens, you will want to copy 12 digit id number that is at the end of the URL. This is YOUR ID NUMBER.
Once you have that ID number go back to the code and replace the words YOUR ID NUMBER with the 12 digit number.
The next step is to get the link for your page. If you are lucky enough to have over 100 fans already, You have a custom URL. Mine is http://facebook.com/socialmediatips that would be the URL I would place in mine. But, if you do not have the vanity URL yet, your URL would look more like this: http://facebook.com/Real-Estate-Client-Referrals/101152061373. The number at the end of the URL is very important as that is part of the URL identifier so make sure you include it as well. You will paste the entire URL into the YOUR FACEBOOK URL section.
The third & final customization to the code is to title the fanbox widget at the bottom of your widget. I titled mine Social Media Tips, but yours might be Miami Real Estate, or Denver Locals, whatever you want to name it. The choice is yours. I would keep it to less than 5 words.
After making these changes to the code, make sure to click Update to save changes!
Some of you may not wish to have the wall included into your widget out of fear of what some of your friends might say, or to just make things simpler, so I have also customized the widget without the wall feed included. To make this widget on your blog, you will want to copy this code:
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php? id=YOUR ID NUMBER&connections=12&stream=0" allowtransparency="true" style="border: none; width: 205px; height: 440px;"></iframe> <div style="font-size:8px; padding-left:4px"><a href="YOUR FACEBOOK URL">YOUR FANPAGE NAME</a> on Facebook</div>
As above, follow the 3 simple steps to Customize your widget on your blog by changing the ID Number, URL & Fanpage Name. Once the changes have been made, DO NOT FORGET TO CLICK UPDATE ON YOUR ACTIVERAIN SETTINGS PAGE.
I will leave you with this final thought. While it seems like this is a rather complex & long laborious process, it really is not. I have already taken the hard part out by making the customizations to the html code to make this widget work properly and look good on ActiveRain.
My guess is that if you follow the steps above you can add this widget in less than 5 minutes. When Clint Miller Contacted me yesterday to add the widget to his Real Estate Client Referrals blog on ActiveRain, we were able to have it up & running in about 2 minutes time.
Also, if you are familiar with HTML codes you can make a few more customizations to this widget. For example, you may not want 12 of your friends showing at a time, or maybe you wish for none to be showing. This coding is fully customizable. If you would like some of those changes but are not familiar with HTML codes, let me know in the comments section and I will try to make the changes & post them below. One suggestion is this. Make sure to keep your friends showing on the widget in multiples of 3. If not, you will run into issues.
Lastly, if you have not already joined the ActiveRain Page, what are you waiting for? Use the Fanbox on the right of my page & become a fan today!
_______________________________________________________________________________________________________
I am the Co-Founder of 210 Consulting- Social Media Advisors. If you would like more information on any of the topics discussed in this blog, please contact me directly. Also, please visit my other online consulting blog for more social media tips, tricks and enhancements.
Feel free to subscribe to my blog to keep up to date with my latest posts of tips & tricks to enhance your experience on ActiveRain. If you would like, you can sign up to receive updates via email directly in your inbox.
Also, let's connect on these great social networks:
Useful Blog Posts:
Twitter Applications- 125 Twitter Tools To Make Twitter Easier To Use
Thanks Jeremy! I have been wondering how to accomplish this. Now All i have to do is figure out how to get my property listings under my blog!
Thanks for the tip - always nice to have clean looking options to cross network.
Duane, you can make each listing a blog post, you just do not get the full 225 points than
and you can also use postlets.com I believe. haven't figured out how to embed them yet myself
Jeremy! Thank you so much for your help in getting RECR's fan box on AR yesterday! Very much appreciated!
Awesome of you to share!
Great way to drive traffic to your Facebook Business Page and not to your personal profile.
Duane & Daniel- You can use postlets to design a listing post, but I would suggest writing the content from scratch & in your own words w/pictures. Google will rank those posts much higher than the Postlets ones because there will be more content for them to crawl. You will receive the 225 points for those posts as long as they are over 50 words in length & are not more than your 10 posts in a week. Hope this helps.
Steve- I really like this one!
Thanks for the Information. I hope you'll remember me if you learn of anyone moving to "The OC" and I will do the same!
Best regards.
Michael Caruso, Broker ABR ABRM CRB CRS GREEN GRI
2007 President, Orange County Association of Realtors
Very cool stuff Jeremy. I'll be calling to follow up on email I sent the other day. Appreciate all these great tips.
Jeremy nice not sure if I want a fan page but, why not. Is facebook going to get groupies next?
Anna- Check your inbox. I just responded. Sorry for the delay, this post 2 over 2 days to write. Been busy!
Larry- if you want to know why you should or shouldn't, I would definitely suggest talking to Mike Mueller above. He is an expert on Facebook Pages.
SWEET! I just added it to my AR blog ... now to see what other havoc I can wreck with this widget ...
Have to come back to this one when I have time but thanks for the info
Much obliged for this tip, Jeremy!
Have a good weekend!
Jeremy - I had been trying to figure this out all morning. thanks for the tip. you helped me out immensely! I did it! yay
Thanks, Jeremy, for the clear, concise instructions. I added this widget in less than 2 minutes!
These are exactly the kinds of posts that make you a Super-Genius, Mr. Blanton! I was just trying to figure this out because it wasn't working with just a copy/paste of the fan box html Facebook gives you. But, I tried it your way and, of course, it works! Yay!
Jeremy, Thank you so much for the info! It worked perfectly the first time I tried! Now to get some content on my AR blog =)
Jeremy - This ROCKS! I just did it, and it was only like 5 mins. Maybe now I can reach my 100 fans easier. Thanks!
Jeremy, I bookmarked this one before I even read it because I knew you'd give me the step by step directions I needed. And, I'm joining the Activerainpage today.
Thanks for the info!
This is a genious idea.
Thanks Jeremy. I had previously added a widget on my own, but it was not nearly as nice as this. Your directions were extremely easy to follow. Thank you.
Great stuff... thanks for the pointers!
thank you!!!!! I did it! I was tryingt o figure it out and glad you could help! :)
Wow, Jeremy! Thanks so much for posting this - you made it extremely easy and now I have that pretty box on my blog! =)
Thanks again!
~Maura Neill
Jeremy: Thank you for the clarification. I noticed once that a post i made about a listing was automatically given its ~200 points, and later they were gone. I guess for the reason you stated, and thanks for the tip on how to do it better.
Thanks for the great tip. I will try this out.
Thank You Jeremy! You made it look easy, but with my lack of skills I was whispering, "please work, please work, hope I did it right" as I hit update. It worked and it looks great!
Thanks Again!
Enjoy your weekend!
Well, I tried but didn't succeed like the rest of the people above. I will have to have help. :O(
I did notice that, when you add the html to your outside blog, it deletes part of the code when you save it. It leaves only the text link instead of the cool box with photos in it. This is the same for Word Press blogs. Is there another trick to utilize for the outside blogs? I added the Facebook logo on top of it to make it stand out a little more and draw attention to it, but that was about all I could do.
Thanks for the help, Jeremy. I need to allot a little bit of time to get this done.
Thanks for all the widgets I have never added them on my blog. I hate waiting for some of the blogs that have too many widgets
I'm not ready to tackle this yet but HAD to test. So you have a new fan, Jeremy!
HI Jeremy
Wow, I will need to take a day and go over this blog again. Not enough time right now, but you did a great job expalining in awesome detail. Kudos! :)
-Lisa
Oh Jeremy, I am in trouble already. I cannot find any ID numbers on my facebook page or settings. That looks really cool and I want to try it. Where do I find the ID number?
I did it but did it wrong and can't get 100 fans for Coastal Georgia Real Estate Chapman Realty...,..soemthing about being blonde......I know you are surprised
This is great! You do such a great job of explaining these types of things. I have bookmarked this.
Yet another great informative post today. Thank you so much!
Patricia AUlson/Portsmouth NH Real Estate
I really hope I can understand these directions to obtain a successful result
JEREMY, you are my HERO! I am so not-good at the mechanics of internets-stuff, but was wondering how to make a direct link to my FB page! Can I put it into my e-mail signature, too....?
Sharon Kotula
Argent Decor
Phoenix Vacation Home & Model Home Furnishing
www.ArgentDecor.com
What kind of consulting are you doing that you can fit it into a busy schedule of ActiveRain support and selling real estate?
Thank you so much for this information. This will be one of my projects for the weekend.
I have added FaceBook Fan Page widgets on a couple of my sites and was wondering about Active Rain... thanks!
Jeremy - well it worked like a charm, except for the Avatar from my business page. Thoughts?
Jeff
Jeremy,
That's good news. Just have to put my arms around the entire process and give it a shot. Maybe I can make it work.
Thanks Jeremy. Gotta try it out when I have a spare moment.
Jeremy.. thanks for the info... I book marked this to work on this weenend.
Heather- See comments on your Reblog
Evelyn- I believe you are running into problems because you are trying to make this widget with a regular facebook page & not a fan page. They are two different entities. If you are unfamiliar with Fan Pages, contact Mike Mueller.
Julie- Your widget is fixed. You didn't read my tutorial LOL!
John- Good Question! Luckily I am not selling real estate, and really not doing consulting. I am just sharing my social media tips. AR keeps me way too busy.
Thanks for the info. It's been bookmarked for use later when I have time to try it out.
Jeremy - Great tutorial ! Is pretty straight-forward and a great idea. Stephanie and I have not set up a "fan page" as of yet on FB. Are we missing out ? Have heard mixed messages in regards to the benefits. The widget looks great.
Thanks for the heads up on the diff between regular and business FaceBook.
Thanks for this tutorial, Jeremy! I had already added this to my Wordpress blog using the Javascript code and was wondering how to add it to AR, you made it very simple, like 2 minutes work and done!
Thank you, replaced what I had.
Awesome need more coffee will work on it later when I am awake, html makes me think....
Hi Jeremy. Am I the only one out there who doesn't know the difference between a friend page and a fan page? I tried to complete these directions, but can't find my fan page... Can you help?
Hi Jeremy, Thanks for another great blog. You made it look very easy; however, I will have to work on my skills, getting it on my page :) thanks so much!! I see you are from Myrtle Beach. We LOVE Myrtle Beach!!!
Hey Jeremy, great stuff my friend. Question - how do you get the vanity URL from Facebook?
You are one of the most helpful people in the AR world at improving our platform. Excellent and thanks.........
Thanks for the info Jeremy. Followed it step by step and it went very smoothly! Now to add it to our website too!
I'm fumbling through creating a business page. I think I did something wrong. Is there anyway to delete a facebook page with a different email than another facebook page that I'd like to keep?
Thanks for the information. I am going to book mark it for the future.
Jeremy,
Thanks for testing AND sharing! I think this is a bit beyond my internet abilities right now, but I'm learning daily from these informative Blogs!
Kathy Opatka
Jeremy - thank you for the tutorial, this will be a project for us this week. It will be much easier now :)
Jeremy,
You made this so easy! Thank you. I absolutely love it!!!!
Cool now I can get that done. I was wanting too. Also thanks for fixing me up so quickly on my new badge!
Jer - That was supremely easy. I think I will add it to my primary website as well!
this is so great and easy to implement!
There have been many that have asked the difference betweeen Pages & Profiles on Facebook. If you are not sure of the differences or why you would need a page, Visit this awesome post by Mike Mueller that explains in great detail the differences here.
Jeremy.... way cool dude... ;o) Thanks for this easy to follow explanation, especially since AR hasn't approved the regular code. I was wondering about Fan Box and you just made it easier. Now, to go try it and see if I can get this to work before I go to bed. thanks
Jeremy... presto... ;o) it worked, thanks my friend. Question, how do I get it to show 12 fans and not 6. thanks
Jeremy,
Thanks....I know you are always there when I need you and no I never read instructions.....it is the masculine side of my personality.
first thing on my "to do" list this week. thanks so much!
Jeremy - I tried to complete your instructions above, but I don't have, or can't find my facebook fan page. I guess I don't know what you are talking about. When I go to my facebook profile picture, I do not have a link to add a fanbox to my site??? PLEASE HELP.
"The first section you are going to change is Your ID Number. This is found by visiting your facebook fan page. Under your profile picture there is a link to add a fanbox to your site. Click on that link. DO NOT USE THE CODE THAT APPEARS NEXT ON FACEBOOK."
Once it opens, you will want to copy 12 digit id number that is at the end of the URL. This is YOUR ID NUMBER.
Once you have that ID number go back to the code and replace the words YOUR ID NUMBER with the 12 digit number.
Jeremey,... Just a FYI... I only had 11 digits. I checked 3 times.. so maybe I had 1 less because I got my fan page earlier.
TROY Erickson.... if you have a regular facebbok profile, this can't be done. Jeremey's blog is about those that have a fan page. Check out my profile page : www.facebook.com/jbelonger and my fan page for the FHA Expert .. go to... www.facebook.com/thefhaepert Maybe this make it more clearer. thanks
Troy- Visit the link I left in comment #69 it gives an excellent explanation of the 2.
Jeremy - That worked great! Thank you very much!
Thanks for the great tip Jeremy.
Jeremy --- awesome job --- I will have to go back over it again before I attempt to do this, but you bet that I will do it. Thanks for the hard work, there.
Thanks Jeremy! I used your instructions and they worked great -- except I think I made some kind of mistake and I can't figure out what to do. In the fan box I see the Portland OR Real Estate -(only it in blue for the link) - and then there is a cut off section: 's feed: Activerain Not sure if I did something that made that happen or what. So I'm working on it to figure it out! I don't see anything similar on other Fan Boxes, so I think I goofed somehow. But except for that weirdness - it looks good. thanks for the helpful post.
So if I say I am having trouble with your instructions will you put my Horseallicious fan page on my AR blog?? ;-) Just asking.
Thanks. Good post.
That did the trick. I was having problems with the code FB gives you and it only showed up as text and really small and generic.... so thank you so much!!! I love your posts!
That did the trick. I was having problems with the code FB gives you and it only showed up as text and really small and generic.... so thank you so much!!! I love your posts!
Jeremy, this is another example of why you have been such an amazing asset to all of us here in the Rain!!! Thanks :)
Sharon
Jeremy - GREAT info....THANKS!! I've updated my AR page to include this but have bookmarked your post in case computer gremlins suck out my info. :)
thanks for the info Jeremy..I'm having trouble getting my title to fit properly into the fan box any suggestions? thanks for getting me this far
Wow, great information but after quite a few attempts I did it. I finally was able to implement the steps. I was hung up by the fact that I couldn't get the iframe code on Facebook. Thanks for the great blog Jeremy.
Excellent! Thank you so much!!!
Thanks for the input & I'll be back when I have more idea
Tried and tried and can't seem to get it! I thought your instructions were pretty staightforward but I must be missing something! Help!!
Thanks Jeremy! I just put this on my page & it worked perfectly!! It only took bout 3 mins... :)
How easy was that! Thanks!!!
Thank you so much - will check this out later today and hope it works for me --- I am not good at doing these types of things -- Have a a great day!
I am usually good at this stuff, but I can;t get it to work.
HELPPPPPP!!!!
Thanks
Wow, Thanks. I just recently created a Fan page, so this comes in handy. Thanks
Thank you! I was going nuts trying to figure this out on my own. You da man!
Thanks for the hookup! Adding it to my profile now!
Jeremy - I had my fan box up. For some reason it is no longer updating with my new posts on my fan page! Have you heard anything about this? If you look at my blog, the "visible" post is from a week or so ago, even though I update daily. Interested to hear if you have any tips!
Thanks....
Thank you again Jeremy for the great help. I went to my FB Fan Page and could not locate the link under the Profile Photo to add a fanbox. Any suggestions would be so appreciated. Thank you.
Thank you again Jeremy for the great help. I went to my FB Fan Page and could not locate the link under the Profile Photo to add a fanbox. Any suggestions would be so appreciated. Thank you.
Thanks so much. Did it in about 5 minutes like you said!
wow thank you just what I was looking for I appreciated it very much, one final question how do I add the facebook button so that it goes to "become a fan" page on my face bood
Jeremy,
That worked great, i printed your instructions for easier viewing as i did it in the required 5 minutes or less.
Keep sending cool ideas and treats
don
Excellent tip Jeremy!
Thanks for the heads up buddy!
Jeremy--found this info by searching AR. Way cool! I got it set up, and it works great. One question though...(I didn't see it addressed in the previous comments, maybe I missed it?) Is it possible to also add the fan box to an AR outside blog?
Thanks!
Jeremy - This looks very straightforward except for the fact that I can't find the link to add a fan box under my picture on my fan page. Could this be because I have already added a fan box on that page? And if so how do I find the number?
Jeremy, I followed your directions and at this time I have both versions on my blog. My question is why don't I have the small box "Become a Fan"....I have "You are a friend" ... can you tell me what I am doing wrong.
Jeremy....God Bless you my child! I was trying to just copy and past from the Facebook app and I was getting so frustrated. Then I popped back over to AR and searched "Add Fan Page Box" and there you were.
Followed your instructions and WHAM....Success!
i guess this means you are the best?