I need to add some css styling to the comments widget in a facebook application. I use the following code snippet to use the widget
" num_posts="10" width="500" scrolling="yes">
I need to provide a way for users to scroll to view more comments than fits in the initial container size.
Is there a way to do it at all?
Thanks
I'm afraid this isn't possible using the comments social plugin. Social Plugins load as iframes within your page, and there isn't a hook to allow this kind of behaviour.
If I've understood correctly what you're asking for isn't a CSS change, it's a behavioural change that would require JS to lazy load new comments.
You'll have to roll your own, using the Graph API to fetch the comments as you need them
Related
I'm writing an app which involves letting users to share comments on a website, which has a comment form with Google's reCAPTCHA embeded. I would like to load this page via HTTP and display CAPTCHA within my app, so that user can post comments from my app. Is it easy to implement or should I rather try other solution?
EDIT:
I've red reCAPTCHA developer guide. If I would like to embed captcha inside my form, I'd need to insert div element with a proper class, and make a ajax request in order to render captcha. This call would insert an iframe into a given div. What I need is to know how to access that iframe's content without using AJAX.
Turns out we are not supposed to do that kind of tricks with reCAPTCHA.
There is no support for that in API. It seems that it was part of Google's design to prevent that kind of usage.
The only walkaround I could come up with is to implement a WebView widget with JavaScript support, get website via http, and load it into this webview, centering this view around the form we want to post.
It seems like a lot of work though, thus I'm going to simply skip this, if someone successfuly manages to figure it out I'd appreciate a hint :)
Has anyone been able to format a Facebook feed in a Twitter Bootstrap site? I have a site that uses the Facebook feed that currently does not use Bootstrap. Curious to know what issues and advice anyone has about it. The feed is but so flexible; I've had issues with fitting it in the current site.
Thanks in advance.
Got some bad news for you. Most Facebook embeddable items are <iframe>'s. That means Facebook is in complete control of the look, feel and behavior of the content. Because of the same origin policy you can't even use Javascript to attempt to force styles upon the <iframe>.
Facebook does give you some basic options like width, height and color scheme when you embed it. If you're looking for 100% control and customization you probably want to look into the Graph API instead.
I have inherited some code which uses uses the LinkedIn Company Profile API. At least that's what I think it is. Basically a script tag is rendered in the following format:
<script type="IN/CompanyProfile" data-id="9999" data-format="click"></script>
This together with .js file creates a link with the Linked-in logo which when clicked on reveals profile of company. Question is, can I customize the link. I want to add some text to the right of the linked in logo. I couldn't find any relevant documentation on it. I added a span tag with some text and attempted to wire up the click of the span, so that when clicked it clicks the linkedin icon. That doesn't seem to work-- which I found rather odd.
Any thoughts?
The Company Profile plugin builder is here:
https://developer.linkedin.com/plugins/company-profile-plugin
Customization of this plugin is limited to width (using data-width) at this time because of the complex layout. However, you could build something similar using the Javascript API if you need something more customized to your system.
This is another option that is more customizable, but has less interactivity:
https://www.linkedin.com/profile/profile-badges
I'm developing a website and I decided to use Facebook comments to provide commentable behaviour. But, unfortunately, I met some problems.
While trying to customize look of news page, ex. http://buchman.pcspace.pl/aktualnosci/ept-snowfest-podsumowanie-czwartego-dnia.html, I am not able to apply CSS to view: everything appears correctly in HTML source, but doesn't change view.
What's wrong?
According to this blog post the new fb:comments no longer supports custom CSS.
After log research I noticed that while loading fb frame, it doesn't use css given as param.
It causes all parts don't work..
I'm working on a site that needs a basic calendar, and thought of adding in Google Calendar. The thing is that I would really like to style the whole embedded calendar, but it's in an iframe and even adding !important to the targeted classes does not work.
Is there any way of adding some css to that iframe? Through some JavaScript or something?
Thanks!
You are not going to be able to do any styling on the iFrame, if you do you'll get the cross-domain origin error. Essentially, you are locked out of tampering with an iframe for security reasons. You should look into pulling the feed/json of the google calendar and creating the entire view yourself.
The settings offered by Google are only basic, however, and so for it to fit the unique style of your site, you’ll want a bit of extra editing power. Unfortunately adding CSS rules to the parent document doesn’t work, even when adding an !important directive to each rule.
https://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
Because of the same-origin policy, it isn't possible to inject CSS into an iframe.
However, these days there are a number of third party apps that make it easy to style and embed Google calendars.
Here is a short list of options:
Styled Calendar
Tockify
ChronoFlo Calendar
Or, if you'd rather use something open source, FullCalendar is a great solution. Here is some documentation on how to use their Google Calendar plugin: https://fullcalendar.io/docs/google-calendar
*Full disclosure, I'm a member of the Styled Calendar team