Friday 2 November 2012

Embedding Tweets in IP.Board 3.3.4

If you wish to include a tweet in your posts you will find it isn't as simple as following Twitter's instructions at https://support.twit...ebsite-or-blog#

Including tweets in a post is a 3-step process:

1. Edit your globalTemplate.

Scroll down to the bottom and right above the </body> tag add the following line:

<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

2. Edit your ipb_styles.css.

The default .post_body .post class looks like this:

.post_body .post { color: #282828; }

You want to edit it this way:

.post_body .post {
     color: #282828;
     overflow-y: hidden;
}

3. Now create a new BBCode.

Example code:

https://twitter.com/qikipedia/status/263009977877278720

Custom Tag:

Tweet

Custom BBCode Replacement:

<blockquote class="twitter-tweet"><p>Javascript is not enabled OR refresh the page to view</p><a href="{content}">Click here to view the Tweet</a></blockquote>

Optionally you can point the BBCode Image setting to a 16x16 twitter.png image in your public/style_extra/bbcode_icons folder.

This works for me and I haven't found any problems resulting from these edits, however all edits are at your own risk.

4 comments:

  1. Thanks for the instructions. I found a bug with it. The link to "Click here to view the Tweet" is not working, show up as:

    http://boardurl.com/%3Ca%20href='https://twitter.com/username/status/317611389965449992'%20class='bbc_url'%20title='External%20link'%20rel='nofollow%20external'%3Ehttps://twitter.com/...611389965449992%3C/a%3E

    ReplyDelete
    Replies
    1. Yeah, this probably doesn't work now. It stopped working after IP.Board 3.3.4 anyway but even if you still have a 3.3.4 board installed (and why would you?) the twitter code and widget.js have likely been changed.

      Sort of makes this blog post redundant in a way but it serves as a reminder that, at least for a short while, it was possible :)

      Delete
  2. I didn't upgrade because a lot of important modifications haven't been updated for 3.4. Well, the widget.js should be the latest as it's linked to the twitter site. Which twitter code are you referring to? I don't see it in the instructions. I think the broken link has something to do with IPB instead of Twitter.

    ReplyDelete
  3. Have you read the IPS thread? http://community.invisionpower.com/topic/372010-how-do-you-embed-a-tweet-on-ipb/

    The link I originally posted to Twitter's help file is still active:
    https://support.twitter.com/articles/20169559-how-to-embed-a-tweet-on-your-website-or-blog#

    However, Twitter now use a different method (or at least a different help file) which is at:
    https://dev.twitter.com/docs/embedded-tweets

    I think I may need to revisit this stuff as I'd given up on it ever working correctly again.

    ReplyDelete