Integrating Twitterhelp.yourwebshop.com/.../yourwebshop...twitter.pdf · Twitter” (Tailored...
Transcript of Integrating Twitterhelp.yourwebshop.com/.../yourwebshop...twitter.pdf · Twitter” (Tailored...
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
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