Facebook Instant Articles coding

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.

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

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>

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>

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.

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>

Code template

Post a Comment

Post a Comment

About Us

Contact Form