GithubHelp home page GithubHelp logo

facebook / instant-articles-builder Goto Github PK

View Code? Open in Web Editor NEW
125.0 25.0 64.0 6.5 MB

Instant Articles Rules Editor

Home Page: https://facebook.github.io/instant-articles-builder

License: Other

CSS 5.65% HTML 0.63% JavaScript 89.97% PHP 2.93% Shell 0.53% Dockerfile 0.29%
facebook instant-articles editor

instant-articles-builder's Introduction

Facebook Instant Articles Builder

CircleCI

Instant Articles Builder helps you to create a template to build Facebook Instant Articles from articles on your website.

Try it out (Windows/Mac): https://facebook.github.io/instant-articles-builder/

Building from source

Run (on the root of the project):

npm install

Launching the App

Just run (on the root of the project):

npm start

Testing

Run the following command (on the root of the project):

npm test

Preview config

To enable the experimental preview of the Instant Article, you can run the webserver locally or point to a remote one.

There are three environment variables that are used to configure the webserver:

  • IA_BUILDER_START_LOCAL_PREVIEW_WEBSERVER (true|false). Optional.
    • When true, when launching the Builder it will start the local webserver (requires php to be installed locally)
    • Default value: true
  • IA_BUILDER_PREVIEW_WEBSERVER_HOST ({protocol}:{hostname}). Optional.
  • IA_BUILDER_PREVIEW_WEBSERVER_PORT ({port number}). Optional.
    • When present overrides the port of the webserver
    • Default value: 8105

Local webserver

To enable the preview using a local webserver (which requires PHP to be installed in your local environment) navigate to the webserver directory:

cd webserver

And install the composer dependencies:

composer install

Remote webserver

You may also point to a remote webserver for the preview. To configure the remote webserver you can use the mentioned environment variables, or if you are building from source you can create a file called .env in the root of the repo with content similar to:

IA_BUILDER_START_LOCAL_PREVIEW_WEBSERVER=false
IA_BUILDER_PREVIEW_WEBSERVER_HOST=http://localhost
IA_BUILDER_PREVIEW_WEBSERVER_PORT=8105

You can use the Docker image included in this repo under docker/webserver to get a webserver instance running locally in Docker.

Single container (no cache)

You can get a single container with the webserver without cache by running the following command to build the image:

docker build ./docker/webserver -t ia-webserver

and then the following command to run your container and make it accessible through the 8105 port (which is also configurable):

docker run -it --rm -p 8105:8000 --name ia-webserver ia-webserver:latest

Docker-compose (with cache)

Update .env with the port according with docker-compose file. As default, memcache it is configured: "8107:8000".

