How to Create a Twitter Hashtag Visualizer in Augmented Reality (AR) in 15 Minutes or Less
Tags: augmentedreality, twitter, tutorial, beginners
Published: 2021-08-23 16:13:28

Looking to build an app where you can visualize tweets from Twitter in augmented reality (AR)? This Twitter hashtag visualizer is a great place to start. Type a hashtag search query such as #election2020 or #BlackLivesMatter (with no spaces for now!) into a search bar to spawn up to 15 local tweets containing your hashtag. The full demo can also be found on echoAR’s [GitHub](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Twitter-Visualizer).


![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629734548711/TipLcWNdy.png)

## Register
Don’t have an API key? Make sure to register for FREE at [echoAR](https://www.echoar.xyz/).

## Setup

**Twitter**

1. Create a [Twitter account](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Twitter-Visualizer/blob/main/www.twitter.com) if you don’t have one already. This will allow you to access the Twitter developer site
2. Head to the [Twitter developer site](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Twitter-Visualizer/blob/main/apps.twitter.com) and create a new application.
3. Fill out all the details and once you complete it you will receive an API Key and an API Secret Key which will be used in the Unity app.

**Unity**
1. Clone [echoAR-Twitter-Demo](https://github.com/echoARxyz/Unity-ARFoundation-echoAR) sample code.
2. Add and Open repo in Unity Hub as Unity 3D Project
3. Download [echoAR Unity SDK](https://bit.ly/echoARUnitySDKDownload) and import the package into the project
4. [Set the echoAR API key](https://docs.echoar.xyz/unity/using-the-sdk) in the echoAR.cs script inside the `Assets/echoAR/echoAR.prefab` using the the Inspector.
5. In `Assets/echoAR/CustomBehaviour.cs`, comment out line 27
`this.gameObject.AddComponent<RemoteTransformations>().entry = entry;`

and replace with:

`// Set Rotation to parent
this.gameObject.transform.rotation = this.gameObject.transform.parent.transform.rotation;
// Set Scale
this.gameObject.transform.localScale = new Vector3(0.001f, 0.001f, 0.001f);`

6. Open `Assets/Scenes/Main.`
7. Click on the `TweetManager` game object in the heirarchy and in the `Inspector > TweetManager(Script)` add your Twitter API Key and API Secret Key.
8. In the `TweetManager` game object, in the `Inspector > TweetGenerator(Script)`


* Add `Assets/Prefabs/TweetObject.Prefab` to the `Tweet Prefab` field.
* Add `Assets/echoAR/echoAR.prefab` to the `Object To Spawn` field.
* Add `ARCamera` from the hierarchy to the `Spawn Point` field.


![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629734948495/8C-mufLX1.png)

## Build & Run
[Build and run the AR application](https://docs.echoar.xyz/unity/adding-ar-capabilities#4-build-and-run-the-ar-application). Verify that the `Assets/Scenes/Main` scene is ticked in the Scenes in Build list and click `Build And Run`.


![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629735045218/8KNoUoo-7.png)

## Learn More
Refer to our [documentation](https://docs.echoar.xyz/unity/) to learn more about how to use Unity and echoAR.

## Support

Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack](https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

***
> echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629735081723/RTA3Myuf6.png)