Simple Facebook Connect | CSS in Array WordPress
- REFUNDED
Hello,
If you are familiar with the facebook fan box then you know you can apply parameters to including it on your site.
eg:
<fb:fan profile_id="XXXXXXXXXXX" stream="0" connections="10" logobar="0" width="300" css="http://www.yoursite.com/stylesheet.css?1></fb:fan>
---
Now the Simple Facebook Connect plugin allows you to integrate a fanbox via a widget, but I don't use widgets if I can help it and I have activated the fanbox via the template with an echo.
<?php if (function_exists('sfc_fanbox')) echo sfc_fanbox(array('stream' => 0,'connections' => 5,'width' => 300,'height' => 0,'logobar' => 0 )); ?>
---
Now this plugin supposedly allows you to add custom CSS to modify the style of the fanbox but it doesn't seem to work for me at all. And I wonder if it's because I have not included the CSS parameter in the array.
However, my PHP skills are subpar at best and I don't know how to included something like this
'css' => <?php bloginfo('stylesheet_url'); ?>?1
Into the array. As such, I'm hoping someone here at WP Questions can help me with this.
Thanks
---
EDIT | Nothing thus far has worked... I'm beginning to wonder since Facebook has depreciated the Fan Box in favor of the Like Box, if it is no longer being supported.
---
UPDATE: I have figured this out... the problem is that I was working on my local environment and Facebook has to cache the CSS before it will display, in order to do that however it has to be able to access it and obviously it can't access it on my local machine.
However, none of the functions to implement CSS work because the plugin ignores it like one submission stated. You can tell via DOM searching when CSS is active and not via the fan box.
Answers (5)
Luis Abarca answers:
<?php if (function_exists('sfc_fanbox')) echo sfc_fanbox(array('stream' => 0,'connections' => 5,'width' => 300,'height' => 0,'logobar' => 0, 'fanbox_css' => get_bloginfo('stylesheet_directory') . '/your-fanbox-style.css' ) ); ?>
Luis Abarca comments:
If you call <?php bloginfo('stylesheet_url'); ?>
It prints the url of the current stylesheet of your site.
You should use get_bloginfo() to just get the URL and then pass it as argument.
I change it to: get_bloginfo('stylesheet_directory') + file_name.
file name is a custom stylesheet for your fanbox.
Kannan C answers:
That function doesn't accept stylesheet argument. You need to edit the plugin file in order to include your theme file. Try this
find line no: 263
if ($options['fanbox_css']) {
$retvar .= ' css="'.get_bloginfo('url').'/?sfc-fanbox-css='.$options['fanbox_time'].'"';
}
change this to
$retvar .= ' css="'.get_bloginfo('stylesheet_url').'"';
Kannan C comments:
i forgot to tell the filename. it is in sfc-widgets.php
Luis Cordova answers:
here is the code to paste in:
<?php if (function_exists('sfc_fanbox')) echo sfc_fanbox(
array(
'stream' => 0,
'connections' => 5,
'width' => 300,
'height' => 0,
'logobar' => 0,
'fanbox_css' => <?php bloginfo('stylesheet_url'); ?> . '/youstyle.css'
)
);
?>
Luis Cordova comments:
if you need help message me with your information and I will help you since you don't know php
Gary Smith comments:
Hi Luis,
I don't see how this could possibly work. You're opening a php tag inside an opened php tag.
<?php if (function_exists('sfc_fanbox')) echo sfc_fanbox(
Then inside the array
'fanbox_css' => <?php bloginfo('stylesheet_url'); ?> . '/youstyle.css'
Even if that wasn't an issue you're using the Wordpress function bloginfo('stylesheet_url') and appending a trailing slash and a filename /youstyle.css
The stylesheet_url function returns the theme stylesheet (stylesheet_url = http://example/home/wp/wp-content/themes/child-theme/style.css) It would need to be replaced with stylesheet_directory
---
Either way, this doesn't work at all.
Luke America answers:
I've written a shortcode implementation for the Facebook fanbox. You can use it on a page, post, or in a text widget. In fact, you can display multiple fanboxes on the same page with different or the same css stylesheet(s).
Plus, you can use the fanpage account ID or the vanity name. Moreover, it offers several more customizable features than the widget you referenced. And, the CSS file is automatically timestamped within the shortcode for immediate presentation updating.
Also, I believe this CSS file may be the most extensive one you'll find. I spent several hours inspecting the elements of their own stylesheet.
As it turns out, I was writing this code for a project when I noticed the email for this post.
You can use it like this:
[gdf_facebook_fanbox id="TaylorSwift" stream="true" connections="10" logobar="true" width="300" height="auto" borderStyle="border:1px solid #008080;"]
Here's another example:
[gdf_facebook_fanbox id="sarahpalin" stream="true" connections="10" logobar="true" width="300" height="auto" borderStyle="border:1px solid #D0D0D0;"]
The following ZIP contains 3 files with everything you need (fb_fanbox_shortcode.php, style-fbfanbox.css, fb_fanbox_shortcode_instructions.txt). The CSS file and the shortcode are heavily annotated.
[[LINK href="http://wpcodesnippets.info/code/fb_fanbox_wp_shortcode.zip"]]fb_fanbox_wp_shortcode.zip[[/LINK]]
Finally, you can use WP's do_shortcode function if you want to implement it like a Template Tag within a theme file (like you mentioned doing with the widget code).
Luke America comments:
The shortcode that I submitted is currently working flawlessly on four sites. It does everything you wanted and more. Plus, it's not a widget ... which you stated you are averse to implementation.
Have you tried it? If so, what issue are you experiencing?
Luke America comments:
@Gary Smith:
I've now installed this shortcode solution (which meets and exceeds your requirements) on 8 more sites. There have been no issues at all.
Could you elaborate on what issue you're having?
Abdessamad Idrissi answers:
Why not use the [[LINK href="http://www.addthis.com/blog/2010/05/04/enable-facebook-like-via-addthis/#.TqZ0Qt6Bq0s"]]addthis easy integration[[/LINK]] and forget about plugins and all the complex css and array thing!
I use [[LINK href="http://www.addthis.com/pages/gallery-demo-toolbox-facebook-like"]]addthis[[/LINK]] and I'm a happy user :)