I was wondering if anyone knew how to make the Facebook GROUP Plugin responsive and resize it to the width of the parent div?
https://developers.facebook.com/docs/plugins/group-plugin
Above is the SDK for the group plugin.
Everytime I use the SDK, I can't get the plugin to resize as the parent div changes, no matter what I try.
If anyone can help, that would be great!
Related
I want to set up Page Plugin on my website to display nicely on screens with a variety of resolutions and pixel densities. In order to truly achieve that, I'd have to have to possibility to use rems in data-width attribute. Unfortunately, when I enter a rem value, the data-width attribute is ignored.
Is there a way to make the plugin behave nicely with rems?
To make the Facebook Page Plugin responsive on initial page load, instead of using rems, you'll want to remove the data-width attribute and instead add
data-adapt-container-width="true"
This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.
I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).
No Dynamic Resizing
The Page plugin works with responsive, fluid and static layouts. You
can use media queries or other methods to set the width of the parent
element, yet:
The plugin will determine its width on page load.
It will not react changes to the box model after page load.
If you want to adjust the
plugin's width on window resize, you manually need to rerender the
plugin.
Source: https://developers.facebook.com/docs/plugins/page-plugin
You could make it dynamically responsive by reinitializing the widget on browser resize, but by doing that you run the risk of eating up memory very quickly.
There is some other stuff you can try here as well
Responsive width Facebook Page Plugin
I am looking to create a slider within wordpress that is a little out of the norm and was wondering if anyone could give me advice on how to go about it.
I'd like a slider for a meet the team page on our website.
I am hoping the slider could work as normal but have filters on the left for departments and thumbnails below and outwith the slider with each employee on there.
I would like these thumbnails to be clickable and for the matching slide to appear when the thumbnail is clicked.
Can anyone suggest a plugin or a method to create this kind of thing?
Thanks in advance for your help.
Well i think you are referring to isotope jquery plugin. It filters down items based on the selected tag. Its actually free but you will have to create modify it for your needs. If you are using bootstrap you can get the idea of implimentation from here.
http://theme.stepofweb.com/Atropos/v1.5/HTML/page-team.html
Here is a paid wordpress plugin that can do that for you.
http://codecanyon.net/item/meet-the-team-wordpress-plugin/full_screen_preview/4983412
Does anyone have any suggestions as to what wordpress plugin I can use to create a similar type of slideshow plugin as the ones that are used on Refinery29? Here is a link to an example...
http://www.refinery29.com/rooftop-bars-nyc/slideshow#slide-1
What I like about this particular slideshow/gallery is that the images don't auto-resize to fit into a fixed gallery box, the slides are numbered, there is a full-screen option.
I also like that each slide is a new URL - better click-through rate I would assume.
This is another example that I like as well...
http://www.wellandgoodnyc.com/2013/06/03/7-stunning-summer-yoga-escapes/
If anyone can provide any suggestions (free or premium plugins), I would be forever grateful!
Thank you!
jquery carousel lite is easy to implement and adapt to your needs;
http://www.gmarwaha.com/jquery/jcarousellite/
for more heavyweight stuff you could use jquery carousel
http://sorgalla.com/projects/jcarousel/
When I load up my app, either stand-alone or inside Facebook canvas, theres an iframe with a inline height and width property that's basically blocking all app links and functions because It's somehow sitting on top of everything.
I'm not an experienced Facebook app developer and was wondering what's going on and how to handle it? I've identified the css in Google Chrome but don't know how to remove or prevent the styles since the iframe is not part of the dev package I cloned. The app is up on Facebook and should be viewable using facebook.apps.com/datingfordummies
Thanks in advance
Fixed it. I simply removed the width and height property in my css. I would have done this initially but was afraid it would effect the other iframes on the page. Needless to say, it didn't and is now working.
for future reference:
iframe{width:0 !important; height:0 !important;}
If your look at this screenshot: http://cl.ly/image/1J3m2e2x1G1z, you'll notice that the facebook iframe element overwrites the Karma comment bubble. Could anybody help me with either removing the bubble alltogether of with removing the facebook element?
thanks
This can probably be fixed pretty easily with css. If you have a link to the site I can take a look at it and tell you what you need to add to your stylesheet. Also, t.thielemans is right, it would be best set up a child theme (Not nearly as complicated as it sounds) which would prevent the changes from going away if you update your theme.