Facebook Instant Articles – Add Text, Embeds or Media
-
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: http://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: http://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="http://bradsknutson.com/blog/css-sliding-underline/">this post</a> from the website <a href="http://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]
- The topic ‘Facebook Instant Articles – Add Text, Embeds or Media’ is closed to new replies.
