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 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. This works for a user or a group. It is loosely based on the ELI widget for GNU Social.

The server has to support Cross-Origin Resource Sharing. The .htaccess file in the server directory should include the following code for this:

    Header add Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Methods: "GET"
   

License

This program is licensed under the WTF Public License.

Installation

Just:

• copy the federation-widget.js in your website directory
• add this code in your page:

    <div id="federation-widget">
      <p>Timeline activity...</p>
    </div>

Then add this code at the end of your page before the </body> tag:

    <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 = 'myFederationDomain.tld';
      var servertype='friendica'; // could be hubzilla, diaspora or mastodon
    </script>

Adapt domain, user, and servertype content to your account in the Federation.

In order Federation widget to be more beautiful, add this in your CSS file or in </style> tag:

#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 federation-widget.js file