Topic-icon How to add custom id to the iframe config div

Active Subscriptions:

None
8 years 11 months ago #33640 by chrjon
Hi,

I am in the process of setting up a website for a client, and wonder if there is a simple way to add an id parameter to the iframe configuration div

currently it renders like this:
div class="fb-comments fb_iframe_widget" data-num-posts="10" data-width="500" data-href="http://www.sourcecoast.com/" fb-xfbml-state="rendered"

I would like it to render like this:
div id="facebook-comments-width" class="fb-comments fb_iframe_widget" data-num-posts="10" data-width="500" data-href="http://www.sourcecoast.com/" fb-xfbml-state="rendered"

Is there a way of adding the id="facebook-comments-width" parameter to the module without using a template override?

The same question also applies to the {JFBCComments} short-code.

The reason for this is so I can get the width of the container (which is a % in the template) and overwrite the default width with one that fits nicely in the space available - a hacky way of using percentage widths for the iframe.

Prior to having my client purchase your product, I manually added some of the facebook features and used this method to create a responsive (but not dynamic) view.

I used the following JS to do the work - and would prefer to use id over class as the id search through the dom is much faster.

Ideally I would like the ability to specify % width in the admin settings, but for now a way to add the id parameter to the div would be appreciated.

If I do need a template override, could you please let me know which file(s) to override for the comments, like-box, fan-box and feed.

Many thanks,

Chris.
The topic has been locked.
Active Subscriptions:

None
8 years 11 months ago #33641 by chrjon
In order to get the auto width to work at the moment I have edited the easytags.php file to add the id parameters (but this is not ideal).

It does work, but I would rather have a solution that would not break if I, or my client, update the component.

Chris.
The topic has been locked.
Support Specialist
8 years 11 months ago #33663 by alzander
Chris,
Before trying that, test out the CSS below. It should dynamically resize your content box as long as the parent container is setting the width properly:
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

Let me know how that goes, we'd love to have more feedback on that style before we implement it in the next release.

Thanks,
Alex
The topic has been locked.
Social Stream
Hide. Seek. Play!

Countdown Hide & Seek Game

Countdown, the new hide & seek toy, is available now! Designed and developed by the founders of SourceCoast, it's the perfect toy to get your kids moving at all ages.

Get the Hide and Seek Toy on Amazon