Article Widgets for publishers

Transcription

1 JavaScript integration guide Article Widgets for publishers

2 2 / 6 The use of plista Article Widgets for publishers is based on the integration of a small piece of JavaScript into the HTML code of your website. This document will guide you through the neccessary steps of the setup. Our script mainly consists of two different function calls: 1. PLISTA.items.push({... }) This function is used to send article data to plista. In the following, you will learn how to correctly fill in the data that is to be sent. Usually a dynamic scripting language, such as PHP, is used to achieve this. Content Management Systems often provide the neccessary variables, too. Please continue to the next page for more information. 2. PLISTA.partner.init() The second function initializes and displays the Article Widget. Depending on whether the list of recommendations is to be placed below an article on a detail page or on an overview page (e.g. your startpage or category landing page), it is neccessay to include the corresponding DIV-containers in the code thus ensuring that the right widget design will be returned.

3 3 / 6 Integration tips <div id="plista_widget_standard_1"></div> <div id="plista_widget_belowarticle"></div> <script type="text/javascript" src=" <script type="text/javascript"> /* <![CDATA[ */ PLISTA.items.push({ objectid: "f0ad8173", title: "Neuigkeit des Tages", text: "Dies ist der Beginn des Artikeltextes...", url: " img: " category: "news", created_at: " " }); PLISTA.partner.init(); /* ]]> */ </script> "Recommendations, please!" The PLISTA.parter.init()-call causes the recommendations to be displayed. Please note that the plista script needs to be placed after the "plista_widget_standard_1" -respectively the "plista_widget_belowarticle" -DIV container in your HTML code (see our example on the left). Depending on whether you are integrating the script on a start-, overviewor detail page (e.g. article page), you only need to include one of the DIV containers within your HTML code unless you intend to display more than one widget at a time. Calling plista! PLISTA.items.push({...}) is used on article pages to send data to plista. On pages that are not devoted to a single article, this call does not need to be included. Handing over an article s "meta data": In order to send an article s data to plista, fill in ist different parameters here, such as $title or $text (please refer to the exmple code on the left). In most cases, the completed section of the code will look similar to this: objectid: "<?php echo $article_id;?>", title: "<?php echo $title;?>", text: "<?php echo $article_text;?>", url: "<?php echo $article_url;?>", img: "<?php echo $article_image_url;?>", category: "<?php echo $article_category;?>", created_at: "<?php echo $article_created_at;?>" Please note the hints on the following page!

4 4 / 6 Overview of the different data fields What data needs to be sent to plista, using the different JavaScript fields? objectid title text url img category The object-id should be an alphanumeric code (a-z 0-9), furthermore it has to be unique for every recommendation, since plista is using it for the distinction of different recommendations. If your website is using a database, it is probably the easiest way to use the database ID of your articles. Alternatively, you can use any other unique combination of characters. Maximum length: 128 characters Use this field to send plista the title of your article (please note: an article can also be a product, if your website is an online shop or any other kind of catalogue)! If your text contains double-quotes, you have to escape them by preceding them with a backslash: \ instead of. Guaranteed 60 signs - max Any special characters that your test might contain should be sent in clear format, instead of HTML entities. Again, if your text contains double-quotes, you have to escape them by preceding them with a backslash: \ instead of. Please note that this piece of text is meant to be an introduction only and might be cut and succeded by a trailing..., depending on the given widget that is displaying your recommendation. Maximum length: 255 characters (up to 100 characters are guaranteed to be displayed). Please send the URL of your article using this field. The URL must include your domain name and start with the protocol, e.g. Maximum length: 255 characters. If your articles have an image and/or you would like to add an image to your plista recommendation as well, you can fill in the image URL here. The thumbnails should be cubic and no larger than 150x150 pixels, unless you are using larger thumbnails on your site already. You can leave out this line if you do not intend to add images to your recommendations. The category of current article: If there is no category, leave it empty please. created_at Please make sure, that you transfer the creation date of the article as a unix timestamp, so that we can consider the creation date for our recommendations. The above mentioned fields are the most important ones. As we create individual JavaScripts for each of our partners to integrate plista as tight into each website as possible, the list of fields in your exact copy of our script might vary.

5 5 / 6 FAQ What do I need to look at while editing the JavaScript? Since the fields within our script are an enumeration, it is important to omit the comma at the end of the last line, i.e. before the closing brackets if the PLISTA.items.push() call. In case any of the texts you send to plista is containing double quotes, they need to be preceded by a blackslash, i.e. they need to be escaped: \ instead of Please avoid linebreaks in the texts you send to plista. For a php-based CMS use json_encode to fill in the variables into the push-method: echo json_encode(array( 'objectid' => $article_id, 'title' => $title, 'text' => $article_text, 'url' => $article_url, 'img' => $article_image_url, 'category' => $article_category, 'created_at' => $article_created_at )); Thereby possible mistakes will be avoided. How can I remove an article from plista's database? Removing an article from the plista database can easily be achieved through a simple HTTP-request. Please contact us for further information on this. Refer to the end of this document for contact information. Where do I find usage statistics for my plista integration? Usage statistics can be found at In case you have any further questions, please contact us. Where can I find additional information on HTML and JavaScript? Die Webseite SelfHTML bietet ein kostenfreies und umfangreiches Kompendium zu den Themen HTML und JavaScript, aber auch CSS:

6 6 / 6 How Article Widgets look like? Example-Widget This may also interest you Movie Highlights of the Month Spectacular 3D blockbusters, romantic comedies, gripping documentaries. Here are this month s movie highlights. Birthday gifts: 10 of the best presents Birthdays are truly special days and most celebrate them with gifts. But the tricky part is what to give. This list will help. Description of key elements Try Now: New Ideas for Your Cooking Skills Enjoy every day new ideas for great dishes. Request our ecookbook now! ADVERTISMENT Image (optional) Background (highlighted lightly) Link (open in new window) "Advertisement" incl. Icon Better Than Their Reputation Off the beaten track, we recommend you 15 stunning but underrated travel destinations for your next holiday.