Facebook FBML Tab
From Plings Info
For those with a Facebook Fan Page, we have started to collate some FBML / HTML code that can easily be integrated as a "Keeping Safe" tab. Many thanks to Andy Christmas for creating this - we welcome comments and developments:
Contents |
How to add custom 'Safety' tab (using Static FBML)
- Go to your Facebook page
- Click edit page (on the left)
- At the bottom, under more applications click browse more
- In the search apps search bar, type in FBML – click on Static FBML (should be the top result)
- Click add to my page (top left)
- Select the page or pages you want to add it to, then click close.
- Go back to your page and click edit page again.
- For the FBML app, click edit
- (if you’ve already got an FBML app, then you can click ‘add another FBML box’ at the bottom, if this is your first one, ignore this bullet point!)
- Under Box Title enter “Keep Safe Online” or whatever you want to call the tab.
- In the FBML box you can enter the HTML code with anything in. Copy and paste the code below which contains the e-safety links, and check out the section below for further links and code:
<p style="font-size:15px;">Check out these websites. They have some quality advice on how to keep yourself and you personal information safe online.</p> <ul> <li style="clear:left;"><a href="http://www.ceop.police.uk/report-abuse/" target="_blank" title="Advice Help Report - Click CEOP"><img src="http://www.ceop.police.uk/assets/images/report-abuse-btn.gif " height="50" width="142" style="float:left;zoom:1;margin:0 10px 10px 0;" /> <h3 style="font-size:20px;">Advice… Help… Report… – Click CEOP</h3> </a> <p style="font-size:15px;">Are you concerned about something that may have happened while online? Use the CEOP Control Panel and get the internet safety advice and help you need.</p> </li> <li style="clear:left;"><a href="http://www.direct.gov.uk/en/YoungPeople/CrimeAndJustice/KeepingSafe/DG_10027670" target="_blank" title="Directgov - Keep Safe Online"><img src="http://www.direct.gov.uk/prod_consum_dg/groups/dg_digitalassets/@dg/documents/digitalasset/dg_077934.jpg" style="float:left;zoom:1;margin:0 10px 10px 0" height="100"/> <h3 style="font-size:20px;">Directgov - Keep Safe Online</h3> </a> <p style="font-size:15px;">It's important to know how to stay safe when you're using the internet. You should never give out any personal information when you're online, no matter who you think you're talking to.</p> </li> <li style="clear:left;"><a href="http://www.thinkuknow.co.uk/11_16/" target="_blank" title="Think U Know"><img src="http://www.thinkuknow.co.uk/assets/images/ThinkUKnow_Parents/tukLogo.png "height="100" style="float:left;zoom:1;margin:0 10px 10px 0;" /> <h3 style="font-size:20px;">Think U Know</h3> </a> <p style="font-size:15px;">How much do you know about… How to have <strong>fun</strong>, How to stay in <strong>control</strong> and How to <strong>report</strong>?</p> </li> <li style="clear:left;"><a href="http://www.reclaimprivacy.org/facebook" target="_blank" title="Facebook privacy scanner"><img src="http://www.reclaimprivacy.org/images/logo.png" height="100" style="float:left;zoom:1;margin:0 10px 10px 0;" /> <h3 style="font-size:20px;">Facebook privacy scanner</h3> </a> <p style="font-size:15px;">Use this amazing tool to find out how secure your private information on facebook really is. All you have to do is go to this site, drag the bookmarklet to your toolbar, the click it when you're on facebook. It'll help you make you personial information more secure.</p> </li> <li style="clear:left;"><a href="http://www.profilewatch.org/" target="_blank" title="Profile Watch - share wisely"><img src="http://www.profilewatch.org/img/logo.png" width="150" style="float:left;zoom:1;margin:0 10px 10px 0;" /> <h3 style="font-size:20px;">Profile Watch – share wisely</h3> </a> <p style="font-size:15px;">Ever wondered what you were really sharing with non-friends through Facebook?use this website to find out and get your online privacy score:</p> </li> </ul>
- (If anyone if familiar with HTML, you’ll see that I am cheating and just using normal HTML instead of FBML…)
- Click save changes.
- Click at the top left of the page to go back to your page
- Click edit page again
- You’ll now see an application called ‘Keep Safe Online – FBML’ (or whatever you called it)
- Click application settings - where it says Tab: Available click add then click OK
- You shoud see the Keep Safe Online now (if you don’t, click on the >> button on the far right of your tabs and it may be in there. You can then drag it to go next to the info tab so its always visible).
- Job done!
Taking this further
The above how to shows you how to create a custom tab, and gets you to copy and paste some HTML in there. The real value is in being able to customize what goes in the tab. The next two sections will cover the setting up of a collaborative network to share safety links for young people, and second, how to edit the code to include other links.
Collaborative Network to share Safety links for Young People
Any suggestions on how to do this better are welcomed! So in order to be able to share E-safety links, you need to
- create a delicious account
- add users to your network
- click people
- click add a user to network
- add
- ConnexionsNorfolk
- Plings
- more to follow soon (i hope!)
Everyone in the network will be able to see everyone elses links. So for example, http://delicious.com/network/connexionsnorfolk/internet_safety or http://delicious.com/network/plings/internet_safety will show all the internet safety links.
Customizing the code to include these new links!
The code in the section above, will create a facebook tab that looks like this: below are explainations for those not conversant in HTML on how to customize each aspect of the tab content.
Introductory Paragraph
<p style="font-size:15px;">!!ANY TEXT CAN BE ENETERED HERE!!!</p>
Any text can be inserted here. if you wanted to have two paragrahps here, you'd just do this:
<p style="font-size:15px;">!!ANY TEXT CAN BE ENETERED HERE!!!</p> <p style="font-size:15px;">!!ANY TEXT CAN BE ENETERED HERE!!!</p>
List of links
After the introductory paragraph(s) is a list of websites. Each website or list item consists of the following:
<li style="clear:left;"> <a href="LINK TO THE WEBSITE GOES HERE" target="_blank"> <img src="LINK TO THE IMAGE GOES HERE" style="float:left;zoom:1;margin:0 10px 10px 0" height="100"/> <h3 style="font-size:20px;">TITLE GOES HERE</h3> </a> <p style="font-size:15px;">DESCRIPTION GOES HERE</p> </li>
If we wanted to add an extra link into our tab, to the website Wired Safety which Plings have bookmarked, we would do this:
- add the link to the website
- add the title of the website
- add the description of the website
- adding the image takes a little bit more work, but I think its worth it in terms of how the list looks. You can use any image you like, but if possible go to the website and find one that sums up the site (a logo is great!). You then need to find the URL of that image - how to do this depends on your browser, but in Internet Explorer, right click the image, click properties and then copy and pasted the address(URL). You can then paste this in to replace LINK TO THE IMAGE GOES HERE. You should be left with this:
<li style="clear:left;"> <a href="http://www.wiredsafety.org/index.html" target="_blank"> <img src="LINK TO THE IMAGE GOES HERE" style="float:left;zoom:1;margin:0 10px 10px 0" height="100"/> <h3 style="font-size:20px;">Wired Safety</h3> </a> <p style="font-size:15px;">WiredSafety provides help, information and education to Internet and mobile device users of all ages. We help victims of cyberabuse ranging from online fraud, cyberstalking and child safety, to hacking and malicious code attacks. We also help parents with issues, such as MySpace and cyberbullying. </p> </li>
<ul></ul>Finally…
This is a working document, and I'd appreciate any help with tightening it up! The aim of this is to be able to share links, and to be able to instantly make these available to young people in an attractive way!
