164 lines
4.3 KiB
Markdown
164 lines
4.3 KiB
Markdown
# Federation widget
|
|
|
|
## About
|
|
|
|
This is a javascript widget that shows the public timeline of an account in the Federation (Diaspora, Friendica, Hubzilla) and Mastodon. Currently onlytested with Friendica.
|
|
|
|
This works for a user or a group. It is loosely based on the [ELI widget](https://github.com/blankoworld/eli) for GNU Social.
|
|
|
|
|
|
 
|
|
|
|
|
|
The server has to support [Cross-Origin Resource Sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). The .htaccess file in the server directory should include the following code for this:
|
|
|
|
```
|
|
Access-Control-Allow-Origin: *
|
|
Access-Control-Allow-Methods: GET
|
|
|
|
```
|
|
|
|
## License
|
|
|
|
This program is licensed under the [WTF Public License](http://sam.zoy.org/wtfpl/COPYING 'Read more about the WTF Public License').
|
|
|
|
## Installation
|
|
|
|
Just:
|
|
|
|
* copy the federation-widget.js in your website directory
|
|
* add this code in your page:
|
|
|
|
```html
|
|
<div id="federation-widget">
|
|
<p>Timeline activity...</p>
|
|
</div>
|
|
```
|
|
|
|
Then add this code **at the end of your page before the `</body>` tag**:
|
|
|
|
```html
|
|
<script type="text/javascript" src="./federation-widget.js">
|
|
var type = 'user'; // could be 'group' to follow a group
|
|
var user = 'nickname';
|
|
var max = 5;
|
|
var tag = 'federation-widget';
|
|
var domain = 'myGNUSocialDomain.tld';
|
|
var servertype='friendica'; // could be hubzilla, diaspora or mastodon
|
|
</script>
|
|
```
|
|
|
|
Adapt domain, user, and servertype content to your account in the Federation. For an example: **https://forum.friendi.ca**.
|
|
|
|
In order Federation widget to be more beautiful, add this in your CSS file or in **`</style>` tag**:
|
|
|
|
```css
|
|
|
|
#federation_widget {
|
|
font-size: 0.7em;
|
|
margin-top: 20px;
|
|
height: 350px;
|
|
width: 230px;
|
|
padding: 0;
|
|
border-radius: 5px;
|
|
background-color: #FcFcFc;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#federation_widget header {
|
|
padding-bottom: 8px;
|
|
text-align: left;
|
|
font-size: 1.5em;
|
|
border-bottom: 3px solid #EEEEEE;
|
|
background-color: #FcFcFc;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
|
|
#federation_widget header a {
|
|
text-decoration: none;
|
|
color:black
|
|
}
|
|
|
|
#federation_widget header img {
|
|
margin: 5px;
|
|
background-color: #ffffff;
|
|
border-radius: 5px;
|
|
float: left;
|
|
max-width: 50px;
|
|
}
|
|
|
|
#federation_widget header p {
|
|
margin: 0px;
|
|
line-height: 60px;
|
|
}
|
|
|
|
#federation_widget article {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
padding: 5px;
|
|
border-bottom: thin solid #eeeeee;
|
|
overflow: hidden; /* For too long link: hide but enable click on it */
|
|
}
|
|
|
|
#federation_widget article img {
|
|
margin: 5px;
|
|
max-width: 230px;
|
|
}
|
|
|
|
#federation_widget article p {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.groupmember img {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tooltip {position: relative;}
|
|
.tooltip span {display: none;}
|
|
.tooltip:hover span {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0; top: 10%;
|
|
margin: 20px 0 0;
|
|
width: 200px;
|
|
font-size: 0.7em;
|
|
color: #4D4D4C;
|
|
border: thin solid #eeeeee;
|
|
padding: 4px;
|
|
background: white;
|
|
}
|
|
|
|
|
|
```
|
|
|
|
An example is available on **minimal.html** page. You can also see a more complete version on **index.html** page.
|
|
|
|
## Configuration
|
|
|
|
You probably want to change these variables:
|
|
|
|
* type: Add here **user** OR **group** if you want to follow a user OR a group
|
|
* user: Add here the nickname of the user (or the group) you want to follow
|
|
* max: Add here the number of statuses you want to display. By default StatusNet seems to only give 20 statuses.
|
|
* tag: The name of the tag we should change to display all statuses. In the previous example, the div with ID equal to *content* would be changed. But you can add another ID.
|
|
* domain: The URL of your server Instance.
|
|
* servertype: type of server (friendica, hubzilla, diaspora, mastodon)
|
|
* posttime_label: Change the label name that appears when you have the time the entry was posted.
|
|
|
|
## Read code
|
|
|
|
**federation-widget.js** is a minimal version of Federation Widget. To have a more readable version, with more options, you can open **federation-widget.max.js** file.
|
|
|
|
### Howto minify federation-widget.max.js
|
|
|
|
* Go to http://javascript-minifier.com/
|
|
* Copy/paste the content of federation-widget.max.js
|
|
* Delete the license, the first lines ```var loadForm``` and the loadConfig() function
|
|
* Click on **Minify**
|
|
* Copy the result into eli.js file
|
|
|
|
## Contact
|
|
|
|
You can contact me at the given address: olivier+eli [AT] dossmann [DOT] net
|