Adding Css To post in Custom Dashboard widget

I have a custom dashboard widget that is created with a custom post type… I embedded the Facebook like box but it is not fluid with the screen

I found this fix to make the like box fluid so it could stay in the module when the screen adapts in and out but not sure where to put this css to make it work.. any ideas

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCindees-Tan-Spa%2F260804954515&width=600&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=120698404718612" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:290px;" allowTransparency="true"></iframe>

Resource

http://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width

  • Timothy
    • Chief Pigeon

    Hey Scott, hope you are well. :slight_smile:

    You could make some core edits, but it wouldn’t be advisable due to future updates overwriting it.

    The best thing would be to enqueue it to the admin area:

    http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts#Example:_Load_CSS_File_on_All_Admin_Pages

    But for a line, perhaps something like this:

    function scotts_admincss() {
    echo '<style type="text/css">
    .fb-comments, .fb-comments iframe[style] {width: 100% !important;}
    </style>';
    }

    add_action('admin_head', 'scotts_admincss');

    Hope this helps. :slight_smile:

    Take care.

  • Timothy
    • Chief Pigeon

    Or… You could make a simple plugin:

    Or make a real simple plugin like:
    <?php
    /*
    Plugin Name: Scotts Custom Admin CSS
    Description: I'm adding some custom CSS to the admin.
    Version: 1.0
    Author: Scott
    */

    function scott_admincss() {
    echo '<style type="text/css">
    .fb-comments, .fb-comments iframe[style] {width: 100% !important;}
    </style>';
    }

    add_action('admin_head', 'scott_admincss');

    Take care.

  • scott74
    • The Crimson Coder

    Sweet Tim thanks… just one thing… how would I make it auto expand to the dash module… usually you can change the px width to 100% also but this iframe code has a spot fot “”px and another for

    width=””&amp so if I set it to like 800px it cuts the end closing line off the like box.. would like to just have it auto expand also

    Current code

    <div class="fb-comments fb-comments iframe [style]"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCindees-Tan-Spa%2F260804954515&width=800&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=120698404718612" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:800px; height:290px;" allowTransparency="true"></iframe>iframe></div>

    Thanks

  • scott74
    • The Crimson Coder

    I did replace the 800px in the bottom number of the code with 100% but I cant put 100% whre it says width = in the uppper half

    that part of code does not have px from facebook just has a 800 and sybol… let me try somethign again and see

  • aecnu
    • WP Unicorn

    Greetings scott74,

    After examining the provided coding it appears the the “width” attribute is not correct because it is missing the html standard quotes necessary for specifying width i.e. width="100%"

    Please let us know if this does not resolve your problem by reopening this ticket below marking it as not resolved. Also please indicate if there are any new symptoms or errors.

    Thank you for being a WPMU Dev member!

    Cheers, Joe :slight_smile:

  • scott74
    • The Crimson Coder

    that actaully made the like box completely dissappear

    <div class=&quot;fb-comments fb-comments iframe [style]&quot;><iframe style=&quot;border: none; overflow: hidden; width: 100%; height: 290px;&quot; src=&quot;//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCindees-Tan-Spa%2F260804954515&width=100%&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=120698404718612&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; width=&quot;320&quot; height=&quot;240&quot;></iframe></div>

    This results in this but if I put quotes it dissappearss. .maybe i am missing something

  • aecnu
    • WP Unicorn

    Greetings scott74,

    Update to my coding to test please:

    <iframe name="I1" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCindees-Tan-Spa%2F260804954515&width=600&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=120698404718612" width="100%" height=290>
    Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

    Thank you for being a WPMU Dev member!

    Cheers, Joe :slight_smile:

  • scott74
    • The Crimson Coder

    thanks Joe but its just expanding to 600px…. because the I guess that needs to somehow be set to 100% also so it fills out… .shrinking the screen works but it just not filling the box out :slight_smile:

    see image thanks for your help on this

  • aecnu
    • WP Unicorn

    Greetings scott74,

    Looking at the coding again it is the Facebook URL width=600 statement that is limiting the width at this point and not the iframe which I have clearly cured.

    Please try this:

    <iframe name="I1" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCindees-Tan-Spa%2F260804954515&width=100%&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=120698404718612" width="100%" height=290>
    Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

    Thank you for being a WPMU Dev member!

    If we can be of further assistance please let us know.

    Cheers, Joe :slight_smile:

  • aecnu
    • WP Unicorn

    Greetings Scott,

    Sorry that I could not determine this on my end since I was only seeing an icon displayed and paying attention to the iframe itself.

    However, as we together have proven there is no solution to this that we could make due to the way Facebook is translating the URL and not allowing % to be used –> only Facebook can fix this.

    Thought update: try removing the width statement all completely as in:

    <iframe name="I1" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCindees-Tan-Spa%2F260804954515&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=120698404718612" width="100%" height=290>
    Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

    Wainting to hear your results of success?

    Thank you for being a WPMU Dev member!

    Cheers, Joe :slight_smile:

  • scott74
    • The Crimson Coder

    HI Tim, thanks for the suggestion.. I had already tried that but tried again having both the custom plugin for admin area as advised above and the theme style.css.. I think it needs to be able to take the 100% in the actual iframe code but doesnt render that in the first mention of the width in the code, only the second mention of the width…

    The first mention of the width is only rendering pixels for some reason so hence cannot get a fluid width but does act fluid when shrinking the screen..

    Weird.. Maybe overlooking something or Facebook issue. You would think they would have they option on the page they give you the code fore

    ref # https://developers.facebook.com/docs/reference/plugins/like-box/

  • Timothy
    • Chief Pigeon

    I did check their site for answers.

    Sorry I missed something on my last response for something there. I was also suggestion as well as trying that again (as suggested in one of my first posts) to remove the width from the FB code. Not sure why I missed that off…. Late night.

    I know if left empty FB defaults to a width but worth a shot to see how it goes. Not sure what else to suggest then… When you look through something like Chrome developer tools, what do you see?

    Take care.

  • scott74
    • The Crimson Coder

    They have 3 ways of embedding html5 xml and iframe.. i was using the iframe but noticed that in ie9 with iframe you have to click display content at bottom of screen for it to show (annoying)

    Not sure how to change the custom plugin recommeded above to try it using the html 5 code..

    HTML5

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=120698404718612";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div class="fb-like-box" data-href="https://www.facebook.com/pages/Cindees-Tan-Spa/260804954515" data-width="500" data-show-faces="true" data-stream="false" data-header="true"></div>

    Whats in admin panel custom plugin

    <?php
    /*
    Plugin Name: Scotts Custom Admin CSS
    Description: I'm adding some custom CSS to the admin.
    Version: 1.0
    Author: Scott
    */

    function scott_admincss() {
    echo '<style type="text/css">
    .fb-comments, .fb-comments iframe[style]{width: 100% !important;}
    </style>';
    }
    add_action('admin_head', 'scott_admincss');

  • Timothy
    • Chief Pigeon

    The plugin above was really for just getting the CSS in the admin area. I was asking about developer tools to ensure it is being included and to see it being overruled.

    Have you tried including the other HTML code you speak off in the same manner through the custom dashboard widget?

    Take care.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.