A Topiqs link collection can be displayed in 4 different Views. If you have edit access to a Topiqs, you can display one or more Views of that link collection on your own website :
Imagine you have a blog and in a blog post you want to compare different say vacuum cleaners. To maximize exposure, functionality and Page Rank you first make a Topiqs called "10 best vacuum cleanes" and then through the Topiqs Javascript API display selected Views of these vacuum cleaners on your own blog enjoying all the functionality built in to a Topiqs View as well as backlink back & forth.
To display your own Topiqs on your own webpage(s) there are 3 easy steps to go through:
Step-by-step how to show one of your own Topiqs on your own website :
<script src="http://dev.topiqs.online/scripts/views.js"></script>
<script>Topiqs.Views.write({ topiqId: TopiqId });</script>
<script> Topiqs.Views.write({ topiqId: TopiqId, Spinner: { show: true, size: 24 }, BackLink: { show: true, text: "", title: "See this on Topiqs" }, Comments: { show: true, showProfileInfo: true, activeProfileInfo: true, startOpen: false, active: false }, Views: { initialView: 'ListView', ListView: { show: true, overflow: "hidden" }, PageSlide: { show: true }, TableView: { show: true }, ImageView: { show: true } }, Events: { viewsWritten: null, commentsWritten: null } }); </script>
TopiqIdhave the correct value. If you copy the Configuration script from the "Copy API Scripts" dialog, the correct
TopiqIdvalue will already have been inserted into the script.
TopiqIdfrom your browsers url field.
Congratulation - You are now setup to enjoy increased exposure, functionality & Page Rank on your own webpages through interaction with your content on Topiqs.
Property | Mandatory | Default value | Description |
---|---|---|---|
topiqId | Yes | null | Id of the Topiqs that you want to display - this is the ONLY mandatory property. |
Spinner { | No | ||
show | No | true (boolean) | Whether to show an animated spinner while Topiqs data are loading. |
size | No | 24 (integer) | The size (in pixels) of the spinner image. |
} | |||
BackLink { | No | ||
show | No | true (boolean) | Whether to show a backlink back to your Topiqs on topiqs.online. |
text | No | "" (string) | Here you can write an achor text to the backlink. If the anchor text starts with http, the anchor text will be assumed to be an image source. If left empty (default), the Topiqs logo will be displayed. |
title | No | 'See this on Topiqs' (string) | The link title. If set to empty string, there will be no title on the link. |
} | |||
Comments { | |||
show | No | true (boolean) | Whether to include comments related to this Topiqs. |
showProfileInfo | No | true (boolean) | Whether mouseover on profile pictures in the comments should get and display their Topiqs stats. |
activeProfileInfo | No | true (boolean) | Whether profile pictures can be clicked on (this will link back to that profile on topiqs.online). |
startOpen | No | false (boolean) | Whether included comments should display immediately or must be toggled by the user before the comments show. |
active | No | false (boolean) | NOT YET IMPLEMENTED. Whether it is possible for Users on the external website to comment. |
} | |||
Views { | No | ||
initialView | No | 'ListView' (string) | If displaying more than one View, the User can tab through the displayed Views. This property specifies which View is default open. You should probably never set PageSlide to be default open. |
ListView { | No | ||
show | No | true (boolean) | Whether to display ListView or not. |
overflow | No | "hidden" (string) | "hidden" | "show". Whether to truncate the name of a url if there is not enough horizontal space ("hidden") or to let the name of the url span several lines ("show"). |
} | |||
PageSlide { | No | ||
show | No | true (boolean) | Whether to display PageSlide or not. |
} | |||
TableView { | No | NOT YET IMPLEMENTED. | |
show | No | true (boolean) | Whether to display TableView or not. |
} | |||
ImageView { | No | ||
show | No | true (boolean) | Whether to display ImageView or not. |
} | |||
} | |||
Events { | No | ||
viewsWritten | No | null (function) | This event will be raised then the Views are finished writing. |
commentsWritten | No | null (function) | NOT YET IMPLEMENTED. This event will be raised then the Comments are finished writing the first time. |
} | |||
Resources { | No | NOT IN DEFAULT SCRIPT. Topiqs will push some 3.party resources (eg. Bootstrap) to the browser in order to help display the Topiqs Views. The Topiqs Views script will try to test if these resources are already loaded and if they are not then insert them into the browser. However, the Resources configuration allows you to manually overwrite the default behaviour. | |
FontAwesome | No | 'auto' (string) | 'auto' : let the Topiqs Views script find out whether to insert a reference to FontAwesome. 'yes' : Topiqs MUST insert a reference to FontAwesome. 'no' : Topiqs must NOT insert a reference to FontAwesome. |
jQueryScript | No | 'auto' (string) | 'auto' | 'yes' | 'no' |
PopperScript | No | 'auto' (string) | 'auto' | 'yes' | 'no' |
BootstrapScript | No | 'auto' (string) | 'auto' | 'yes' | 'no' |
BootstrapCss | No | 'auto' (string) | 'auto' | 'yes' | 'no' |
} | |||
cacheControl | No | 1 (integer) | NOT IN DEFAULT SCRIPT. Incrementing the cacheControl value will force browsers to reload Topiqs resources (scripts, css & images) instead of loading resources from the browser cache. If you want to be certain that users will always get the newest version of Topiqs scripts, css & images, you can set cacheControl to current date like cacheControl: "" + (new Date()).getFullYear() + ((new Date()).getMonth() + 1) + (new Date()).getDate(), |
parentElementId | No | null | NOT IN DEFAULT SCRIPT. This property makes it possible to position the Configuration script anywhere, eg. in the <head> section and then use this property to point to the element there you want to display the Topiqs Views. |
scriptId | No | null | NOT IN DEFAULT SCRIPT and probably rarely useful, however if you don't use the parentElementId property and target browsers are not able to locate the Configuration script location, you can use this property to identify the Configuration script tag (must add a matching id-attribute to the Configuration script tag as well). |