Embed your latest Twitter tweets

Description

This is a solution for embedding your latest tweets in your wikidot site without using the feed module and with working hyperlinks in tweets. If you have ever tried to embed your Twitter RSS feed, you know why an alternate solution makes sense. You can customize this solution for your needs.

Code

[!--
[[code type="html"]]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<base target="_parent">
<title>Twitter</title>
<style type="text/css">
body {
  line-height: 140%;
}
ol, ul {
  list-style: none;
}
body {
  padding: 0;
  margin: 0;
  line-height: 140%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  background-color: white;
  color: black;
}
p {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 13px;
  color: #333333;
  margin: 10px 0 0 0;
}
ul, ol {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  padding: 0 0 0 0;
  margin: 10px 0 0 0;
  font-size: 13px;
  color: #333333;
  color: #333333;
}
ul {
  list-style-type: disc;
}
ul li, ol li {
  line-height: 140%;
  padding: 0 0 0 0;
  margin: 0 0 12px 18px;
  display: list-item;
  -webkit-padding-start: 0; 
  color: #333333;
}
a:link {
  color: #0044CC;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
a:visited {
  color: #000000;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
a:hover {
  color: #000000;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
a:active {
  color: #000000;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
li a:link {
  color: #808080;
  background-color: transparent;
  text-decoration: none;
  font-style: normal;
}
li a:visited {
  color: #808080;
  background-color: transparent;
  text-decoration: none;
  font-style: normal;
}
li a:hover {
  color: #808080;
  background-color: transparent;
  text-decoration: none;
  font-style: normal;
}
li a:active {
  color: #808080;
  background-color: transparent;
  text-decoration: none;
  font-style: normal;
}
li span a:link {
  color: #0044CC;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
li span a:visited {
  color: #000000;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
li span a:hover {
  color: #000000;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
li span a:active {
  color: #000000;
  background-color: transparent;
  text-decoration: underline;
  font-style: normal;
}
</style>
</head>
<body>
<div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/Wikidot" id="twitter-link" style="display:block;text-align:right;">more...</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Wikidot.json?callback=twitterCallback2&amp;count=10"></script>
</body>
</html>
[[/code]]
--]

[[iframe https://snippets.obscurative.ru/code:embed-your-latest-twitter-tweets/code/1 frameborder="0" scrolling="no" width="100%" height="400px"]]

In action

How to get it work on your page

First, decide where you want to place your latest tweets. For example, if your wiki uses a skin with sidbar, you can place this code in your nav:side page. It will be available on all pages then.

Copy the code above from this page into your page. In the iframe element, you have to change the source url into:
[[iframe http://YOURSITE.wikidot.com/YOUR-PAGE-NAME/code/1
where you have to replace YOURSITE and YOUR-PAGE-NAME. If there are other [[code]] elements in your page you may need to replace /code/1 by /code/2 or something else. You may also define your own iframe height= and height= values.

In the HTML code of the code block, you have to point to your twitter account. Replace this:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Wikidot.json?callback=twitterCallback2&count=10"></script>

by:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURTWITTERNAME.json?callback=twitterCallback2&count=10"></script>

By overwriting the number behind count= you can set the number of recent tweets to be displayed. Please note that the number of shown tweets will influence the vertical space needed. You have to customize this with the height= value of the iframe element.

In the code block, you can edit the section with CSS style definitions according to your needs. We have predefined styles for unordered lists, regular paragraphs and three sorts of links:
a:link, a:visited, a:hover and a:active matches the link "more…".
li a:link, li a:visited, li a:hover and li a:active matches the links at the end of tweets (2 hours ago and so on).
li span a:link, li span a:visited, li span a:hover and li span a:active matches the links within tweets.

You may also change other details like the charset definition in <meta…>. But please do not remove the <base target="_parent">. This is necessary to open links wihtin the tweet frame in the main browser window.
otherwise.

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

Rate this solution

If you think this solution is useful — rate it up!

Add a New Comment

Hide All Comments Unfold All Fold All

Fold

Tweet background color

CGand 16 Nov 2010 12:42

To improve readability when tweets are in a side bar, is there a way to get twitt with alternate background color? Thanks.

Twitt 1

Twitt 2

Twitt 3

Twitt 4

Reply Options

Unfold Tweet background color by

CGand, 16 Nov 2010 12:42

Fold

Re: Tweet background color

StefanM 16 Nov 2010 14:29

You can do that by adding some JavaScript.

1. before </head>, add this:

<script type="text/javascript">
function odd_even_list(list_id) {
   var o = document.getElementById(list_id);
   var li = 1;
   for(i = 0; i < o.childNodes.length; i++) {
      if(o.childNodes[i].nodeType == 1 && o.childNodes[i].nodeName == "LI") {
         o.childNodes[i].style.backgroundColor = "#FFFFFF"; 
         if(li % 2 == 0)
            o.childNodes[i].style.backgroundColor = "#DDDDFF";
         li += 1;
      }
   }
}
</script>

2. change the <body> start tag to this:

<body onload="odd_even_list('twitter_update_list');">

Hope it'll work for you!

best regards
Stefan

Reply Options

Unfold Re: Tweet background color by

StefanM, 16 Nov 2010 14:29

Fold

Re: Tweet background color

CGand 17 Nov 2010 00:29

Yes, thanks, it looks better, just little slower on load.

I've changed ul li, ol li margin: from 0 0 12px 18px; to 0 0 2px 18px;

I've also seen that set 18px to 0px hide the list bullet.

I think that working a little on CSS there should be a better result to get some padding from text and background.

P.S. Tip: To test changes, need to empty browser cache each time.

Last edited on 17 Nov 2010 00:30 by CGand Show more

Options

Unfold Re: Tweet background color by

CGand, 17 Nov 2010 00:29

Fold

Re: Tweet background color

StefanM 17 Nov 2010 05:55

Tip: To test changes, need to empty browser cache each time.

Or reload the embedded frame only (click right mouse button over the tweet list and choose the browser command to reload the frame from the context menu :)

best regards
Stefan

Reply Options

Unfold Re: Tweet background color by

StefanM, 17 Nov 2010 05:55

Fold

leiger 27 Jan 2010 22:36

Great work! Well done.

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

Reply Options

Unfold by

leiger, 27 Jan 2010 22:36

Fold

Done!

alixandre santana 30 Aug 2010 00:05

Tks, buddy!

Reply Options

Unfold Done! by

alixandre santana, 30 Aug 2010 00:05

Fold

jbnv 27 Jan 2010 09:53

How do I modify this solution to (a) format the results in a table instead of a bulleted list and (b) use this in an [[include]] tag rather than an iframe?

Jay Bienvenu | Hilinqwo: A constructed language

Reply Options

Unfold by

jbnv, 27 Jan 2010 09:53

Fold

StefanM 27 Jan 2010 10:29

You can't use include instead of iframe. The solution is based on the Wikidot feature which allows to execute the code of a [[code]] block. For security reasons this is only possible within an embedded frame window.

The ul list is generated by the JavaScript on Twitter which is called, so you can't change the HTML. The only thing you can do is trying to simulate a table by adding CSS format definitions like border and so on.

best regards
Stefan

Reply Options

Unfold by

StefanM, 27 Jan 2010 10:29

Fold

Thanks ! Well done!

Helmut_pdorf 23 Jul 2009 07:18

It is a good idea to use an independent solution..

Thanks again Stefan for the demonstration and documentation.

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Reply Options

Unfold Thanks ! Well done! by

Helmut_pdorf, 23 Jul 2009 07:18

microblogging tweets twtter

page revision: 3, last edited: 15 Feb 2012 00:50

Edit Rate (+5) Tags Discuss (9) History Files Print Site tools + Options

Wikidot Code Snippets

Snippets

Description

Code

In action

How to get it work on your page

Rate this solution