You can get a webserver with cache (using memcached) by running the following command from the `Docker/webserver/ folder:

docker-compose up

You can take a look at the cache stats by going to http://localhost:11212.

once you are done you can stop both containers with the following command:

docker-compose down

License

Please read the LICENSE file for more information.

instant-articles-builder's People

Contributors

dependabot[bot] avatar diegoquinteiro avatar dlackty avatar dperezmiami avatar eduardocesb avatar everton-rosario avatar facebook-github-bot avatar gisedaye avatar kutschenator avatar mburak avatar nataliemt avatar pestevez avatar timjacobi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

instant-articles-builder's Issues

Issue with preview

Steps required to reproduce the problem

  1. Link all tags
  2. Preview never happens.
  3. Can't see any error message explaining the reason.

Expected Result

  • Preview

Actual Result

  • No Preview

Environment Info

VERSION: 0.2.2
URL: https://www.oninitiative.com/learn/towards-the-art-of-home-improvement-the-garden/
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.2",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "GlobalRule",
      "selector": "html",
      "properties": {
        "article.title": {
          "attribute": "content",
          "selector": ".blog-title",
          "type": "element"
        },
        "author.name": {
          "selector": ".blog-header .blog-date",
          "type": "string"
        },
        "image.url": {
          "attribute": "src",
          "selector": ".lazyautosizes",
          "type": "string"
        },
        "article.body": {
          "attribute": "content",
          "selector": ".blog-post",
          "type": "element"
        },
        "article.canonical": {
          "attribute": "href",
          "selector": "link[rel=canonical]",
          "type": "string"
        }
      }
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "AnchorRule",
      "selector": "a",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "a",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

Show different message for Preview

Every time it is not possible to load a preview, the following message is displayed:

Screen Shot 2021-02-25 at 14 18 49

The Preview is loaded when all required fields are filled. Although the message shows that it was not possible to load the preview section, it is not clear that the reason is because of one of the mandatory fields was not entered.
The above message should be displayed as default when the page is loading but once user start filling the fields, the message should be:
"Please, select all required fields to generate a preview"

Issues Running on Windows

Couple of issues when trying to install, as follows:

  1. If unpacking under a folder structure, a few folders away from the root, Windows reports that the files cannot be unpacked because the folder depth is too deep. Not a huge problem, since you can create a folder directly under root, and get your unpack accomplished.

  2. When trying to fire up the "Instant Articles Builder.exe" file, the built-in Windows protection steps in and shows the following messages:

Windows protected your PC
Microsoft Defender SmartScreen prevented an unrecognized app from starting. Running this app might put your PC at risk.

Click on "More info" and you get this:
App: | Instant Articles Builder.exe
Publisher: | Unknown publisher

There is no README, so this is of course, a bit of a concern.

Default value for parameters with a class type hint can only be NULL

Steps required to reproduce the problem

Expected Result

Actual Result

Environment Info

VERSION: 0.2.0
URL: https://geek-developer.com/comment-installer-et-utiliser-ckeditor-dans-laravel-6/
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.0",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "GlobalRule",
      "selector": "html",
      "properties": {
        "article.title": {
          "attribute": "content",
          "selector": "p:nth-child(4)",
          "type": "element"
        },
        "article.publish": {
          "format": "Y-m-d\\TH:i:sP",
          "selector": ".heading-content-date",
          "type": "date"
        },
        "author.name": {
          "selector": ".heading-content a",
          "type": "string"
        },
        "image.url": {
          "attribute": "src",
          "selector": ".img-fluid",
          "type": "string"
        },
        "article.body": {
          "attribute": "content",
          "selector": ".col-lg-8",
          "type": "element"
        },
        "article.canonical": {
          "attribute": "href",
          "selector": "p:nth-child(5)",
          "type": "string"
        }
      }
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "AnchorRule",
      "selector": "a",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "a",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

Unable to see preview

I tried several days to get preview but unable to get preview. I am using Joomla and tried for kantipathnews. Is there any thread to fix this?
I think "Instant-Article-builder also not installed but runs from folder.

Embedded YouTube Video Conversion

I'm starting off with this:

<div class="video-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/IQ46DXEQn-Y" frameborder="0" allow="autoplay; encrypted-media" class="videoia" allowfullscreen=""></iframe> </div>

Here's what I have in the rules document:

{"class":"InteractiveRule","selector":"div.video-container","properties":{"interactive.iframe":{"selector":"*","type":"element"},"interactive.url":{"attribute":"src","selector":"iframe","type":"string"}}}

Here's the result:

screen shot 2018-06-10 at 4 46 23 pm

I've tried everything I know how to get rid of the div tags and only leave one instance of the iframe.

What am I doing wrong here?

Preview Not showing

Steps required to reproduce the problem

  1. new instance article builder add http://example.com/default.aspx and click Go
  2. website browse success
  3. Template/Element set on website, nothing showing in preview if content is not enough

Expected Result

  • I want preview like any wordpress site or as given facebook example

Actual Result

Environment Info

VERSION: 0.2.0
URL: http://example/default.aspx
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.0",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "AnchorRule",
      "selector": "a",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "a",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

How to set width and height for Ad Rule?

I need to set the width and height of my ad, but this does not is working, only 'ad.rule' works.

I've also tried using 'constant' and 'value', but it did not work.

{
    "style_name": "uol",
    "rules": [
        {
            "class": "TextNodeRule"
        },
        {
            "class": "GlobalRule",
            "selector": "html",
            "properties": {
                "article.title": {
                    "attribute": "content",
                    "selector": "span i",
                    "type": "element"
                },
                "article.publish": {
                    "format": "Y-m-d\\TH:i:s",
                    "selector": "[ia-date]",
                    "type": "date"
                },
                "author.name": {
                    "selector": "[ia-author]",
                    "type": "string"
                },
                "image.url": {
                    "attribute": "content",
                    "selector": "[property=\"og:image\"]",
                    "type": "string"
                },
                "article.body": {
                    "selector": "article.article .text",
                    "type": "element"
                },
                "article.canonical": {
                    "attribute": "href",
                    "selector": "link[rel=canonical]",
                    "type": "string"
                }
            }
        },        
        {
            "class": "BlockquoteRule",
            "selector": "cite"
        },
        {
            "class": "ParagraphRule",
            "selector": "p"
        },
        {
            "class": "H2Rule",
            "selector": "h2,h3"
        },
        {
            "class": "H1Rule",
            "selector": "h1"
        },
        {
            "class": "ListElementRule",
            "selector": "ol, ul"
        },
        {
            "class": "ListItemRule",
            "selector": "li"
        },
        {
            "class": "AnchorRule",
            "selector": "a",
            "properties": {
                "anchor.href": {
                    "attribute": "href",
                    "selector": "a",
                    "type": "string"
                }
            }
        },
        {
            "class": "ItalicRule",
            "selector": "i"
        },
        {
            "class": "EmphasizedRule",
            "selector": "em"
        },
        {
            "class": "BoldRule",
            "selector": "b, strong"
        },
        {
            "class": "ImageRule",
            "selector": "img",
            "properties": {
                "image.url": {
                    "attribute": "src",
                    "selector": "img",
                    "type": "string"
                },
                "image.caption": {
                    "attribute": "src",
                    "selector": "img",
                    "type": "element"
                }
            }
        },
        {
            "class": "FooterRule",
            "selector": ".thumbnail-standard"
        },
        {
            "class": "VideoRule",
            "selector": "article.article .video-embed",
            "properties": {
                "video.url": {
                    "attribute": "data-ia-url",
                    "selector": ".uolplayer",
                    "type": "string"
                },
                "video.type": {
                    "attribute": "data-ia-type",
                    "selector": ".uolplayer",
                    "type": "string"
                }
            }
        },
        {
            "class": "PassThroughRule",
            "selector": ".summary-content,.summary-news,.slot-g,.text,.youtube-embed,.related-content-hyperlink"
        },
        {
            "class": "AdRule",
            "selector": "[ia-ad-url]",
            "properties": {
                "ad.url": {
                    "attribute": "ia-ad-url",
                    "selector": "[ia-ad-url]",
                    "type": "string"
                },
                "ad.width": {
                    "attribute": "ia-ad-width",
                    "selector": "[ia-ad-width]",
                    "type": "int"
                },
                "ad.height": {
                    "attribute": "ia-ad-height",
                    "selector": "[ia-ad-height]",
                    "type": "int"

                }
            }
        }
    ]
}

Allow sending class name as part of the attributes of the selected element

We are excluding the class attribute of selected DOM elements. Some of the rules e.g. H1Rule expects the class attribute to be used to set properties.

To solve this issue it is NOT enough with removing class from the list of excluded attributes since as part of the highlighting process we add new classes to the element. We will have to remove all the classes added by us first.

Video not showing in preview

I'm trying to get video from the website. I saw it create a placeholder, but it does not show the video. so it just leaves a placeholder to show the place only not showing the real video content.

My question is, is that feature or bug? If the expected can show the video, then any suggestions on how to show that video?

problem parsing localized release date

Steps required to reproduce the problem

  1. localized publishing date - 19. února 2019 ● 14:44
  2. we use strftime but not date

Expected Result

Actual Result

Environment Info

VERSION: 0.2.0
URL: https://www.blesk.cz/clanek/celebrity-ceske-celebrity/596207/zarostly-repka-u-soudu-podminky-mu-zmenili-na-9-mesicu-natvrdo.html
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.0",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "GlobalRule",
      "selector": "html",
      "properties": {
        "article.title": {
          "attribute": "content",
          "selector": "h1",
          "type": "element"
        },
        "article.publish": {
          "format": "d. F Y ● G:i",
          "selector": ".dateTime",
          "type": "date"
        },
        "author.name": {
          "selector": ".author",
          "type": "string"
        },
        "image.url": {
          "attribute": "src",
          "selector": ".gallery-main-container .gallery",
          "type": "string"
        },
        "article.body": {
          "attribute": "content",
          "selector": "#bbtext",
          "type": "element"
        },
        "article.canonical": {
          "attribute": "href",
          "selector": "link[rel=canonical]",
          "type": "string"
        }
      }
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "AnchorRule",
      "selector": "a",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "a",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

Instant Articles Builder Does Not Work

Hello,

I have used the desktop (iMac) version to try and build an instant article. All of the 'ticks' were green, and I embedded the HTML code into the header of the article (via my Wordpress site) but still the article does not load as IA when I share the URL on my Facebook page (Emergency Services Humour)

https://emergencyservices.media/?p=2094 is the article

<meta property="ia:rules_url" content="path/to/your/rules-file.json"/>

is the code

Refactor logic to render labels for required and optional fields

Requested by @mburak in #83

We have duplicated code to generate the icons for the labels of required and optional fields. Let's refactor the code by adding constants for the characters used to display the checkmark and bullet point, and also create a helper function to generate the labels based on the value of their respective prop.

Node instructions in the Readme

I think instead of telling the user to update their node version we should add a badge that tells the user what the lowest supported version of node is and also specified that version in the engines property in package.json.

Thoughts?

Instant Articles not being recognized

I really really really want this method to work, it was so simple and intuitive to set up. WAY better than the RSS or API methods. But it seems that FB is simply not ingesting the articles.

I have included the appropriate fb:pages and ia:rules_url to the article pages, tried sharing articles, but alas can not get any to register as Instant articles.

Documentation is lacking around the web for the ia:rules_url method. Are there steps I'm missing? Does this method for sure work? Any help would be greatly appreciated.

Treatment of DateTime attributes

We are sending a single property with type date, which is preventing the tool from using two major use cases to parse date-time fields:

  • The date is in the form of text e.g. <p>December 15, 2017</p>
  • The date is in an attribute with different name e.g. <meta property="article:published_time" content="2018-01-10" />

Should we also support string attributes?

fdds

Steps required to reproduce the problem

Expected Result

Actual Result

Environment Info

VERSION: 0.2.2
URL: http://exkluziv.net/svim-strancima-dopusten-ulazak-u-bih-s-negativnim-pcr-testom/
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.2",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "GlobalRule",
      "selector": "html",
      "properties": {
        "article.title": {
          "attribute": "content",
          "selector": "h1.entry-title",
          "type": "element"
        },
        "article.publish": {
          "attribute": "datetime",
          "format": "Y-m-d\\TH:i:sP",
          "selector": "time",
          "type": "date"
        },
        "author.name": {
          "selector": ".author-box-wrap .td-author-name",
          "type": "string"
        },
        "image.url": {
          "attribute": "src",
          "selector": ".td-modal-image",
          "type": "string"
        },
        "article.body": {
          "attribute": "content",
          "selector": ".td-post-content",
          "type": "element"
        },
        "article.canonical": {
          "attribute": "href",
          "selector": "link[rel=canonical]",
          "type": "string"
        }
      }
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "AnchorRule",
      "selector": "a",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "a",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

Add support for XPath selectors

Some of the default rules defined in the SDK use XPath selectors. Should we also add support for them?

Example:

{
	"class": "InstantArticleRule",
	"selector": "head",
	"properties": {
		"article.canonical": {
			"type": "string",
			"selector": "link",
			"attribute": "href"
		},
		"article.charset": {
			"type": "xpath",
			"selector": "//meta[@charset]",
			"attribute": "charset"
		},
		"article.markup.version": {
			"type": "xpath",
			"selector": "//meta[@property='op:markup_version']",
			"attribute": "content"
		},
		"article.auto.ad": {
			"type": "xpath",
			"selector": "//meta[@property='fb:use_automatic_ad_placement']",
			"attribute": "content"
		},
		"article.style": {
			"type": "xpath",
			"selector": "//meta[@property='fb:article_style']",
			"attribute": "content"
		}
	}
}

Upgrade dependencies

We need to upgrade some dependencies as there were some vulnerabilities detected:

  • electron
  • hoek
  • moment

site has minimal readership error

Hello, I have a website and I have more than 100k page viewers per month on my website, and I also have a facebook page with more than 2000+ followers but when I apply to instant article every time it shows me "The provided URL is not being accepted because the site has minimal readership" why this happens every time and I follow every policy of Facebook. and i place the code perfectly in WordPress.

My Website Url: http://musicworldarj.com

Facebook Page Url: https://www.facebook.com/MusicWorldArj

Please help me,

Preview is not displayed, php date format error

img-2019-09-29-16-08-00

img-2019-09-29-16-12-24

2019-09-29T09:25:52.317Z
I tried to put various formats, all to no avail

config.json

{
   "generator_name":"facebook-instant-articles-builder",
   "generator_version":"0.2.0",
   "rules":[
      {
         "class":"TextNodeRule"
      },
      {
         "class":"GlobalRule",
         "selector":"html",
         "properties":{
            "article.title":{
               "attribute":"content",
               "selector":".css-1qtfblh-SInfoName",
               "type":"element"
            },
            "article.publish":{
               "attribute":"datetime",
               "format":"D, j M Y H:i:s O",
               "selector":".CrearedAt",
               "type":"date"
            },
            "author.name":{
               "attribute":"content",
               "selector":"meta[name=\"author\"]",
               "type":"string"
            },
            "image.url":{
               "attribute":"content",
               "selector":"meta[property=\"og:image\"]",
               "type":"string"
            },
            "article.body":{
               "selector":".SContentEditor",
               "type":"element"
            },
            "article.canonical":{
               "attribute":"content",
               "selector":"meta[property=\"og:url\"]",
               "type":"string"
            }
         }
      },
      {
         "class":"BlockquoteRule",
         "selector":"blockquote"
      },
      {
         "class":"ParagraphRule",
         "selector":"p"
      },
      {
         "class":"H2Rule",
         "selector":"h2"
      },
      {
         "class":"H1Rule",
         "selector":"h1"
      },
      {
         "class":"ListElementRule",
         "selector":"ol, ul"
      },
      {
         "class":"ListItemRule",
         "selector":"li"
      },
      {
         "class":"AnchorRule",
         "selector":"a",
         "properties":{
            "anchor.href":{
               "attribute":"href",
               "selector":"a",
               "type":"string"
            }
         }
      },
      {
         "class":"ItalicRule",
         "selector":"i"
      },
      {
         "class":"EmphasizedRule",
         "selector":"em"
      },
      {
         "class":"BoldRule",
         "selector":"b, strong"
      },
      {
         "class":"ImageRule",
         "selector":"img",
         "properties":{
            "image.url":{
               "attribute":"src",
               "selector":"img",
               "type":"string"
            },
            "image.caption":{
               "attribute":"src",
               "selector":"img",
               "type":"element"
            }
         }
      },
      {
         "class":"IgnoreRule",
         "selector":".STopImage"
      },
      {
         "class":"IgnoreRule",
         "selector":".EditorJsLinkTool img"
      },
      {
         "class":"IgnoreRule",
         "selector":".ComponentSelector"
      },
      {
         "class":"IgnoreRule",
         "selector":".ContentNext"
      },
      {
         "class":"IgnoreRule",
         "selector":".ContentNavigation"
      },
      {
         "class":"IgnoreRule",
         "selector":".ArticleAuthorAvatar"
      },
      {
         "class":"IgnoreRule",
         "selector":".ArticleTop"
      },
      {
         "class":"IgnoreRule",
         "selector":"header"
      }
   ]
}

Style "selector" field

The "selector" field on the RulePicker should behave the same as the PropertyPickers.

Article Still Not Loading as IA format

Hi,

I have followed the instructions (being a layman) as indicated in your 'how to' guides (screen shot attached) but the articles are still not loading on Facebook as IA format?

This is the code I have inputted:

Motorist who was stopped by Cops as he filmed the scene of an accident as he drove past is caught with no insurance!

Tuesday 26th June | by Cop(ex)  

 

A driver has been caught out for driving without any insurance as he drove past the scene of a serious road traffic collision whilst filming the emergency services at work.

As instructed to via this link:

https://developers.facebook.com/docs/instant-articles/crawler-ingestion#rules-reference

screen shot 2018-06-27 at 09 53 54

Annapurna circuit

The Annapurna Sanctuary is a high glacial basin lying 40 km directly north of Pokhara . Pokhara is a city on Phewa Lake, in central Nepal. It’s known as a gateway to the Annapurna Circuit, a popular trail in the Himalayas. This oval-shaped plateau sits at an altitude of over 4000 meters , and is surrounded by a ring of mountains, the Annapurna range, most of which are over 7000 meters.

from Annapurna base camp
Fact about Annapurna base camp
Elevation-: 4130 m (13,550 ft)
Parent Range-: Himalayas
The best months to trek -: pre-monsoon (February, March, April and May) and post monsoon (late September, October, November and December) It is possible to make the journey in January and early September but we prefer the above months .
How much time to take-: The Annapurna Base Camp Trek takes 7 to 12 days, depending on your itinerary and length of walking days. The itinerary presented here takes 12 days, starting from Nayapul (a 1 1/2 hour drive from Pokhara ) and going north up to Ghorepani and the famous viewpoint at Poon Hill. From Ghorepani you go eastward to Chomrong and then north again entering the Modi Kola Valley which leads up to the Base Camp.

Annapurna
Annapurna base camp

Instant Articles Builder Does Not Work no preview available

Steps required to reproduce the problem

  1. Tried to select to create the article
  2. Done all the steps
  3. no preview available

Expected Result

  • Preview of the instant article creation

Actual Result

  • No preview available at all even in the source

Environment Info

VERSION: 0.2.0
URL: https://heliopolist.com/12-hotels-in-heliopolis-for-the-perfect-wedding/
RULES:

{
  "style_name": "Heliopolist",
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.0",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "GlobalRule",
      "selector": "body",
      "properties": {
        "article.title": {
          "attribute": "content",
          "selector": ".jv-single-post-title",
          "type": "element"
        },
        "author.name": {
          "selector": ".meta-author-name a",
          "type": "string"
        },
        "article.body": {
          "attribute": "content",
          "selector": ".entry-content",
          "type": "element"
        },
        "article.canonical": {
          "attribute": "href",
          "selector": ".jv-single-post-title",
          "type": "string"
        }
      }
    },
    {
      "class": "BlockquoteRule",
      "selector": "p"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "strong"
    },
    {
      "class": "H1Rule",
      "selector": "strong"
    },
    {
      "class": "ListElementRule",
      "selector": "p"
    },
    {
      "class": "ListItemRule",
      "selector": "body"
    },
    {
      "class": "AnchorRule",
      "selector": "strong",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "strong",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "strong"
    },
    {
      "class": "EmphasizedRule",
      "selector": "#page-style"
    },
    {
      "class": "BoldRule",
      "selector": "strong"
    },
    {
      "class": "ImageRule",
      "selector": "p",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": ".size-medium",
          "type": "element"
        }
      }
    }
  ]
}

Optimize the preview and source code views

The current implementation of the builder uses a PHP webserver installed locally. This server receives two requests:

  1. Generate the IA markup of a given URL, which is used for the Source tab.
  2. Generate the Preview of the Instant Article crated for the given URL and the template defined in the builder, which is the one used for the Preview tab.

Each time the user switches tabs, a new call is made to the webserver and the corresponding transformations are ran, regardless of presence of new changes. This causes some performance issues, which will be exacerbated if we keep adding tabs or other functionality that relies on the webserver (like the one describes in #149).

We should look for ways to optimize this functionality, perhaps using some sort of cache (either on the webserver or on the client).

We have a few challenges that we need to account for:

  1. The Source view leverages the browser's view-source:{URL} to format the markup.
  2. The Preview tab relies on a given URL returning a web page.
  3. If we were to use a single API call to receive multiple elements (IA markup, HTML markup of the preview, SDK warnings, etc.) we will have to escape the HTML contents.

website not displayed in builder

Steps required to reproduce the problem

  1. open instant articles builder
  2. enter url www.cbtisrael.co.il or article post within site

Expected Result

  • expect to see website displayed

Actual Result

  • display windows remains blank, no elements shown

Environment Info

VERSION: 0.2.0
URL: https://www.cbtisrael.co.il/2018/05/29/%D7%94%D7%A4%D7%A8%D7%A2%D7%AA-%D7%90%D7%9B%D7%99%D7%9C%D7%94-%D7%9E%D7%9E%D7%94-%D7%A0%D7%95%D7%91%D7%A2%D7%AA-%D7%90%D7%9B%D7%99%D7%9C%D7%94-%D7%A8%D7%92%D7%A9%D7%99%D7%AA/
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.0",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "AnchorRule",
      "selector": "a",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "a",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

Add Watchman to the project

Running the jest tests on the rules editor project issues a warning regarding watchman.

jest-haste-map: Watchman crawl failed. Retrying once with node crawler. Usually this happens when watchman isn't running. Create an empty .watchmanconfig file in your project's root folder or initialize a git or hg repository in your project.

Should we set up a watcher (using watchman) for this project to rebuild when any code changes are made? This will get rid of the jest warning as well.

More on watchman here: https://facebook.github.io/watchman/

Analytics and Ads code

Hi,

@pestevez

How ad placement and analytics code (google, chartbeat etc) will work if we use this tool. As we are only defining the structure of the article, will it be possible for facebook to extract all the info of that article via web page of that article (analytics and ads for that article), rendered as instant article on mobile with all the analytics and ad code.

Regards

'style_name', 'ads' and 'analytics' are not displayed when taken from facebook

Steps required to reproduce the problem

  1. I added the 'meta tags' needed to test on my production page, but the result displayed in the preview is not the same as the result extracted from Facebook.

Expected Result

  • The metatag 'fb:article_style" content="uol"
  • The analytics and the ads did not work either.

Actual Result

  • My style's 'metatag' is not being added to the page.

Environment Info

VERSION: 0.2.0
URL: https://esporte.uol.com.br/futebol/ultimas-noticias/2019/03/08/um-mes-depois-sobrevivente-de-incendio-no-fla-evolui-mas-nao-tem-alta.htm
RULES:

{
  "analytics": {
    "fb_pixel_id": "",
    "raw_html": "<script type=\"text/javascript\">alert(\"teste\");</script>"
  },
  "ads": {
    "raw_html": "<script type=\"text/javascript\">alert(\"ads\");</script>"
  },
  "style_name": "uol",
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.0",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "GlobalRule",
      "selector": "html",
      "properties": {
        "article.title": {
          "attribute": "content",
          "selector": "span i",
          "type": "element"
        },
        "article.publish": {
          "format": "Y-m-d\\TH:i:s",
          "selector": "[ia-date]",
          "type": "date"
        },
        "author.name": {
          "selector": "[ia-author]",
          "type": "string"
        },
        "image.url": {
          "attribute": "content",
          "selector": "[property=\"og:image\"]",
          "type": "string"
        },
        "article.body": {
          "attribute": "content",
          "selector": ".text",
          "type": "element"
        },
        "article.canonical": {
          "attribute": "href",
          "selector": "link[rel=canonical]",
          "type": "string"
        }
      }
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "AnchorRule",
      "selector": "a",
      "properties": {
        "anchor.href": {
          "attribute": "href",
          "selector": "a",
          "type": "string"
        }
      }
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

PROBLEM: can't show preview instant article

Steps required to reproduce the problem

Expected Result

Actual Result

Environment Info

VERSION: 0.2.2
URL: https://engineering.fb.com/2017/09/26/web/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.2",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "GlobalRule",
      "selector": "html",
      "properties": {
        "article.title": {
          "attribute": "content",
          "selector": ".entry-title div",
          "type": "element"
        },
        "article.publish": {
          "attribute": "datetime",
          "format": "Y-m-d\\TH:i:sP",
          "selector": ".entry-meta .entry-date",
          "type": "date"
        },
        "author.name": {
          "selector": ".entry-authors-social .author",
          "type": "string"
        },
        "image.url": {
          "attribute": "srcset",
          "selector": "#post-feat-image-container .wp-post-image",
          "type": "string"
        },
        "article.body": {
          "attribute": "content",
          "selector": ".entry-content",
          "type": "element"
        },
        "article.canonical": {
          "attribute": "href",
          "selector": "link[rel=canonical]",
          "type": "string"
        }
      }
    }
  ]
}

Display IA SDK Warnings

It'd be nice to display somewhere the warnings (if any) that the IA SDK returns. This could help to identify why some elements may be missing or not being transformed correctly.

Algorithm to resolve a selector given a DOM element needs rule scope

With the introduction of selectors for rules e.g. the CaptionRule has a default selector of span.caption the algorithm to resolve a selector for a given DOM element (click-to-find feature) needs to be updated to take into account the "scope" of the rule.

We need to pass a new parameter to the existing algorithm so that it can resolve the best selector given the rule's scope determined by the rule selector.

Too many scrollbars

Since we merged the migration to Electron there are too many scrollbars in the app.
32689387-8bda1b0c-c6db-11e7-98fd-e9dc1f2a0044

eror

Steps required to reproduce the problem

Expected Result

Actual Result

Environment Info

VERSION: 0.2.0
URL: https://talikanews.com/2018/12/17/baiq-diyah-gunakan-moment-hut-ntb-ke-60-koreksi-sungai-di-mataram/
RULES:

{
  "generator_name": "facebook-instant-articles-builder",
  "generator_version": "0.2.0",
  "rules": [
    {
      "class": "TextNodeRule"
    },
    {
      "class": "BlockquoteRule",
      "selector": "blockquote"
    },
    {
      "class": "ParagraphRule",
      "selector": "p"
    },
    {
      "class": "H2Rule",
      "selector": "h2"
    },
    {
      "class": "H1Rule",
      "selector": "h1"
    },
    {
      "class": "ListElementRule",
      "selector": "ol, ul"
    },
    {
      "class": "ListItemRule",
      "selector": "li"
    },
    {
      "class": "ItalicRule",
      "selector": "i"
    },
    {
      "class": "EmphasizedRule",
      "selector": "em"
    },
    {
      "class": "BoldRule",
      "selector": "b, strong"
    },
    {
      "class": "ImageRule",
      "selector": "img",
      "properties": {
        "image.url": {
          "attribute": "src",
          "selector": "img",
          "type": "string"
        },
        "image.caption": {
          "attribute": "src",
          "selector": "img",
          "type": "element"
        }
      }
    }
  ]
}

Add support for properties with type "exists"

Support properties with type exists like related.sponsored below:

{
	"class": "RelatedItemRule",
	"selector": "li",
	"properties": {
		"related.sponsored": {
			"type": "exists",
			"selector": "li",
			"attribute": "data-sponsored"
		},
		"related.url": {
			"type": "string",
			"selector": "a",
			"attribute": "href"
		}
	}
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.