Documentation

Please email us at [email protected] if you have any questions.

Basics

Taeggie Feed bundles multiple social media properties (accounts, hashtags) into a single feed that can be placed on any html page.

Support explain
Taeggie combines content from different social media platforms to a single feed.

For example, taeggie +BitcoinBuzz might contain a bunch of hash tags related to bitcoins. In a similar way, taeggie +IndieMusic could contain a bunch of social media properties related to indie music.

Installation

This section describes three alternative ways to integrate the feed to your website or application: standard install, iframe install and direct API access.

Standard install

This is the recommended way to install Taeggie Feed.

You need jQuery version 1.4.4 or greater installed on your web page to use the snippet.

Copy following code to your web page's HTML code, replacing the two occurences of placeholder text YOUR_TAEGGIES_NAME with the name of your feed.

The Taeggie Feed will be rendered as a DIV element created wherever you placed the script so that you can freely control the placement of the widget.

Iframe install

This installation method allows you to separate the Taeggie Feed from rest of the web page by using an iframe. The drawback is that the feed is contained in an iframe and cannot freely adjust its size.

Copy following code to your web page's HTML code, replacing YOUR_TAEGGIES_NAME with the name of your feed.

In this method, a jQuery is automatically included within the IFRAME contents, so you do not need it on your website.

Direct API access

If you'd like to skipe the javascript widget and directly use the JSON-formatted data of the feed, contact us via email and we'll help you out.

Customizing feed

The feed can be customized by using the feed settings and with CSS code.

Feed settings

You can choose the theme for your feed by editing the feed settings.

Additional settings for colors and such are also available.

CSS code

Appearance and layout of the widget can be customized with CSS rules.

These rules can either be included on your web page or pasted into feed settings.

Step 1: Find your element's id

As a starting point of the customization, you should determine the id of the HTML element of your widget.

The id property is based on the name of your taeggie. The name of the taeggie is prepended by 'taeggie-feed-widget-' when the widget is created.

For example, the element's id is taeggie-feed-widget-FKATwigs for a taeggie with name FKATWigs

You can make some simple customizations with the id property alone by adding CSS rules to your page. For example, a green border around the widget:

Step 2: Customize elements

The following explains list of the elements that can be customized in the widget. You can also use web inspector tools to better understand the HTML structure of the widget.

Class Description
header The topmost header containing + sign and the name of the taeggie.
posts The div containing a list of posts. Configure the height property to adjust the height of the widget.
post The div containing a single post.
author-image The div containing a the author img element as it's only child.
author Div containing post author's screen name and social network.
screen-name Div containing post author's screen name.
social-network Div containing post's originating social network.
posted-at Div containing the information of when post was posted.
image The photo/image posted.
text The text body of the post, if any.

Make sure you prepend CSS rule class names with the id element of the widget. Thus you can override the default styles of the widget. Here's a set of sample CSS rules:

And here is the result:

Troubleshooting

First tip for troubleshooting the widget is to compare it to the sample widget running at the address https://taeggie.com/t/NAME (please replace NAME portion of the URL with your preferred Taeggie's name).

If the sample widget is failing, the problem is definitely at Taeggie's end. However, if the sample widget seems to be working fine while your install fails, situation is more complex.

Using web inspector and browser console log is a good place to look for clues.

Questions? Feedback? Problems?

Please email us at [email protected] and we'll sort you out.

X