Overview

This “Little Bits” tutorial will show you how to add a Twitter Timeline to your project skin and reveal it with a mouse click.

Issues

At this time I couldn’t just paste the Twitter embed code into a text box and have it work. Instead, we will use a workaround whereby we create a standalone HTML page and load it into a textbox using iFrame code.

Note: this tutorial was built in Pano2VR V6.1.10 You can download the software here.
As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.

Final Output

Final Output: click on the Twitter bird to reveal the Twitter Timeline

Tutorial Files

In the tutorial folder, Twitter_Timeline, there is an Asset folder with an equirectangular image, two svg files, and an HTML file. There is also a Project folder with a Pano2VR project 'twitter_timeline.p2vr', a skin 'twitter_timeline.ggsk', and an Output Folder ‘Twitter_Timeline_Output’ with project files created from the .p2vr and .ggsk (figure #1)

Project Overview

In this tutorial, we will modify the twitter_timeline.ggsk skin by;

Obtaining the Twitter Timeline embed code
Adding the embed code in our twitter.html file
Include the twitter.html in the project
Adding a Text Box and iFrame Code
Adding a Twitter Bird button
Styling the Text Box
Setting the Reveal
Adding an svg button to reveal and hide the text box

Note: click on any image in the tutorial to enlarge it

Getting Started

1. Download the zipped tutorial folder here

Obtaining the Twitter Timeline embed code

1. Navigate to the website https://publish.twitter.com/

2. Enter the URL of the Profile you want in the feed

Note: in this case I’m going to use my own Profile https://twitter.com/tonyredhead

3. Click on the right arrow for more options (figure #2)

Figure #2: Twitter publish and URL of Profile

4. Timeline is the default option and a sample of the selected Twitter timeline is shown below the options (figure #3)

Figure #3: Display options and sample timeline

5. If you want to set options click on the set customization options link (figure #4)

Note: In my case I’m going to leave it as is

6. When you are finished click on the Copy Code button (figure #5)

7. The code has been copied to the clipboard and we can progress to the next step (figure #6)

Adding the Embed Code

Open the twitter.html file (in the Assets folder) into a text editor
There is a comment indicating where the code should be placed (figure #7)

Note: I’m using BBedit but you can use any text editor

3. Select the comment and paste in the copied Twitter Embed code

4. Save and close the file (figure #8)

Figure #8: twitter.html with timeline code

Note: if you wan to test the code just open the twitter.html in a browser (figure #9)

Include the twitter.html in the project

1. Open the twitter_timeline.p2vr file (in the project folder)
2. Open the Advanced dropdown menu
3. In the Assets section click on the ‘+’ button and select Add Files
4. Navigate to the tutorial folder and select Assets/twitter.html (figure #10)

Note: by doing this we will be placing the twitter.html file inside an assets folder within the Twitter_Timeline_Output folder. This will allow us to load the file within the skin using the path assets/twitter.html

Figure #10: Adding the twitter.html file to the project

Adding a text box and iFrame Code

1. Click on the ‘Edit Skin’ button to open the skin editor
2. Add a text box to the skin
3. Set the Position > ID of the textbox = txt_twitter_feed
4. Set the Position > Anchor to center
5. Set the Position > X: = 0 pixels | Y: = 0 pixels
6. Set the Size to Width = 400px & Height = 300px
7. Set Rectangle > Border: Width = 0
8. Set Text > Text: to the iFrame code below;

9. Save the skin (figure #11)

Figure #11: Text box settings and iFrame code applied

10. Output the project (Test Output #1)

Test Output #1 showing Twitter Timeline in the project

Note: This finishes the tutorial in regard to actually adding the Twitter timeline and you can go ahead and implement it in your own skin. The next section may be of interest to those who want to see how I finished the final output file.

Adding a Twitter Bird Button

1. Add a variable to the skin with the Name = vis_twitter | Type = True/False and Init Value = false (figure #12)

Note: This variable will be used to affect the properties of the text box and svg button

2. Add the twitter.svg file to the skin (Assets folder)
3. Set the Position > ID of the svg = svg_twitter
4. Set the Position > Position: X: 670 pixels and Y: 495 pixels
5. Set the Size to Width: 60 pixels & Height: 60 pixels (figure #13)

Figure #13: Properties assigned to the twitter.svg element

7. Add the twitter_bubble.svg file to the skin
8. Set the Position > ID of the svg = svg_stop
9. Set the Position > Position: X: 700 pixels and Y: 480 pixels
10. Set the Size to Width: 41 pixels & Height: 12 pixels (figure #14)

11. Copy and paste svg_stop
12. Set the Position > ID of the svg = svg_go
13. Use the Change Colors tool to set the red color shades to green shades (figure #15)

Figure #15: set color shades using the Change Colors tool

14. Select both svg_go and svg_stop
15. Set Appearance > Visible = unchecked
16. Add a logic block to Appearance > Visible: Trigger/Mouse Over Parent | Comparison/= | Value/true | Visible: true
17. Set Appearance > Alpha = 0
18. Add a logic block to Appearance > Alpha: Trigger/*vis_twitter | Comparison/= | Value/true | Alpha: 1.00
19. Select just svg_go and change the Alpha logic block to Appearance > Alpha: Trigger/*vis_twitter | Comparison/= | Value/false | Alpha: 1.00 (figure #16)

Note: when the Twitter Timeline is visible (ie vistwitter = true) and the mouse is over the parent the alpha of svg_stop is 1.000 When the timeline is hidden and the mouse is over the parent the alpha of svg_go is 1.000 Otherwise both alphas are 0.000

20. Draw a container around the 3 svg elements
21. Set the Position > ID of the container = cnt_bt_twitter
22 Set the Position > Anchor: to bottom right
23. Add a logic block to Appearance > Scaling: Trigger/Mouse Over | Comparison/= | Value/true | x: 1.20 | y: 1.20
23. Set Appearance > Hand Cursor: to checked
24. Set Actions: Source: Mouse Click | Action: Set Variable Value | Variable Name: vis_twitter | Operation: Not(⌝) (figure #17)

Figure #17: Properties settings for cnt_bt_twitter

25. Select txt_twitter_feed
26. Set Appearance > Alpha: = 0.000
27. Add a logic block to Appearance > Alpha: Trigger/*vis_twitter | Comparison/= | Value/true | Alpha: 1.000
28. Set Transition > Enabled = checked | Time =0.500 seconds (figure #18)

Figure #18: txt_twitter_feed Alpha Logic Block

29. Save and close the skin and Output the project (test output #2)

Test Output #2 showing button action

Styling the Text Box

Note: in this section we are going to round off the left hand corners of the text box, add a drop shadow, set a proportional vertical size, position it and apply a logic block to move it on and off the canvas

1. Open the skin if it’s not already open.
2. Select the txt_twitter_feed element and open the Properties > Advanced panel
3. In the CSS Styles Inner Element text window enter the following code;

border-radius: 15px 0px 0px 15px; box-shadow: 10px 10px 6px rgba(0, 0, 0, .1); (figure #19)

Note: This will apply a 15px radius to the top left and bottom left corners of the text box and a transparent shadow to the right and down

Figure #19: CSS styling applied to the text box

4. View the changes by opening the Live Preview and clicking on the Twitter bird button (figure #20)

Note: the Twitter feed is not visible in the Live Preview only in the output

Setting the Reveal

1. With the txt_twitter_feed selected, set the Position > Anchor: to bottom right
2. Set the Position > Position: = X: -400 pixels & Y: 160 pixels
3. Add a logic block to Position > Position: Trigger/*vis_twitter | Comparison/= | Value/true | X: 0 | Y: 160
4. Select Transition > Enabled = checked | Time: 1.000 Seconds (figure #21)

Note: opening the Live Preview and clicking on the Twitter button shows the text box sliding into the canvas and fading up at the same time. Clicking again and it hides.
To see the element outside of the canvas select Menu > View > Show Off-Canvas Elements

Figure #21: Properties to set the element reveal

Note: if we scale the preview window the height of the Twitter Feed is fixed. In the final step we will use some CSS to proportionally scale the txt_twitter_feed element. We want to maintain the 160px distance from the bottom of the feed and have a 60px gap at the top. (figure #22)

Set the Proportional Scale

1. Set the Position > Size > Height: (CSS) = calc(100% -220px) (figure #23)

2. Save the skin and output the final project

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate

Back to "Little Bits" Homepage

Adding a Twitter Timeline