I am currently designing a website where there is a facebook like box embedded on it.
The default of facebook looks something like this:
But instead of that look, I want the friend's icons to appear on the same line as the like box similar to this:
Does anyone have any idea to do this one? I tried adding several styles on the css and override the class given by facebook but it won't work.
The like button is generally an iframe so your styles will not affect it. Also as it is on a different domain, I'm not sure if you could even manipulate it by adding your own styling to the tr elements via javascript (setting them to display:table-cell achieves what you want) due to cross domain access issues. Finally I'm not sure if there are platform policies that would also be invalidated by doing this, which could have negative effects on your facebook intergration
Related
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;
}
I'm a rather beginning programmer trying to get the XFBML 'Like' button to work on my site correctly... I chose the XFBML so I wouldn't have to manually type in the URL for each button- I use a lot of templates and want to be able to update everything quickly and easily.
But about half my pages seem to share a like button- and strangely, the other half each have their own individual like buttons, even pages that use the same template as the first set. How do I fix this? I've seen some stuff for blogs about automatically generating different like buttons, but I'm not sure it'll work because this a regular old site and every page is a different URL. I've searched all over the place online and I haven't seen anyone else with this problem. The site is at www.millerandcampbell.com if that helps.
Thanks in advance!
In the future, plase use https://developers.facebook.com/tools/debug to debug problems like this.
It clearly shows that f.e. for the page http://www.millerandcampbell.com/rental.html you have given your base address http://www.millerandcampbell.com as value for og:url – and of course the like button respects that value, and therefor likes the latter URL.
If you don’t want that – then set og:url to the actual address of your sub-pages.
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.
We have seen there have been some changes in the header colour of the Like Box social plugin:
Anybody knows if it is planned to offer a parameter to set that colour using the API (as with the border colour)?. We are using the API in a module fb_likebox for the free software CMS Drupal, and we were wondering what the best way to override this setting will be. We were thinking in adding it as a configurable setting, but if not we will try from a front-end (overriding the CSS) point of view.
define a class, named 'fbConnectWidgetHeaderTitleBranded', within the file where you add this fb api
And you can define your custom CSS. This class is used by Fb to its Header.
This CSS is used by fb:
background : "none repeat scroll 0 0 #3B5998".
I play some of the games on facebook and I was wondering if there is a way for me to create a simple HTML file with the game in an IFRAME. Ive been tinkering with it and can't seem to get it to display correctly and facebook breaks out of the frame after a bit.
You probably can't. In the end, there is nothing that can stop Facebook (or any site for that matter) from putting this in the top of a JavaScript file that is used on the page:
if (top!=self) {
top.location.replace(document.location);
}
As a matter of fact, that's exactly what StackOverflow does to prevent it's content from being presented in an IFRAME element.
Also, it's very likely that you are violating some sort of Terms of Service, a license, or something of that nature by trying to do that.