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

Active Subscriptions:

None
10 years 10 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
10 years 10 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
10 years 10 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.