Facebook comments: CSS doesn't work - css

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..

Related

How to get the XPATH or CSS selector from dynamically loaded website to follow links?

This is a dynamically-loaded website https://www.gelbeseiten.de/suche/hotels/n%c3%bcrnberg.
I'm trying to follow every link from the results. I found //article[#class='mod mod-Treffer']/a to follow the search result links. But the problem is this XPATH works only for a couple of links. For the rest of the others, I don't find any Selector. Because the other are using probably JS to make this action. I'm not familiar with this kind of dynamic website. So, I don't know how to get the selector from this kind of website. Any suggestions will be highly appreciated.
I will post this as an answer, without actually giving you the code, as it might help you more in the long term.
First, load that page in browser with javascript disabled (there are ways with disabling js in browser directly, or use an extension like ublock origin, etc - look it up).
You will notice that only the first 2 hotels are fully loading - the rest are being loaded dynamically by javascript (which in this case is disabled). There are 13 hits for //article[#class='mod mod-Treffer']/a selector, while there are more hotels on that page.
However, each hotel is wrapped in an <article> tag, and that tag has data-realid="[...]" attribute. The url for each hotel would be https://www.gelbeseiten.de/gsbiz/{data-realid}.
This is how you can get all those hotels' profile links.

Using GTM to add Open Graph

Do you know, how to add open graph parameters to specific URLs on my site using Google Tag Manager? I couldn't find anywhere answer on that.
Thanks a lot!
No unfortunately not. Unlike Google where it's become a lot better in the last 3 years at using rendered JavaScript content to pick up code generated by tag managers - Facebook sadly hasn't advanced this far + will only pick up content in the actual HTML.
See this blog post (in Dutch) for guidance: http://vlcm.be/2017/07/open-graph-metatags-google-tag-manager/
So unfortunately when it comes to OGP and Twitter Cards you'll have to add them the old fashioned way.

Custom Google Form? Example of Google Form API?

I'm trying to make a google form look like my own site. I found examples of how to do this on How to style Google Forms and google-custom-form (GitHub project), but I tried both of the examples they give and they seem to fail now.
I had a look at Class Form - Google Apps Script which seems to be like an API, but I can't get my head around the documentation. Does anyone have an example of it working. Or has found another way of getting this to work? It would be really handy to do as embedded forms look really out of sync with the rest of the site.
The API you're linking to is an apps script API. This is needed if you want to create dynamic forms (dynamic amount of questions, dynamic answers,...) but not for custom styling. An intro to appscript can be found on this page: https://developers.google.com/apps-script/
You could just create a form manually on https://www.google.com/forms/about/
You can change the styling and colors in the top-right of the page. When you are ready to embed the form on your own page you have to press "SEND", an select the embed icon <> at the top.
I've worked with this a ton, and still have issues with it. Been learning the new api v4 for sheets but still having trouble, it is still in beta too. For now I can recommend this solution though by heaversm on github.
https://github.com/heaversm/google-custom-form
The example fully works as long as you find the entry.xxxxxxx for each field and replace in the appropriate js. To avoid the embed issues, give your form submit on a click function that has the event as the input and then preventDefault on the event like so:
$('#submit-button').on('click', function(event){
event.preventDefault();
// continue code from heaversm
});
Hope this works for you. Cheers

Plone - embed the content of an internal link in a page

I have a list of pages that have to appear in different places of my Plone. If I use an internal link, I see an HTML link in the page but instead of that I would like to see the embedded content of the linked page.
I've tried to install some link plugins (Smart Link, vs.alias...) but I'm not able to find the solution.
I'm using Plone 4.3.
I don't know any Plone Plugin, which satisfy your requirement.
A long time ago i wrote this small js to show internal links in a popup using Plone's prepOverlay.
In this case you can put a popup custom CSS class on the internal link with TinyMCE.
It simply shows the content area of the given URL.
$(function(){
jq('a.popup').prepOverlay({
subtype:'ajax',
urlmatch:'$',urlreplace:' #content > *'
});
});
I guess this is a good starting point for your own implementation.
You could think of a criterion like location, contenttype, etc., to distinct, which articles should be picked (in worst case use collective.flag), then fetch them with a collection, to give you the links as a resultlist, and set its view to all_content, a nice feature, introduced in the Plone-4 series.

styling facebook comment widget

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

Resources