This is a javascript widget that shows the public timeline of an account in the Federation (Diaspora, Friendica, Hubzilla) and Mastodon. Currently only tested with Friendica. The Federation widget parses the Atom output of your account. It shows the timeline from the personal or forum account on your personal blog or website.
It makes most sense for static website generators like Pelican. You only have to include the Javascript file, the CSS part and a placeholder in your website template.
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:
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