Forum

Thread tagged as: Question, Blog

Embedding Twitter into a Blog Post

Hello,

I'm trying to embed a tweet into a blog post i was writing (example of how i am trying to do this here: https://dev.twitter.com/web/embedded-tweets) but when i add the necessary jquery and paste the code in it doesn't render as it should. Any idea why this isn't working? I thought it was because my version of perch was too old but it's still not working.

Nathaniel Nwosu

Nathaniel Nwosu 0 points

  • 6 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

You would need to give us more information if you would like help.

What code are you pasting in, and to where?

Also we need your template and Diagnostics Report (as requested when you created the thread).

Hello,

Sorry for the delay, i didn't have email notificatiosn turned on. This is a copy of the code:

Embed code from Twitter:

<blockquote class="twitter-tweet" lang="en-gb"><p lang="en" dir="ltr">Look out for ISISMag Issue 4 Coming Soon <a href="https://twitter.com/hashtag/naturalhair?src=hash">#naturalhair</a> <a href="https://twitter.com/hashtag/beauty?src=hash">#beauty</a> <a href="https://twitter.com/hashtag/isismag?src=hash">#isismag</a> <a href="https://t.co/JeiMzRpIk9">pic.twitter.com/JeiMzRpIk9</a></p>&mdash; ISIS Mag (@ISISMag) <a href="https://twitter.com/ISISMag/status/597314797152141312">May 10, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

I am pasting this into my blog post textarea through the blogging app.

Diagnostic Report:

    Perch: 2.8.6, PHP: 5.4.37, MySQL: mysqlnd 5.0.10 - 20111026 - $Id: c85105d7c6f7d70d609bb4c000257868a40840ab $, with PDO
    Server OS: Linux, cgi-fcgi
    Installed apps: content (2.8.6), assets (2.8.6), categories (2.8.6), perch_blog (3.8.1)
    App runtimes: <?php include(PERCH_PATH.'/core/apps/content/runtime.php'); include(PERCH_PATH.'/addons/apps/perch_blog/runtime.php'); ?>
    PERCH_LOGINPATH: /perch
    PERCH_PATH: /home/isismag/public_html/perch
    PERCH_CORE: /home/isismag/public_html/perch/core
    PERCH_RESFILEPATH: /home/isismag/public_html/perch/resources
    Image manipulation: GD Imagick
    PHP limits: Max upload 32M, Max POST 48M, Memory: 64M, Total max file upload: 32M
    Resource folder writeable: Yes
    SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
    REQUEST_URI: /perch/core/settings/diagnostics/
    DOCUMENT_ROOT: /home/isismag/public_html
    HTTP_HOST: isismag.com

and would you like the code in my template or the name of it? Sorry, i'm a bit unsure of what you're asking me for.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

The code of the template you are using and an explanation of what is happening when you paste this in.

Hello Rachel,

Here's my template code from post.html:

<div class="hentry">
    <h1><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" type="text" required="true" size="xl" /></a></h1>
    <p class="entry-published date"><perch:blog id="postDateTime" format="%d %B %Y" /> 
        <perch:if exists="authorGivenName">by <perch:blog id="authorGivenName" /> <perch:blog id="authorFamilyName" /></perch:if>
    </p>
    <perch:if exists="image">
        <div><img src="<perch:blog id="image" type="image" width="320" height="240" crop="true" label="Image" />" alt="<perch:blog id="postTitle" />" /></div>
    </perch:if>
    <div class="description entry-content">
        <perch:blog id="postDescHTML" type="textarea" encode="false" editor="markitup" textile="true" size="xxl" required="true" />
    </div>
</div>

<perch:blog id="excerpt" type="textarea" label="Excerpt" textile="true" order="1" suppress="true" size="s" />
<perch:blog id="image" type="image" width="50" height="50" crop="true" suppress="true" />
<perch:blog id="image" type="image" width="320" height="240" crop="true" suppress="true" />

when i paste the code in it renders as a blockquote but doesn't pull in the rest of the tweet for example, the image, the tweet text, twitter's styles etc.

Drew McLellan

Drew McLellan 2638 points
Perch Support

You're using Textile formatting on the post field, so you'll not be able to paste HTML in directly. It will get encoded.

Oh, is that still the case if I paste it into the Source Code area provided?

Rachel Andrew

Rachel Andrew 394 points
Perch Support

If you want to post in HTML you need to set html to be true on your field.

Ah, a frequent problem I've had with adding "html=true" is that i'd like to be able to add spaces between lines in my blog post via the editor and when i add the above it doesn't work. Is there some sort of perfect template line that will enable me to have things like the Twitter plugins to work but to be able to add spaces between my copy as and when?

Would the below be correct?

<perch:blog id="postDescHTML" type="textarea" html="true" encode="false" editor="markitup" textile="true" size="xxl" required="true" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

By spaces, do you mean empty paragraphs? Or something else? What HTML are you trying to produce?

Yes, sorry empty spaces; the equivalent of a html <br> tag.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I think something like CKEditor might let you do that.

Ahhh, brilliant - thank you very much. So if i,

  1. Install CKEditor
  2. Set textile as true
  3. Updated my blog app (since updating perch and not the blog app i can't post blogs)

I should be able to successfully embed tweets into my blog posts?

Drew McLellan

Drew McLellan 2638 points
Perch Support

You can't use Textile with CKEditor - remove the textile="true" attribute and use html="true" instead.

Ahh, thank you very much, i'll try this and see how i get on. In the meantime I'll mark this as a solution.