Integrating Twitter

Twitter for Websites is a suite of widgets bringing Twitter content into

YourWebShop and buttons to encourage your Twitter audience to

share your content and subscribe to your Twitter account updates.

It gives you the power to effortlessly expand your reach, drive action

and increase engagement.

Contents

Tweet / Share Button ……………………………………………………………………… 2

Follow Button …………………………………………………………………………………. 7

Timeline ……………………………………………………………………………………….. 11

Tweet / Share Button

The Tweet button is a small button displayed on YourWebShop to help

viewers easily share your content with their followers on Twitter with

just a few clicks.

Selecting the Tweet button will pop open a new child window with a

Tweet composer pre-populated with the values you define in button

mark-up or extracted from the page.

To integrate the Tweet / Share Button into YourWebShop first

navigate to: https://about.twitter.com/cs/resources/buttons

Click the “Share a link” radio button (highlighted in the red box below)

This loads the below screen with a number of options for customising

the Tweet button (red boxes 1-5)

In red box 1 you can use the radio buttons to choose whether to share

the URL of YourWebShop’s page where the button is embedded, or to

type a different URL to share

In red box 2 you can use the radio buttons to choose the text used in

the tweet; either the title of the page your Tweet button is embedded

in, or you can enter your own text

In red box 3 you can add predefined Via, Recommend or Hashtags

In red box 4 you can use the select boxes to decide if the button

generated is large and “Opt-out of tailoring Twitter” (tailored

suggestions are recommendations of accounts to follow that are most

relevant to you)

In red box 5 you can use the drop down to select the language of your

Tweet button

Once you have customised your tweet button (red boxes 1 -5 above),

copy the code in red box 6 to your clip board

Log into Manage YourWebShop by entering your existing login

credentials used on our main website shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Tweet / Share button

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the HTML Twitter button code into the WYSIWYG editor where

you want the button to appear

Scroll to the top of the WYSIWIG editor page and click the blue “Save”

button

When the page is viewed live online the Tweet Button will be

displayed where you placed it (see the red box below as an example)

Follow Button

The Follow button is a small button displayed on your websites to help

users easily follow a Twitter account.

Selecting the Follow button will pop open a new child window

displaying a follow action alongside a profile summary and a few

recent Tweets from the account.

To integrate the Follow Button into YourWebShop first navigate to:

https://about.twitter.com/cs/resources/buttons

Click the “Follow” radio button (Highlighted in the red box below)

This loads the below screen with a number of options for customising

the Follow Button (red boxes 1-3)

In red box 1 you can add the user name to follow

In red box 2 you can use the select boxes to decide if the button

generated shows the username, is large and “Opt-out of tailoring

Twitter” (Tailored suggestions are recommendations of accounts to

follow that are most relevant to you)

In red box 3 you can use the drop down to select the language of your

Follow button

Once you have customised your Follow button (red boxes 1 -3 above),

copy the code in red box 4 to your clipboard

Log into Manage YourWebShop by entering your existing login

credentials used on our main website shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Twitter Follow button

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the HTML Twitter button code into the WYSIWYG editor where

you want the Follow button to appear

Scroll to the top of the WYSIWIG editor page and click the blue “Save”

button

When the page is viewed live online the Twitter Follow Button will be

displayed where you placed it (see the red box below as an example)

Embed Timelines

You can highlight your Twitter account on YourWebShop by

embedding a Timeline

Embedded Timelines also allow you to include the most recent

updates from other Twitter users, a hashtag topic or to curate

timelines to combine Tweets from a list of users or highlight your

favourite Tweets

Timeline types

User timeline

A user timeline displays the latest Tweets ordered from newest to

oldest from a specific public Twitter account.

List of users

A list timeline displays the latest Tweets ordered from newest to

oldest from a curated public list of Twitter accounts. The timeline

includes a header displaying the list’s name, description, and curator.

Search timeline

A search timeline displays Tweets from the past few weeks in the

results of a Twitter search ranked by the Twitter search engine. It

displays customized search results in real time (perfect for live events,

conferences, brands, etc).

Collection

A collection timeline displays multiple Tweets curated by a Twitter

user in their chosen display order.

Note: Embedded timelines will only show content from users that

have public Tweets. Content from users with protected Tweets are not

compatible with any Twitter embedded timeline widgets.

To add an embedded Timeline into YourWebShop first sign in to

Twitter

Go to your “Settings” and select “Widgets”

Click “Create new”

Choose the type of embedded timeline you’d like and start to

configure it:

For User Timeline, enter the username of the user whose Tweets you

want to display

For Favourites, enter the username of the user whose favourites you

want to display

For List, select a public list that you own and/or subscribe to in the

drop-down menu

For Search, enter your search query

Customize the design by specifying the height, theme (light or dark),

and link colour to match your website

Click “Save changes” and then copy the HTML

Log into Manage YourWebShop by entering your existing login

credentials used on our main website shop.ralawise.com

When presented with the dashboard view of YourWebShop click on

“Design & Content”, then “Content Pages”, followed by the content

page where you want to insert the Twitter Timeline

Scroll down to the WYSIWYG editor

The content editor allows you to insert HTML code directly by

selecting the icon from the editor menu in the top left hand

corner

Paste the HTML twitter button code into the WYSIWYG editor where

you want the Twitter Timeline to appear (red box 1 below)

Click the “Source” button (red box 2 above)

In this view you cannot see the embedded timeline just “Tweets by @

User_Name” (red box 1 below), but if you scroll to the top of the

WYSIWIG editor page and click the blue “Save” button, then navigate

to the live page, the full Timeline will be displayed (see the red box

below as an example)

You can centralize the timeline by highlighting “Tweets by @

User_Name” (red box 1 below), and then clicking on the “Centre”

button (red box 2)

When the page is viewed live online the Twitter Timeline will be

displayed in the centre where you placed it (see the red box below as

an example)

This guide was produced by Christopher Roberts from the ecommerce department at Ralawise.

Should you require any further assistance, please contact the ecommerce support team on 01244 283208.

Last Updated 08/05/17