Facebook Instant Articles – Add Text, Embeds or Media

  • Resolved Artneo

    (@artneo)


    7 years, 3 months ago

    I sent my blog to Facebook Instant Articles. Now the process is stopped in a place I don’t know how to advance.

    Image of their request: https://imgur.com/a/4fz6v

    What they are asking:

    Please include all of the images found in the web article. Also, please make sure that the tag is not wrapped in <p> tags which will cause the image to not render correctly:
    https://developers.facebook.com/docs/instant-articles/reference/image

    <html lang="en" prefix="op: https://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://blog.youdivi.com/tutorials/link-animation-post/">
<meta property="op:markup_version" content="v1.0">
</head>
<body>
        <article><header><!-- Analytics code --><!-- title --><h1>Link animation in a post</h1>

				<!-- kicker -->
				<h3 class="op-kicker">
                   CSS                </h3>

                <!-- publication date/time -->
				<time class="op-published" datetime="2017-08-04T16:32:12+00:00">04/08/2017, 16:32</time><!-- modification date/time --><time class="op-modified" datetime="2017-08-12T11:32:06+00:00">12/08/2017, 11:32</time><!-- author(s) --><address>
                    <a>Andre</a>
                    Hey! I am focused on learning new CSS and JS tricks everyday to be a successful front-end developer someday.                </address>

				<!-- cover -->
				                    <figure><img src="https://blog.youdivi.com/wp-content/uploads/2017/08/Link-animation-in-a-post.jpg"></figure></header><!-- body --><p>Welcome back to another tutorial focused on the <strong>Extra theme</strong>. In this tutorial, you’ll learn how to <strong>add link animation in a post</strong>.?Some people like to have all their links in their projects with <em>text-decoration: underline</em>.</p>
<p>Some people rather not having any underline at all – just a different color to <em>highlight</em>.</p>
<p class="preview lev"><a href="https://goo.gl/GwdYut">Preview</a></p>
<p><strong>If you are like me</strong> and want a <strong>neat/fancy link animation</strong> in a post that when you hover over it starts a micro animation… You’re in the correct tutorial.</p>
<p>ˉ\_(ツ)_/ˉ</p>
<p><strong>First</strong>, one quick design tip:</p>
<blockquote>
<p>Never use underline in your text if it’s not meant to be a link. It confuses the user. Furthermore, it doesn’t add to the page design.</p>
</blockquote>
<p>One more thing!</p>
<p>I won’t show you in this tutorial how to change all website links because a lot of <em>Modules</em> use links that aren’t good with this underline animation. <strong>Let’s stick with only the links inside your posts</strong>, ok?</p>
<p>I learned this nice link effect browsing the internet for design ideas for <strong>link hovering effects</strong>.</p>
<p><strong>Then</strong>, I found <a href="https://bradsknutson.com/blog/css-sliding-underline/">this post</a> from the website <a href="https://bradsknutson.com/">bradsknutson.com</a> – and I really liked the example <strong>Underline – Slide In, Slide Off</strong>. You should visit the link and check out all the links animation available there.</p>
<p>This is right now the link animation that I use in <a href="https://blog.youdivi.com">YouDivi blog</a>. Hope you liked it!</p>
<p><strong>Without further ado</strong>, let’s start!</p>

				
			 <!-- .et_pb_text -->
				<h2>How to have a link animation in a post</h2>
			 <!-- .et_pb_code -->
			 <!-- .et_pb_column -->
			 <!-- .et_pb_row -->
				
			 <!-- .et_pb_section -->
				
				
				
					
				
				
				
				
				
				
				
				
				
					
<p>When you’re blogging there are <strong>2 ways</strong> to write the blog posts using <em>WordPress</em> with the <em>Extra</em> theme:</p>
<ul>
<li>Using the Divi builder Modules;</li>
<li>Using plain text, without triggering the Divi builder.</li>
</ul>
<p><strong>Next</strong>, I’ll show both <em>CSS</em> to make it look exactly like the demo in both situations.</p>
<h2>Using the Divi builder Modules</h2>
<p>Add the following CSS code inside <strong>Extra > Theme Options > Custom CSS</strong>.</p>
<pre>/* -- Links -- */
.et_pb_blurb_container p a, .et_pb_pagebuilder_layout .et_pb_text a {
 display: inline-block;
 position: relative;
}
.et_pb_blurb_container p a:before, .et_pb_pagebuilder_layout .et_pb_text a:before {
 content: '';
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 2px;
 width: 100%;
 transition: width 0s ease;
}
.et_pb_blurb_container p a:after, .et_pb_pagebuilder_layout .et_pb_text a:after {
 content: '';
 display: block;
 position: absolute;
 right: 0;
 bottom: 0;
 height: 2px;
 width: 100%;
 background: #5db8ff;
 transition: width .3s ease;
}
.et_pb_blurb_container p a:after:before, .et_pb_pagebuilder_layout .et_pb_text a:hover:before {
 width: 0%;
 background: #5db8ff;
 transition: width .3s ease;
}
.et_pb_blurb_container p a:hover:after, .et_pb_pagebuilder_layout .et_pb_text a:hover:after {
 width: 0%;
 background: transparent;
 transition: width 0s ease;
}</pre>
<blockquote>
<p>Remember to adjust the height and color properties to better suit your project design needs.</p>
</blockquote>
<p>If you are like me and rather writing your blog posts without <em>Divi builder</em>, check the next <em>CSS</em> code.</p>
<h2>Using plain text, without triggering the Divi builder.</h2>
<p>Add the following CSS code inside?<strong>Extra > Theme Options > Custom CSS</strong>.</p>
<pre>/* -- Links -- */
div.post-content.entry-content a {
 display: inline-block;
 position: relative;
}

div.post-content.entry-content a:before {
 content: '';
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 2px;
 width: 100%;
 transition: width 0s ease;
}

div.post-content.entry-content a:after {
 content: '';
 display: block;
 position: absolute;
 right: 0;
 bottom: 0;
 height: 2px;
 width: 100%;
 background: #5db8ff;
 transition: width .3s ease;
}

div.post-content.entry-content a:hover:before {
 width: 0%;
 background: #5db8ff;
 transition: width .3s ease;
}

div.post-content.entry-content a:hover:after {
 width: 0%;
 background: transparent;
 transition: width 0s ease;
}</pre>

				
			 <!-- .et_pb_text -->
				
				
				
					
<h2>Conclusion</h2>
<p>How did you like this tutorial about <strong>adding link animation in a post</strong>?</p>
<p><strong>If you liked it</strong>, there are plenty more styles for links to learn how to use. Leave a comment if you want more tutorials like this. <strong>Your feedback is always important to me</strong>.</p>
<p>See ya!</p>

				
			 <!-- .et_pb_text -->
			 <!-- .et_pb_column -->
			 <!-- .et_pb_row -->
				
			 <!-- .et_pb_section -->
            <footer></footer></article>
</body>
</html>

    Awesome plugin! Everything works so fine. I just can’t make Facebook Instant Articles work yet. But, I know it’s possible. Thanks a lot!

    The page I need help with: [log in to see the link]

Viewing 16 replies (of 16 total)
Viewing 16 replies (of 16 total)
  • The topic ‘Facebook Instant Articles – Add Text, Embeds or Media’ is closed to new replies.