Link to my site: http://www.motleypixel.com
SMF version: SMF ver. 1.1.10
TP version: TP ver. 1.0 beta 4
Theme name and version: Black Rain
Browser Name and Version: IE 7.0.5730.10
Mods installed: TPReviews, iFrame, YouTube, Ads Management (all current for SMF 1.1.9)
Related Error messages: See below.
Trying to make the below javascript provided by Facebook work on my portal as a center top bloc:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("450e193a56f78651d8b47090dffca693");</script><fb:fan profile_id="169960296001" stream="1" connections="10" width="300"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/The-Motley-Pixel/169960296001">The Motley Pixel on Facebook</a> </div>
I'm wondering if maybe converted to php would work? I atempted this but it didn't work.
Thanks,
Roy
I managed to get this to work okay.
Steps I took :
1) Add upper panel block.
2) Change Type to 'HTML & Javascript code'
3) Save the block so it updates the options.
4) Clicked on the <> button in the editor to swap to straight HTML.
5) Pasted in your code.
6) Set the display options and changed 'status' to 'on' and then saved it all again.
7) Works as shown in screenshot.
I would say that it doesn't seem layed out suitably for an upper panel block which is what I put it in.
Humm...thanks for the tip. I tried several times, even deleted the bloc and started fresh...all I see is a worded link to the facebook page an no graphics. I left it like this for you to check.
I agree about not being suitable for an upper panel bloc but I need to figure out how edit the width of a left/right block first before I use it there.
Thanks,
Roy
If it's blocking the code from retrieving the info from Facebook, it might be a server issue.
I don't know much about that kind of thing, but IchBin is clued up on it. Hopefully he will pop in later.
In the meantime I guess you could try testing the code on an external HTML page on the same domain, just to see if your server is actually allowing it to work properly.
Hummm okay yea something is up: http://www.motleypixel.com/test.html I will in the meantime head over to facebook developer wiki to read around. Thanks for the helps and tips.
-Roy
Yeah, looks like a server issue then atm... and no problem - happy to try and help.
It looks like you added that code in a php block. Add echo' before the code and add '; at the end of the code. That's if you still using a php block.
Well I never got this one figured out. It seems like something is being blocked w/in featureloader.js.php files, just can't seem to get it to resolved correctly.
-Roy
If you are still having trouble with this or if anyone else is having a problem, a solution is using the IFrame
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=YOUR_PAGE_ID&connections=10&stream=1&css=PATH_TO_STYLE_SHEET&locale=your_LOCALE" allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe> <div style="font-size:8px; padding-left:10px"><a href="URL_TO_YOUR_PAGE">PAGE_NAME</a> on Facebook</div>
Here is the steps I took to get this working
1. Go to http://www.facebook.com/facebook-widgets/fanbox.php
2. Get the Javascript Code
3. Use the Javascript code fill in the areas for the IFrame
4. Add it to a scriptbox
5. Save and turn on
For instance for yours lextalionis your would be:
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=169960296001&connections=10&stream=1&css=PATH_TO_STYLE_SHEET&locale=your_LOCALE" allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe> <div style="font-size:8px; padding-left:10px""><a href="http://www.facebook.com/pages/The-Motley-Pixel/169960296001">The Motley Pixel on Facebook</a> </div>
Some editable areas:
1. connections = # ---> This is how many fans you would like to show (1-100)
2. Stream=# ---> How many threads you want to show on the box
3. Width / Height ---> well changes the size :2funny:
Hope this helps others
Thanks for the help, this worked! http://www.motleypixel.com/forum/index.php
Only problem is when I use my css the hyperlinks change to the same color as the background. I suppose there's no way to change the Facebook BG color right?
-Roy
Are the face book links in any container class/ID ? Can you show the html output from it? I bet there is something you can do.
Brad, I'm not sure how I would show the html output outside of the script. The closest I can think of is the src it's calling which is:
src="http://www.facebook.com/connect/connect.php?id=169960296001&connections=10&stream=1
yes there is a way, I am currently toying with this
but in the Iframe code there is
css=PATH_TO_STYLE_SHEET&locale=your_LOCALE"
I have added my path, yet it doesn't change....If I figure it out I will post back
I have the path set to my theme's style sheet and it's resolving that properly now: http://www.motleypixel.com/forum/index.php
Here's the code:
<IFRAME style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 800px; BORDER-BOTTOM: medium none; HEIGHT: 550px" src="http://www.facebook.com/connect/connect.php?id=169960296001&connections=10&stream=1&css=http://www.motleypixel.com/forum/Themes/BlackRain1/style.css" frameBorder=0 scrolling=no allowTransparency></IFRAME>
<DIV style="PADDING-LEFT: 10px; FONT-SIZE: 8px" ?><A href="http://www.facebook.com/pages/The-Motley-Pixel/169960296001">The Motley Pixel on Facebook</A> </DIV>
Seems it's picking up the alink and font formatting but not the BG since it's still white.
No, I don't mean the code you're using. I'm talking about what is picked up from facebook in the iframe.
I am currently working on this IchBin, is there a good app for CSS code to figure out the name of the style used for a particular color (possibly a FF addon?) that you could point me to, all I think that is required now is getting the particular name used for that style to add to the style.css template
(I am not very good with CSS, lol at all)
LA have you tried Firebug add-on for FF http://getfirebug.com/
Quote from: Lesmondâ„¢ on January 22, 2010, 02:14:25 AM
LA have you tried Firebug add-on for FF http://getfirebug.com/
Best add-on for FF web devlopement IMO.
Quote from: Lesmondâ„¢ on January 22, 2010, 02:14:25 AM
LA have you tried Firebug add-on for FF http://getfirebug.com/
perfect will try this at work :) thanks
I appreciate the help guys, thanks.
-Roy
Great program! thanks
lextalionis add this to your existing style.css or create a new fanbox.css and change your path
@charset "utf-8";
/* Facebook Fanbox */
.fan_box
.full_widget
.connect_top {
border: none;
background-color: #000000;
}
.fan_box
.full_widget {
border: none;
}
.connect_top a {
color: #990000;
}
.connect_top a:hover {
color: #CC0000;
}
.fan_box
.connections {
background-color: #000000;
border: none;
color: #990000;
}
.fan_box
.connections_grid
.grid_item
.name {
color: #990000;
}
and change the color to what you need :D
Very nice, thank you!
Almost looking the way I want. I'm trying to get the hyperlinks in the topics to be orange ea7500 with a-hover of ffffff.
Here's the portal with the FB script in a bloc: http://www.motleypixel.com/forum/index.php
Here's my current css I'm calling:
@charset "utf-8";
/* Facebook Fanbox */
.fan_box
.full_widget
.connect_top {
border: none;
background-color: #333333;
}
.fan_box
.full_widget {
border: none;
background-color: #333333;
color: #ea7500;
}
.connect_top a {
color: #ea7500;
}
.connect_top a:hover {
color: #ffffff;
}
.fan_box
.connections {
background-color: #333333;
border: none;
color: #ea7500;
}
.fan_box
.connections_grid
.grid_item
.name {
color: #ea7500;
}
add these after
.connect_button{
color:#666666;
background-color:#111111;
}
.UIActionButton_Text, .UIActionButton_Wrap{
background:#222222 none no-repeat scroll 0 0;
display:block;
}
.UIActionButton_BlueText .UIActionButton_Text {
color:#cccccc;
}
.name_block{
background-color:#111111;
width:180px;
margin:0;
padding:0;
}
.name a:hover{
color: #ffffff;
}
a:hover{
color:#ffffff;
}
and tweak em :)