Facebook Instant Articles — coding required
If you are using WordPress CMS, you would
get more easy configuration instant articles by using WordPress
Instant Articles Plugin. But in this tutorial, I am focusing on sharing the information
that helpful for all of you that are using Blogger Blog and need to get
approved to publish instant articles from Facebook for your instant articles
submission.
Go to your Facebook page and click on Publishing tools (top
right side)
Click on the Production Articles
Click on Create button
Copy below Simple Code then paste into the field and change everything which shown in highlight then press Save.
Click on the Production Articles
Click on Create button
Copy below Simple Code then paste into the field and change everything which shown in highlight then press Save.
Here is the simple code that you can of
the Production Instant Articles that you can use it for the primary one.
- Original Article URL
- Article Title
- Article Subtitle
- Article Author(s)
- Date & Time article was originally published
- Date & Time article was last updated
<html>
<head>
<link rel=”canonical” href=”Add Your Artices URL Here“>
<meta charset=”utf-8″>
<meta property=”op:generator” content=”facebook-instant-articles-sdk-php”>
<meta property=”op:generator:version” content=”1.1.0″>
<head>
<link rel=”canonical” href=”Add Your Artices URL Here“>
<meta charset=”utf-8″>
<meta property=”op:generator” content=”facebook-instant-articles-sdk-php”>
<meta property=”op:generator:version” content=”1.1.0″>
<meta property=”op:generator:application” content=”facebook-instant-articles-wp”>
<meta property=”op:generator:application:version” content=”2.11″>
<meta property=”op:generator:transformer” content=”facebook-instant-articles-sdk-php”>
<meta property=”op:generator:transformer:version” content=”1.1.0″>
<meta property=”op:markup_version” content=”v1.0″>
<meta property=”fb:article_style” content=”default”>
</head>
<body>
<article>
<header>
<h1>Article Title Here</h1>
<time class=”op-published” datetime=”2016-01-26T16:59:55+00:00“>January 26th, 4:59pm</time>
<time class=”op-modified” datetime=”2016-01-26T03:33:47+00:00“>January 26th, 3:33am</time>
<address><a>Author Name Here</a></address>
</header>
<h2>Sub Titile Here</h2>
<p>Full Paragraph Here 1</p>
<p>Full Paragraph Here 2</p>
<p>Full Paragraph Here 2</p>
<b>Bold Text or Head of Article</b>
<footer>
</footer>
</article>
</body>
</html>
Basic Blockquote
Add blockquote to your instant article by
using the <blockquote> element within the body of your articles.
<blockquote>
Create a blockquote is available here
</blockquote>
Create a blockquote is available here
</blockquote>
The Simple List Code
If you would like to add an unordered list
in your instant article, please use the <ul> element to wrap the items in the list, that each
designated with the <li> tag.
<ul>
<li>Aproval</li>
<li>Instant</li>
<li>Articles</li>
</ul>
<li>Aproval</li>
<li>Instant</li>
<li>Articles</li>
</ul>
Basic Image In the articles
In case you would like to add the image in
your articles, use this simple presentation of the image within an Instant
Articles is to wrap an <img> tag with a <figure> element and have the src attribute points
to the URL course of the image.
<figure>
<img src=”https://blogsupporter.com/folder/img.jpg” />
</figure>
<img src=”https://blogsupporter.com/folder/img.jpg” />
</figure>
Once you have done the above instruction,
you will need to wait for 3 to 5 days to get checking and approved publish
Instant Articles from the Facebook team.
Code template
<!doctype html> | |
<html lang="en" prefix="op: http://media.facebook.com/op#"> | |
<head> | |
<meta charset="utf-8"> | |
<!-- URL of the web version of this article --> | |
<!-- TODO: Change the domain to match the domain of your website --> | |
<link rel="canonical" href="http://example.com/article.html"> | |
<meta property="op:markup_version" content="v1.0"> | |
</head> | |
<body> | |
<article> | |
<header> | |
<!-- The title and subtitle shown in your Instant Article --> | |
<h1>Article Title</h1> | |
<h2>Article Subtitle</h2> | |
<!-- The date and time when your article was originally published --> | |
<time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time> | |
<!-- The date and time when your article was last updated --> | |
<time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time> | |
<!-- The authors of your article --> | |
<address> | |
<a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a> | |
Brandon is a avid zombie hunter. | |
</address> | |
<address> | |
<a>TR Vishwanath</a> | |
Vish is a scholar and a gentleman. | |
</address> | |
<!-- The cover image shown inside your article --> | |
<!-- TODO: Change the URL to a live image from your website --> | |
<figure> | |
<img src="http://mydomain.com/path/to/img.jpg" /> | |
<figcaption>This image is amazing</figcaption> | |
</figure> | |
<!-- A kicker for your article --> | |
<h3 class="op-kicker"> | |
This is a kicker | |
</h3> | |
</header> | |
<!-- Article body goes here --> | |
<!-- Body text for your article --> | |
<p> Article content </p> | |
<!-- A video within your article --> | |
<!-- TODO: Change the URL to a live video from your website --> | |
<figure> | |
<video> | |
<source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" /> | |
</video> | |
</figure> | |
<!-- An ad within your article --> | |
<!-- TODO: Change the URL to a live ad from your website --> | |
<figure class="op-ad"> | |
<iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe> | |
</figure> | |
<!-- Analytics code for your article --> | |
<figure class="op-tracker"> | |
<iframe src="" hidden></iframe> | |
</figure> | |
<footer> | |
<!-- Credits for your article --> | |
<aside>Acknowledgements</aside> | |
<!-- Copyright details for your article --> | |
<small>Legal notes</small> | |
</footer> | |
</article> | |
</body> | |
</html> |
إرسال تعليق