Hi,
i have included FR Gallery in my blog it works fine but i published that page as FB Instant articles, it does not load the gallery
please let me know, whether gallery will support in FB instant articles or what i need to make change
i have included the “custom transformer rules” (fb instant articles) as below
{
“rules”:
[{
“class”: “TextNodeRule”
}, {
“class”: “PassThroughRule”,
“selector”: “html”
}, {
“class”: “PassThroughRule”,
“selector”: “head”
}, {
“class”: “PassThroughRule”,
“selector”: “body”
}, {
“class”: “PassThroughRule”,
“selector” : “code”
},{
“class”: “PassThroughRule”,
“selector” : “del”
},{
“class”: “PassThroughRule”,
“selector” : “mark”
}, {
“class”: “PassThroughRule”,
“selector” : “span”
}, {
“class”: “ParagraphRule”,
“selector”: “p”
}, {
“class”: “LineBreakRule”,
“selector”: “br”
}, {
“class”: “AnchorRule”,
“selector”: “a”,
“properties”: {
“anchor.href”: {
“type”: “string”,
“selector”: “a”,
“attribute”: “href”
},
“anchor.rel”: {
“type”: “string”,
“selector”: “a”,
“attribute”: “rel”
}
}
}, {
“class”: “BoldRule”,
“selector”: “b”
}, {
“class”: “BoldRule”,
“selector”: “strong”
}, {
“class”: “ItalicRule”,
“selector”: “i”
}, {
“class”: “ItalicRule”,
“selector”: “em”
}, {
“class”: “BlockquoteRule”,
“selector”: “blockquote”
}, {
“class”: “PassThroughRule”,
“selector”: “blockquote p”
}, {
“class”: “ItalicRule”,
“selector”: “cite”
}, {
“class”: “ImageRule”,
“selector”: “img”,
“properties”: {
“image.url”: {
“type”: “string”,
“selector”: “img”,
“attribute”: “src”
}
}
}, {
“class”: “ImageRule”,
“selector”: “//a)]”,
“properties”: {
“image.url”: {
“type”: “string”,
“selector”: “img”,
“attribute”: “src”
}
}
}, {
“class”: “ListItemRule”,
“selector” : “li”
}, {
“class”: “ListElementRule”,
“selector” : “ul”
}, {
“class”: “ListElementRule”,
“selector” : “ol”
}, {
“class”: “BlockquoteRule”,
“selector” : “blockquote”
}, {
“class”: “H1Rule”,
“selector” : “h1”,
“properties” : {
“h1.class” : {
“type” : “string”,
“selector” : “link”,
“attribute”: “class”
}
}
}, {
“class”: “H1Rule”,
“selector” : “title”
}, {
“class”: “H2Rule”,
“selector” : “h2”,
“properties” : {
“h2.class” : {
“type” : “string”,
“selector” : “link”,
“attribute”: “class”
}
}
}, {
“class”: “H2Rule”,
“selector” : “h3,h4,h5,h6”
}, {
“class”: “InteractiveRule”,
“selector” : “blockquote.instagram-media”,
“properties” : {
“interactive.iframe” : {
“type” : “multiple”,
“children”: [
{
“type”: “element”,
“selector”: “blockquote”
}, {
“type”: “next-sibling-element-of”,
“selector”: “blockquote”
}
]
}
}
}, {
“class”: “IgnoreRule”,
“selector” : “script”
}, {
“class”: “InteractiveRule”,
“selector” : “iframe”,
“properties” : {
“interactive.url” : {
“type” : “string”,
“selector” : “iframe”,
“attribute”: “src”
},
“interactive.width” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “width”
},
“interactive.height” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “height”
},
“interactive.iframe” : {
“type” : “children”,
“selector” : “iframe”
}
}
}, {
“class”: “InteractiveRule”,
“selector” : “div.embed”,
“properties” : {
“interactive.iframe” : {
“type” : “children”,
“selector” : “div.embed”
},
“interactive.height” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “height”
},
“interactive.width” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “width”
}
}
}, {
“class”: “InteractiveRule”,
“selector” : “div.interactive”,
“properties” : {
“interactive.iframe” : {
“type” : “children”,
“selector” : “div.interactive”
},
“interactive.height” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “height”
},
“interactive.width” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “width”
}
}
}, {
“class”: “InteractiveRule”,
“selector” : “//div[@class=’embed’ and iframe]”,
“properties” : {
“interactive.url” : {
“type” : “string”,
“selector” : “iframe”,
“attribute”: “src”
},
“interactive.iframe” : {
“type” : “children”,
“selector” : “iframe”,
“attribute”: “src”
},
“interactive.width” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “width”
},
“interactive.height” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “height”
}
}
}, {
“class”: “InteractiveRule”,
“selector” : “//div[@class=’interactive’ and iframe]”,
“properties” : {
“interactive.url” : {
“type” : “string”,
“selector” : “iframe”,
“attribute”: “src”
},
“interactive.iframe” : {
“type” : “children”,
“selector” : “iframe”
},
“interactive.height” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “height”
},
“interactive.width” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “width”
}
}
}, {
“class”: “InteractiveRule”,
“selector” : “table”,
“properties” : {
“interactive.iframe” : {
“type” : “element”,
“selector” : “table”
},
“interactive.height” : {
“type” : “int”,
“selector” : “table”,
“attribute”: “height”
},
“interactive.width” : {
“type” : “int”,
“selector” : “iframe”,
“attribute”: “width”
}
}
}, {
“class”: “SlideshowImageRule”,
“selector” : “figure”,
“properties” : {
“image.url” : {
“type” : “string”,
“selector” : “img”,
“attribute”: “src”
},
“caption.title” : {
“type” : “string”,
“selector” : “figcaption”
}
}
}, {
“class”: “SlideshowRule”,
“selector” : “div.gallery”
}, {
“class”: “CaptionRule”,
“selector” : “figcaption”
}, {
“class”: “CaptionRule”,
“selector” : “p.wp-caption-text”
}, {
“class”: “ImageRule”,
“selector” : “figure”,
“properties” : {
“image.url” : {
“type” : “string”,
“selector” : “img”,
“attribute”: “src”
}
}
}, {
“class”: “VideoRule”,
“selector” : “div.wp-video”,
“containsChild”: “video”,
“properties” : {
“video.url” : {
“type” : “string”,
“selector” : “source”,
“attribute”: “src”
},
“video.type” : {
“type” : “string”,
“selector” : “source”,
“attribute”: “type”
}
}
}, {
“class” : “PassThroughRule”,
“selector” : “div.vce-gallery-big”
}, {
“class” : “PassThroughRule”,
“selector” : “div.vce-gallery-small”
}, {
“class” : “IgnoreRule”,
“selector” : “div.vce-gallery-slider”
}, {
“class”: “SlideshowImageRule”,
“selector” : “div.big-gallery-item”,
“properties” : {
“image.url” : {
“type” : “string”,
“selector” : “img”,
“attribute”: “src”
},
“caption.title” : {
“type” : “string”,
“selector” : “figcaption.wp-caption-text”
}
}
},
{
“class”: “SlideshowImageRule”,
“selector” : “.frs-slideshow-container img”
},
{
“class”: “SlideshowRule”,
“selector” : “.frs-slideshow-container”
},
{
“class”: “SlideshowImageRule”,
“selector” : “.frs-slide-img”
},
{
“class”: “SlideshowRule”,
“selector” : “.frs-slide-img img”
}
]
}
please help me
Thanks
