Twitter Integration

Last modified on 2022/05/28 10:50

About this integration

SAS_IntegrationNotRESTIntroduction

You can integrate third-party systems with Service Apps in many ways. The method you select will depend on business requirements, architectural and security constraints as well as the characteristics specific to each third-party application or service. You can use the REST, CSV, Online CSV data sources and the HTML Script widget.

This document describes a standard integration process that has already been implemented in a customer context.

To find out more about this integration, please do not hesitate to contact your EasyVista contact, or your service provider and integrator.

Integration Summary

Twitter is a microblogging tool managed by Twitter Inc. It enables users to send and read short messages, known as tweets, free of charge online, by instant messaging or by SMS. These messages are currently limited to 140 characters.
         Open url.png See the Twitter Glossary.

This easy-to-implement integration enables you to embed a Twitter timeline, also known as a collection of tweets directly in an Product name - ev sas.png app. You can do this by inserting the HTML code of the Twitter widget from Twitter Inc. in a HTML Script widget (integration process 1). You can also do this by inserting the Twitter Widget ID in an Product name - ev sas.png Twitter widget (integration process 2).

The Twitter Inc. widget is used to embed:

  • Four different timelines, all of which look and feel like timelines on twitter.com: User Timeline (only user public tweets), Favorites, List Timeline, Search Timeline
  • Single tweets, e.g. @EasyVista tweet 
  • Profiles, e.g. EasyVista profile 
  • Handles, e.g. @easyvista
  • Hashtags, e.g. #ServiceApps
     
Integration Data Feed (direction) Authentication Type Integration Connector Options

Product name - ev sas - big.png

Up arrow.png

Logo - Twitter.png

N/A

Html Script widget   Apps - Widget - Html icon.png

Twitter widget   Apps - Widget - Twitter icon.png

SaaS Version of Third-Party Product

On-premise Version of Third-Party Product

Check icon.png

Not check icon.png

Step-by-step integration process

The two integration processes are quite similar. To help you decide which to use:

  • Integration process 1, via the HTML Script widget:
    • Is used to embed more and different Twitter objects.
    • Is used to define the height/width of Twitter Inc. widgets for certain objects such as profiles, public lists, favorites, handles, using the Twitter Inc. widget configuration wizard. You can modify this subsequently in the Design pane of the Product name - ev sas.png graphic editor.
    • Does not require you to know the Twitter Widget ID.
  • Integration process 2, via the Product name - ev sas.png Twitter widget:
    • Is used mainly to embed Search Timelines from Twitter Inc. widgets, e.g. #EasyVista or @EasyVista.
    • Cannot be used to define the height/width of Twitter Inc. widgets.
    • Requires you to know the Twitter Widget ID.

Process 1: How to embed a Twitter timeline via a HTML Script widget

     Open url.png  See the Twitter Help Center: How to embed a timeline.
    Open url.png  See the Twitter Glossary.

Twitter Inc. provides timeline widgets. You can use a Plug & Play configuration wizard to embed a tweet or a collection of tweets in your Product name - ev sas.png apps. Using this method, you can embed a Twitter timeline in Product name - ev sas.png in three easy steps:


Step 1: Check the list of requirements.

Before you can embed Twitter timelines, you must have a Twitter account with the relevant login and password.


Step 2: Select a Twitter timeline and retrieve the HTML code of the corresponding Twitter Inc. widget.

Follow steps 1 to 5 in the article called How to embed a timeline available on the Twitter Help Center.


Step 3: Embed the HTML code of the Twitter Inc. widget in an Product name - ev sas.png app to display the timeline.

1. Go to Product name - ev sas.png and open the app you want.

2. Display the Twitter timeline as described in step 2 using a HTML Script widget:

  • Click Apps - Add widget icon.png in the Objects pane. Open the Basic category and click and drag the HTML Script widget to the Design pane.
  • Rename the widget so you can easily identify it.
  • Paste the HTML code obtained in step 2 in the HTML Code field.
  • If required, add a header in Theme > Header.
  • Adjust the height and width of the widget in the Design pane.

3. Click EVApps - GUI - Execute icon.png to switch to preview mode and check the visual layout of the Twitter timeline and that it is working correctly.

Process 2: How to embed a Twitter timeline via an Product name - ev sas - big.png Twitter widget

          Open url.png See the Product name - ev sas.png Twitter widget.

1. Retrieve the Twitter Widget ID from the Twitter timeline you want.

Best Practice icon.png  To obtain the Twitter Widget ID of a tweet quickly, you can click anywhere on it (except for the tags). The URL will appear in the URL bar of your Web browser. You can then copy the ID found at the end of the URL.

Example documentation icon EN.png    @EasyVista account tweet URL Twitter Widget ID
https://twitter.com/EasyVista/status/775322164258017280 775322164258017280

2. Embed the Twitter widget ID ID in the Twitter widget.

Note: In the current Twitter 2016 interface, only the selection of a Search widget will enable you to use the wizard to create and save Twitter Inc. widgets in the list of widgets.

          Processus2 - Widgets list.png   Processus2 - Widgets creation wizard.png

Use case

You want to embed a single tweet from a timeline in an Product name - ev sas.png app and allow users to follow the associated Twitter account using the Follow button. This is an illustration of integration process 1 via a HTML Script widget.

1. Open the Twitter Inc. widget configuration wizard. Open url.png  See the procedure in the article called How to embed a timeline available on the Twitter Help Center.

    Next:

  • Enter the URL of the tweet in the relevant field (1).

Best Practice icon.png  To obtain the URL of a tweet quickly, you can click anywhere on it (except for the tags). You can then copy the URL that will appear in the URL bar of your Web browser.

          Processus1 - Use case - Widget creation wizard.png  Processus1 - Use case - Widget creation wizard - set customization options.png

  • You can select the type of display you want. Click one of the options (2) to obtain the code to be inserted in your app.
  • If required, configure the widget by clicking the set customization options link (3).
  • Click [ COPY CODE ].

2. Open your Product name - ev sas.png app and display the Twitter timeline via a HTML Script widget. Open url.png  See the procedure.

          Example documentation icon EN.png
          Processus1 - Use case - Service store template.png

          Best Practice icon.png

  • For Profile, Public List, Favorites and Handles, the widget configuration wizard enables you to  specify the height and width of Twitter Inc. widgets using the set customization options link. The HTML code generated contains the data-width and data-height tags with their selected values. You can modify them subsequently in the HTML Script widget inserted in your Product name - ev sas.png app.
  • In the configuration wizard, the minimum height and width are respectively 200 and 220 pixels. If you want the Twitter Inc. widget to be resized automatically in your Product name - ev sas.png app based on the size of the user's device, you should set the height and width to 100%.
             Processus1 - Use case - Html code width height.png
Tags:
Powered by XWiki © EasyVista 2022