How to add Facebook Fan page AND Twitter to your webpage
Adding Facebook fan page to your webpage
- Go to Facebook, click on the link Create a page
- Follow the instructions and create a fan page
- After you have created the fan page, click on the link Facebook Fanbox Widget
- Logon to your facebook account, if not logged on
- Select the fan page you want to display on the webpage, if there
are more than one fan pages
- Then select what to include(stream, fans or facebook logo) on the fan page
- Now click on +Other, this will display the source code that you have to paste in your webpage
- Copy the code to your webpage
- For advanced customization, follow the link Fan
Box
Here are some quick tips to customization:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_GB"></script>
<script type="text/javascript">FB.init("APP_ID");</script>
<fb:fan profile_id="PROFILE_ID" stream="STREAM_VALUE" connections="CONNECTS" logobar="0" width="WIDTH" height="HEIGHT"></fb:fan>
- APP_ID: Application ID(do not change)
- PROFILE_ID: ID of the page associated with the Fan Box(do not change)
- STREAM_VALUE: Set to 1 to display stream stories in the Fan Box or 0 to hide stream stories. (Default value is 1.)
- CONNECTS: The number of fans to display in the Fan Box. Specifying 0 hides the list of fans in the Fan Box. You cannot display more than 100 fans. (Default value is 10 connections.)
- WIDTH: The width of the Fan Box in pixels. The Fan Box must be at least 200 pixels wide at minimum. (Default value is 300 pixels.)
- HEIGTH: The height of the Fan Box in pixels. The height defaults based on the elements you include in the Fan Box. For a Fan Box that contains only the
Become a Fan button, but no stream or friends, the height is 64 pixels. If you include all the features, the Fan Box is 554 pixels high.
You can also refer the Facebook Developer wiki - Fan Box
Add twitter to your webpage
- Go to the link,
Profile Widget,
enter your twitter username
- You can configure the widget using tools/instructions on the
webpage
- To see a preview click on Test Settings button
- To copy the code of the widget click on Finish & Grab Code button
and the copy the code snippet displayed
- Paste the code snippet on the webpage you want to display