You just need to know simple coding that Facebook applies when it comes to making one. Just follow the simple step-by-step tutorial below.
For this tutorial you will be able to learn the following:
a. Basic structure of FB instant article coding.
b. Inserting texts, images, Youtube videos, tables inside your Facebook Instant Articles.
How to create Facebook instant articles manually or from scratch
First of all you need to know the basic of Facebook Articles coding. For a simple term it is like HTML + additional tags from Facebook only.2. The coding below will be the starting point of making the article manually.
<html>
<body><article><p>Introduction paragraph</p>
<figure><img src="image link if there is any"></figure>
<h2>Title of the FB instant article same as your blogger or wordpress</h2>
<p>Whole content of your article</p>
<br><br>
<header><time class="op-modified" datetime="2017-07-28T02:10:00-07:00">2017-07-28T02:10:00-07:00</time><time datetime="2017-07-28T02:10:00-07:00" class="op-published"></time><h1>Title of the FB instant article</h1></header><footer></footer></article></body>
<head><link rel="canonical" href="link of the article from blogger or wordpress"></head>
</html>
3. Now go to your Page Publishing Tools > Facebook Instant article > Production Articles > then click +Create.
4. Copy the whole code in step 2.
5. Just replace all the needed text, links, images and contents in the highlighted and colored text in step 2. See sample below.
6. Save your work and done!
How to Insert Texts or Paragraphs inside Facebook Instant Article
Inserting a text using HTML is different when you are inserting a text inside a Facebook Instant articles. Facebook has its own way to do this. And I will show you how to do it.
After connecting your blogger or wordpress blog RSS feed into Facebook instant articles you will now manually edit all the articles that will be having errors inside the Production articles section. Sometimes when you preview an instant article using the FB page manager some text or paragraph totally disappeared. Just follow the step-by-step tutorial below to solve this problem.
STEPS:
1. This is very simple, all you need to do is to always enclose your texts or paragraph with the paragraph tag. See the sample coding below.
<p>I will not be invisible again</p>
2. Save your work and done!
Note: Texts and paragraphs inside a table tag will always be visible even without the <p> tag.
How to insert Image in Facebook instant articles
Now if you wanted to insert additional images to add looks and design in your Facebook instant articles you just need to put additional layer of coding into the image tag. Just follow the simple tutorial below.
STEPS
1. First get the url or link of your image and put it inside the image tag. See the sample coding below.
<img src="link of the image or photo">
2. Now, after doing that first step, add the opening and closing figure tag codes. See the sample below.
<figure><img src="link of the image or photo"></figure>
3. Save your work and done!
How to Embed Tables in Facebook Instant Articles
No table appearing inside your FB instant articles? This happens when you just started out using Facebook instant articles. You just copied all the coding from your blogger or WordPress article preview it using the FB page manager and no table appeared. You will be shocked for sure.
STEPS:
1. First that you need to do is just add the additional simple layer of coding that Facebook applied in every Instant articles.
2. Just add the codes below.
<figure class="op-interactive">
<iframe>
Place your table code here...
</iframe>
</figure>
3. Save your work, and done!
How to Embed YouTube videos in Facebook Instant Articles
Here's how you can easily embed YouTube videos inside your articles in Facebook.
STEPS:
1. Assuming that the code below is your YouTube video embed source.
<iframe height="450" src="https://www.youtube.com/embed/5FHWN75XFuc" width="554"></iframe>
2. Just add <figure class="op-interactive"> and the closing tag of </figure> in your coding. See the sample code below.
<figure class="op-interactive"><iframe height="450" src="https://www.youtube.com/embed/5FHWN75XFuc" width="554"></iframe></figure>
3. Done!
Additional tutorial in how to connect your Blogger or Blogspot RSS feed in Facebook Instant Articles.
How to Connect Blogger or Blogspot RSS feed in Facebook Instant Articles
1. Go to Publishing Tools.
2. Under Instant Articles click Configuration.
3. Under Tools click Production RSS Feed.
4. In the RSS Feed URL type your blogspot RSS feed url. For example:
https://www.sharingthat.xyz/feeds/posts/default?alt=rss
Just replace sharingthat.xyz with your own blog domain name.
https://www.mejustsharing.blogspot.com/feeds/posts/default?alt=rss
Just replace mejustsharing.blogspot.com with your own blogspot url.
5. For the "Feed Requires HTTP Authentication" you can put or just leave the it.
6. Then press Save button to save your work.
7. Done!
If you can follow all the tutorials I created above, then you are now ready to connect your blogger to your Facebook page. This will allow to you to apply in Instant Article and when approved you can earn money out of your articles from Facebook.
If you have something to share or question regarding this tutorial, please do not hesitate to leave a comment below. Thanks!
0 Comments
Post a Comment