Embed your latest Twitter tweets

By StefanMStefanM

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 http://snippets.wikidot.com/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&amp;count=10"></script>

by:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURTWITTERNAME.json?callback=twitterCallback2&amp;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:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by StefanM


Rate this solution

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

rating: +5+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License