Skip to main content

How to embed Twitter profile feed into a Custom Widget - Knowledgebase / Website Guides / Website Widgets - ClubRunner Support & Knowledgebase

How to embed Twitter profile feed into a Custom Widget

Authors list

Many Clubs are now using Twitter in addition to their website to keep their current and prospective  members informed and encourage them to frequently visit login to their website. To add the live Twitter feed to your Club's website, you will need to use a third party tool such as TweetsWind. TweetsWind provides users with a ClubRunner-friendly embed code, so users can easily implement it using the editor.

Note: Twitter is a third-party application. ClubRunner provides no support for Twitter. Users are advised to check the application's privacy policy and terms and conditions before signing up.

To begin, you will need to visit the Publish Twitter website by clicking on this link, or you can copy and paste this link directly to your internet browser: https://publish.twitter.com/

1.  Click on Give TweetsWind permission to access your tweets.

2. Enter your Twitter login information and click on Authorise App.

3. Change the settings to ones that best suit the needs of your Club or District. Access more options by clicking on the Advanced Settings link for each given settings category. A preview of the Twitter feed as it will appear according to your settings appears on the right side of the screen and automatically updates when you change a given setting.

4. TweetsWind generates an embed code below the preview. Highlight the code with your mouse and copy it. Now, follow the steps in the next section to apply this code on your website.

To paste the embed code in ClubRunner:

1. Login to your Member Area page and then click the Website tab.

 

2. Next, click on the Website Designer link.

3. You are now on the Website Designer page. Click on the Edit Content button under the Content Section heading in the middle of the page.

4. Drag and drop the Global Custom Widget into the Designer. This widget is located under the Custom Widgets (Global) tab on the left side of the screen.

5. Placing the widget on the design area will open the editing window, where you can enter details for the widget content. If you wish, give the widget a custom name to reflect its use as a Twitter Feed. This step is optional, but giving the widget a name will help you keep track of it in the future.

6. Next, click on the Source button in the tool bar above the editing field.

NOTE: This step is essential. If you you paste the TweetsWind code directly into the editing field, visitors to the site will see the code and not the Twitter Feed. 

7. Now, paste the code into the editing field. When you are finished, click Save. 

8. You are retured to the Page Designer. Click Publish at the top right above the designer in order to make the Twitter Feed appear on your website. 

Helpful Unhelpful