By StefanM
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&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:
[[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!
To improve readability when tweets are in a side bar, is there a way to get twitt with alternate background color? Thanks.
You can do that by adding some JavaScript.
1. before </head>, add this:
2. change the <body> start tag to this:
Hope it'll work for you!
best regards
Stefan
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.
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
Great work! Well done.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Tks, buddy!
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
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
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 ?