Example Site
To see a live example, click here.
The Twitter Integration package provides you with the ability to perform actions on top of a Twitter account using Velo code. You can run the following actions:
To see an example site that demonstrates how to use this package, click here.
Before using the package, set up the following:
Go to the Twitter developer site.
Complete the registration process, or sign in if you already have a Twitter developer account. Note that when registering for a Twitter developer account, the Twitter team may take a few days to confirm your registration.
Go to the Twitter developer portal and create a Twitter app in the Projects & Apps > Overview tab. Click the New Project button and follow the instructions.
In your app, go to the Settings tab and set the App Permissions to Read and Write.
Go to the Keys and Tokens tab and generate the following information:
Consumer Keys
Authentication Tokens
Copy the generated information. You’ll need it for the Wix Secrets Manager in the next section.
Open the Wix Secrets Manager and create a new secret with the name velo-twitter-accountSecret. Store the following JSON object in the secret:
1
Note: Make sure that the object is in correct JSON format, including all quotes. If not, the Secrets Manager will not be able to read the object properly, resulting in incorrect Twitter credentials.
Add a Wix Store to your site if you want to automatically post a tweet on your Twitter account when a new product is added to your Wix Store.
Do the following in the config.js file:
baseURL to your site’s base URL. For example, https://yourname.wixsite.com/{YOUR_SITE_NAME}.tweetOnNewStoresProduct property to true.tweetOnNewStoresProductTemplate property to the tweet you would like to post upon adding a new product to your store. You can use the following variables in your template. These variables will be replaced with the actual values of your newly created event:
$PRODUCT_NAME: Product name that was added.$URL: URL of the dynamic page that is created for the newly added product (this page is automatically created when you add a product to your catalog).$SKU: SKU of the newly added product.$PRICE: Price of the newly added product before discount.$DISCOUNTED_PRICE: Price of the newly added product after discount.Add Wix Events to your site if you want to automatically post a tweet on your Twitter account when a new event is created in your Wix Events.
Do the following in the config.js file:
baseURL to your site’s base URL. For example, https://yourname.wixsite.com/{YOUR_SITE_NAME}.tweetOnNewEvent property to true.tweetOnNewEventTemplate property to the tweet you would like to post upon adding a new event to your events. You can use the following variables in your template. These variables will be replaced with the actual values of your newly created event:
$DATETIME: Date and time of the newly created event.$TITLE: Name of the newly created event.$EVENTTYPE: Type of the newly created event, either ‘VENUE’ or ‘ONLINE’.$ADDRESS: Address of the newly created event. Note that if it is an online event the address will be null.$URL: Base URL of your site (not the URL of the newly created event page).The following backend files are included in the package. Note that only exported functions that you can use in your site are listed here:
The code in this file contains the configurations to define if you want to tweet in response to events. This file can be edited. Set up the configurations according to your needs.
The code in this file contains 2 events that automatically post a tweet from your Twitter account when fired.
You don’t need to call this code as it will be called automatically once you turn on the relevant flags in the config.js file. Functions include:
Posts a tweet to your Twitter account when a new product is added to your Wix Store.
1
Posts a tweet to your Twitter account when a new event is created in your Wix Events application.
1
The code in this file contains the functions you can use to post a tweet from your Twitter account, and get the latest tweet from a specified account.
To use the functions below in your backend code, import them with the following syntax:
1
tweet(input)
Receives an input string and posts it to your Twitter account.
When successful, the function returns the string that was tweeted. In case of an error, the function returns a rejected promise containing the error message.
1
getLatestTweet(username)
Gets the most recent tweet from a Twitter account username.
When successful, the function returns the string of the username’s latest tweet. In case of an error, the function returns a rejected promise containing the error message.
1
The code in this file contains a utility function that reformats the parameter names in the event.js file.
This section demonstrates how you can work with the package, and the different options for using the package functions.
There are 3 main use cases you can implement with this package:
The following describes how you can use this package to post tweets using an input element:
To use the tweet() function in your page code, add a web module to your backend. We’ll call ours twitter.jsw. Include the following code in this file:
1
It is recommended to validate the input from the frontend in the web module function before calling the twitter.js functions, in order to make sure that the site visitor calling these functions is not sending or receiving information you don’t want sent to Twitter. For example, if you have a members area on your site, you can use the wix-users API to check the role of the visitor calling the functions before calling the twitter.js functions.
Add the following page elements to your site:
Import the runPostTweet() function from the web module to your page code and run it when the button is clicked.
1
The following describes how you can use this package to get the latest tweet from a specific Twitter account:
To use the getLatestTweet() function in your page code, add a web module to your backend. We’ll call ours ‘twitter.jsw’. Include the following code in this file:
1
It is recommended to validate the input from the frontend in the web module function before calling the twitter.js functions, in order to make sure that the site visitor calling these functions is not sending or receiving information you don’t want sent to Twitter. For example, if you have a members area on your site, you can use the wix-users API to check the role of the visitor calling the functions before calling the twitter.js functions.
Add the following page elements to your site:
Import the runGetLatestTweet() function from the web module to your page code and run it when the button is clicked.
1
The following describes how you can use this package to post tweets in response to events:
Events:
Follow the instructions for setting up the configurations for the event you want to use.
To automatically post tweets when a new product is added to your Wix Store, your config.js code should look something like this:
1
To automatically post tweets when a new event is created in your Wix Events, your config.js code should look something like this:
1
This Velo package uses the following npm package. To view the npm license, see the npm readme.
1.0 Initial version.
twitter, tweet, tweeting, getLatestTweet, twitterLite, tweetOnNewProduct, tweetOnNewEvent