customizing the facebook registration widget with javascript - facebook

Is anyone aware of any restrictions Facebook places on modifying the look and feel of their registration widget?
We'd like to use the FB Registration widget on one of our pages, and then use jQuery to hide certain divs, text, etc. to make it a bit more compact and fit aesthetically better into our site.
Is is 'legal' or acceptable to do? I'm attempting to read through all of their documents to find out, but if someone already knows, that would really help.
tia

Facebook uses iframes to load the registration plugin on your website. So there is no way you can change the looks of it with css or jQuery.
You can just customize however you want according to guidelines present here.
https://developers.facebook.com/docs/guides/web/

Related

Remove facebook fan page profile picture on like box plugin

I just want to ask a simple question about facebook like box http://developers.facebook.com/docs/reference/plugins/like-box/ I just want to remove the fan page profile photo.. Is there a solution for this? Thanks!
First: It is against the facebook rules to change or hide things in the social plugins.
That being said, afaik it is not possible anymore to use custom css in the social plugins. A long time ago you could pass the absolute URL of a css file to the plugin code but it does not work anymore.
I would recommend using a simple Like button. If you really need the stream of the page too, you could just use an app to read them by yourself, in that case even with your own design.
I just thought to answer this question as someone else might need this information in the future. All you need to do is reduce the width of the facebook like box. That’s it. I have done that in my website www.bringhopes.ca.
You can add the following CSS to hide the image
img.profileimage
{
display:none;
}

rendering facebook wall in an iframe tab- fb:wall replacement and other options

I am trying to build a Facebook app that generates a tab that includes a page's wall complete with "post to wall" dialog below some content. So far the only app that I know that does that is Bandpage (for example http://www.facebook.com/beyonce ).
It turns down that rendering a wall this way in an iframe is not trivial. Here are some of the approaches I've researched:
Using curl to scrape a wall: not only is this an ugly solution, but Facebook protects against that.
Using Social Plugins ( http://developers.facebook.com/docs/plugins/ ): Like Box (http://developers.facebook.com/docs/reference/plugins/like-box/) renders a wall, and with "faces" and "header" options turned off + Autoresize js call it almost looks like what I want, but does not include a comment field and the look of the box can't be customized.
Using Graph API it's easy to get the wall's feed in JSON, but then rendering and styling it is a nightmare - there must be a simpler way.
Using fb:wall - this is deprecated and will be turned off in a few months, but it's not even working as a stopgap. Or does it?
Using fb:fan which supposedly takes a css stylesheet.
So - it seems possible to render the wall in a tab since Bandpage is doing it, but how?
This might possibly help you overcome your problem in #3 :
Using Graph API it's easy to get the wall's feed in JSON, but then
rendering and styling it is a nightmare - there must be a simpler way.
Trying to "recreate" the look and feel of any good implementation is a hard task. The following link might assist you with styling your own elements to look like facebook elements.
http://ckrack.github.com/fbootstrapp/
Fbootstrapp is a toolkit designed to kickstart development of facebook
iframe apps in both relevant sizes. It includes base CSS and HTML for
typography, forms, buttons, tables, grids, navigation, and more,
styled in the typical facebook look and feel.
Here are a few examples of the styling :
(source: softpedia-static.com)
Notification boxes
(source: softpedia-static.com)
Form Elements
(source: softpedia-static.com)
In closing I would like to bring to attention the ever nearing deprecation of FBML. We as facebook developers are solely responsible for keeping up-to-date with the changes that 3rd party API's, on which we base our development, make to their systems. There are no alternatives to FBML, only new (and in many cases) better ways to display/extract data from facebook's servers.
A great place to keep updated on changes and new features would be the Facebook Developers Blog and the Facebook Developers Roadmap.

Add email page link button to a webpage

I'm adding social media buttons to my website. Facebook like, Twitter tweet etc buttons were very easy.
However I also need an email the page (or rather a link to the page) button. I have trawled the internet but cannot find a simple and good implementation.
Ideally I'd like to be able to copy some reliable code, and have the button look in the same style as the ones on this page: http://dl.dropbox.com/u/6920023/testbuttons.html
If anyone has done this before I would be very glad to hear from you :)
Thanks in advance.
Why not just use the AddThis service? You simply register, provide them with your website url and then select the social media / link mechanisms you would like to use on your site. At the end they provide you with a block of HTML code to drop into your site and low and behold, the buttons and appearance you selected will be present. You can also select mechanism such as pain old email when setting it up.
An example of it in place;
Here's the link: http://www.addthis.com/
As far as i know, you will have to use Mailto: apart from doing some deep Gmail, Yahoo and Hotmail API integration. That's about as good as your going to get.
You can dynamically fill out subject, body, cc fields etc using javascript/php (or whatever you are using)

Facebook fan page canvas source?

Im trying to understand how to learn reading the source of a facebook fan page. So far, I can only get the layout displayed while viewing the source.
Here is an example: If you go here:
http://www.facebook.com/pages/See-oho-nieps-YothG-RRofiLe/106340746065367#!/pages/Milton-Keynes-United-Kingdom/IF-MR-BEAN-WAS-IN-AVATAR-HE-WOULD-LOOK-LIKE-THIS/302690570115
That canvas page requires you to be a fan of the page. This is done with:
content here
My question is, why cant I find the FB:visible code in the source of that page? I would be grateful for any guidance!
I believe it's because the FBML is interpreted server side, so if it output the markup their parser would have to be Javascript based, causing a greater risk to security (?) and slowing the process down entirely.
I'm not too familiar with it though, I must be honest.

How do you remove the "box head" in a Facebook application?

I'm currently developing a Facebook application which will eventually end up on a Facebook Page. The problem is that I don't know how to remove the box header (handle?) with the application name and the close-button.
I've seen other applications on Pages being able to remove the header. Look at Apples Page here: http://www.facebook.com/home.php#/pages/Apple-Students/11147074409
Is it because they use an IFrame? I've tried that as well but I still need to call setFBML and embed an IFrame inside it.
I think you're right about the IFrame in the Apple page. It looks like the entire left column is a single IFrame. Still, it's not clear how they managed to get rid of the handle bar. Now I'm curious too...
Is is possible that Apple paid facebook to remove the header you are talking about?
Maybe it's a special case and they have a special API/UI for people who are willing to give them cash money?
I wrote a Facebook application a while back and I do not believe it has what you are calling a box header on it: http://apps.facebook.com/photoisland/. The application is configured to run entirely in an IFrame and I am not using FBML at all.
I've finally found out how to get an IFrame without a header just like Apple does.
You have to sign a special deal with Facebook to get it... however this deal doesn't come cheap so it's out of question for most companies. :(