There are countless ways to incorporate Facebook pages onto a web community site. We are going to demonstrate two easy methods here. Before integrating Facebook with your site, you should be familiar with creating new content items using the custom content module and also how to insert a sponsor ad.
Adding a Facebook Like Box
To add a large Facebook widget as a content item on your home page, follow the directions below. This widget can also be customized by visiting this URL: http://developers.facebook.com/docs/reference/plugins/like-box. The directions below will demonstrate how to mimic the Facebook widget on IAAP's main community home page.
First, you will need to copy this code:
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/likebox.php?id=244316010398&width=380&connections=10&stream=true&header=false&height=585" style="width: 380px; height: 585px; overflow: hidden; border: medium none;" allowtransparency="allowtransparency"></iframe></div>
You will also need to identify what your Facebook page ID is. This is a number that can be found in the URL of your Facebook page. Here is an example:
 You'll need to copy and paste that ID number into the code:<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/likebox.php?id= 106529649401040&width=380&connections=10&stream=true&header=false&height=585" style="width: 380px; height: 585px; overflow: hidden; border: medium none;" allowtransparency="allowtransparency"></iframe></div> The last step is to create a new content item where you would like the widget to appear and pasting the code above within a custom content module:<div class="HLLandingControl HLAnnouncements"> <h2 class="Heading2">Become a Fan!</h2> <div class="Content"> <div class="HLContainer"> <iframe scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/likebox.php?id=106529649401040&width=380&connections=10&stream=true&header=false&height=585" style="width: 380px; height: 585px; overflow: hidden; border: medium none;" allowtransparency="allowtransparency"></iframe></div> </div> </div> </div> Adding the Find Us on Facebook logo with Like button as a sponsor adFirst, you'll need to obtain the code from Facebook for a Like button by visiting this page: http://developers.facebook.com/docs/reference/plugins/like Make sure that you use the full URL to your chapter's website as the "URL to Like." Facebook will provide you with a code that looks something like this:  Copy and paste that code into Notepad or another text editor where you can easily find it. Next, you'll need to copy and paste the code below into your text editor in order to setup the Find Us on Facebook logo: <a href=" http://www.facebook.com/iaaphq" target="_blank"><img src="http://www.iaap-hq.org/images/facebook_SM.gif" /></a><br> You will want to replace the highlighted text above with the full URL to your chapter's Facebook page. To find this URL, you will need to go to your Facebook page and copy the entire URL at the top of your browser. Unless you have setup a vanity URL through Facebook (which requires a minimum number of fans), your FB URL will likely be very long, like this: http://www.facebook.com/home.php?#!/pages/IAAP-Korea-Chapter-at-Large/106529649401040?v=wall&ref=tsSo if we were using that URL, the code would look like this: <a href=" http://www.facebook.com/home.php?#!/pages/IAAP-Korea-Chapter-at-Large/106529649401040?v=wall&ref=ts" target="_blank"><img src="http://www.iaap-hq.org/images/facebook_SM.gif" /></a><br> Next, we'll need to combine this code with our Like button code. Copy and paste the Find Us on Facebook logo code so that it is ABOVE the code we saved earlier for the Like button. It will look like this: <a href="http://www.facebook.com/iaaphq" target="_blank"><img src="http://www.iaap-hq.org/images/facebook_SM.gif" /></a><br> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcommunity.iaap-hq.org&layout=standard&show_faces=false&width=125&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:125px; height:65px;" allowTransparency="true"></iframe> The code is now ready, and we can now go to our site's dashboard to insert it as an ad. At the bottom of the dashboard, you will see a small "edit" link where you can manage your site's ads.  Next you'll need to insert the code after clicking the Rotating Banner radio button and selecting "HomeRight" as the Type of Ad:  Note: If you want the Facebook logo/like button to appear on inside pages, you would set the Type of Ad to InteriorLeft. If you would like the logo/like combo to appear on the home page and on inside pages, you will need to create two separate ads, one using the HomeRight ad type and the second using the InteriorLeft ad type. The code for each would be exactly the same. The finished product will look something like this:
|
|
