INTEGRATE MULTIPLE TWITTER HASHTAG FEEDS TO YOUR WEBSITE by chri5h

utopian-io · @chri5h · Apr 20 '18 (edited)

$0.03

INTEGRATE MULTIPLE TWITTER HASHTAG FEEDS TO YOUR WEBSITE

#### What will I Learn?

In this tutorial, you will learn the following

- To create a twitter widget timeline loaded from your twitter account
- Add the widget as a live feed to your personal or client’s website
- Customize the widget to suite your design
- Advanced customization features widget design
- Load tweets from multiple hash tags or twitter account using search source option

#### Requirements

For this tutorial, you will need the following

- A laptop with any operating system such as Windows OS, Mac OSX and Linux
- Your favorite text editor
- An active twitter account
- A sample html file to display the twitter feeds (link included at the end of the tutorial)

#### Difficulty

- Basic

#### Tutorial Content

This tutorial will show you how to create a live feed of your twitter account and enable you add it to your webpage. Most times we tend to refer users to our twitter account as well as other social media platform. But with this tutorial we will learn how to create the twitter widget timeline from an active twitter account, customize the widget to suite our already predefined design, perform some advanced styling to better suite our design and also link multiple twitter accounts to the same page.

##### Step 1: Getting Mockup Ready

To begin this course you will need to design a sample page of your choice to proceed with the course or copy the code below and paste into your code editor and follow along.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Add twitter timeline</title>
    <link rel="stylesheet" href="assets/style.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>

    <header>
      <div class="overlay">
        <h1>About Twitter Timeline</h1>
      </div>
    </header>

    <section>
      <article>
        <h2>First create the required client's page</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <ul>
          <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
        </ul>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </article>

      <aside>
        <!-- twitter timeline widget goes here -->
        <h2>Twitter timeline widget goes here</h2>
      </aside>
    </section>

    <div class="footer">
      Copyright: &copy; Chri5h - Web developer and tutor.
    </div>

  </body>
</html>

```

```css
body {
  max-width: 100%;
  margin: 8px;
  position: relative;
}
header {
  background-image: url('../assets/bg2.jpeg');
  height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.overlay {
  background-color: rgba(0, 34, 255, 0.46);
  position: absolute;
  width: 100%;
  top: 0;
  height: 200px;
}
header h1 {
  padding: 100px 20px 0px;
  color: #fff;
  margin: 0;
  letter-spacing: 0px;
  font-family: sans-serif;
}
article h2, aside h2 {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: -1px;
    font-size: 21px;
}
section {
  padding: 30px 4%;
}
ul {
  padding-left: 27px;
}
article {
  width: 55%;
  float: left;
}
article p {
  text-align: justify;
}
aside {
  width: 40%;
  margin-left: 5%;
  float: left;
  margin-bottom: 15px;
}
.footer {
  clear: both;
  background-color: #5968CB;
  color: #fff;
  text-align: center;
  padding: 20px 0px;
  font-size: 15px;
  font-weight: bold;
  font-family: monospace;
  width: 100%;
}
@media (max-width: 767px) {
  aside {
    width: 100% !important;
    float: left;
  }
  article {
    width: 100%;
    float: left;
  }
}

```

![sample HTML design.JPG](https://cdn.utopian.io/posts/e36a62d6b8f6a8084e68e3e2cf5b3f143c14sample_HTML_design.JPG)

Once you have successfully gotten the above design (link to design at the end of this tutorial) or created your preferred design, then you cleared to proceed to the step 2.



##### Step 2: Create Twitter Widget

To create the twitter widget, you need to log into your active twitter account or create a new twitter account at <a href="https://twitter.com/ ">twitter.com</a>. Once you have successfully logged in or created the account, at the top right select your picture and click on Settings and privacy. Then select Widgets at the left sidebar and click on "Create new". In the menu option, select Profile. See sample screenshots below.

![Screenshot_20180419-213115.png](https://cdn.utopian.io/posts/75526ee9968850f5e8e1245d1f2bc055f5e4Screenshot_20180419-213115.png)

![Screenshot_20180419-213923.png](https://cdn.utopian.io/posts/accb1975506cf15b8908d181eca5545231ebScreenshot_20180419-213923.png)

On the next page, enter your twitter handle name e.g @Prof_Krish or the link to your twitter url and press the Enter key. Then select from the display option whether the embedded timeline or twitter button design. Then click the Copy code button to copy the html mockup into your html file as shown below.

```html + js
<aside class="">
        <!-- twitter widget code is inserted here -->
        <a class="twitter-timeline" href="https://twitter.com/Prof_Krish?ref_src=twsrc%5Etfw">Tweets by Prof_Krish</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
```

![Screenshot_20180420-080410.png](https://cdn.utopian.io/posts/7d78aa5a66b1038be3351d35b372a3ec9153Screenshot_20180420-080410.png)

##### Step 3: Set customization option

You can decide to change some default option provided by twitter to your preferred choice by clicking on the "set customization options". You are permitted to set the height and width of the widget, choose a desired theme whether dark or light theme, default link color as well as a preferred display language (by default is set to Automatic). After setting your preferred customization, click on the update button and a new html mockup will be created, then copy and paste the mockup code into your html file.

![Screenshot_20180420-080415.png](https://cdn.utopian.io/posts/9a615d547c0671217bd0ae349bba517c3eecScreenshot_20180420-080415.png)

##### Step 4: Advanced widget customization

As a developer, you might decide to change some few settings outside of the default customization by twitter.  You may want to set a limit to the number of tweets displays, set the border color, link color, even remove the header, footer, border and make the widget transparent. To achieve the following, copy and paste the code into your file file.

- to change the link color

  ```
  data-link-color="#d77a2e"
  ```

- to set border color

  ```
  data-border-color="#d19c47"
  ```

- to set a limit to the number of tweets displayed

  ```
  data-tweet-limit="3"
  ```

- to remove header, footer, border and set background to transparent

  ```
  data-chrome="noheader nofooter noborders transparent"
  ```

Note: Sample of an advanced customization can be found below. For other advanced customization settings, visit <a href="https://dev.twitter.com/web/embedded-timelines/parameters">twitter timeline parameter</a>.

```html
<a class="twitter-timeline" href="https://twitter.com/Prof_Krish?ref_src=twsrc%5Etfw" data-link-color="#d77a2e" data-border-color="#d19c47" data-tweet-limit="3" data-chrome="noheader nofooter noborders transparent">Tweets by Prof_Krish</a>
```



##### Step 5: Load tweets from multiple twitter accounts

Loading tweets from multiple twitter accounts  is quite similar to what we have done so far. But in this case, we will use the search option to load tweets from both twitter accounts or handles. To achieve this, perform the following

###### Option 1:

- On your twitter home screen after you are logged in

- type into your search field provided the following code and hit enter key

  ```
  from:thedailyshow+OR+from:cnn
  ```

  Note: Replace the "thedailyshow" and "cnn" with your preferred **#hashtags**

 ![Screenshot_20180420-121949.png](https://cdn.utopian.io/posts/bda1e66ecd9d6636b6f1a41bc960d186fea7Screenshot_20180420-121949.png)

- A result will be displayed, then copy the link in your address bar and paste into href of your anchor tag.

  ```html+js
  <a class="twitter-timeline"  href="https://twitter.com/search?q=from%3Athedailyshow%2BOR%2Bfrom%3Acnn" data-widget-id="987288354185207808">Tweets about from:thedailyshow+OR+from:cnn</a>
          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  ```

###### Option 2:

- Create new widget from the create new button in your twitter account (see step 2)

- Select Search among the dropdown options.

- On the new page, set your preferred customization like height, theme, and Link color

- In the search query field, enter the code below replacing the "thedailyshow" and "cnn" with preferred #hashtags

  ```
  from:thedailyshow+OR+from:cnn
  ```

- Then click on the create widget button at the button

- And finally copy the html mockup that appears below the preview area and paste into your html file
  ![Screenshot_20180420-083454.png](https://cdn.utopian.io/posts/58483b0f373dde3dded5bae134c6cf086a7fScreenshot_20180420-083454.png)

I hope  you find this tutorial very useful and you can access the complete code for this tutorial in the <a href="https://github.com/chrix95/twitter_timeline.git">github repo</a>.

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@chri5h/integrate-multiple-twitter-hashtag-feeds-to-your-website">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>

👍 piotr-galas, marketstack, filipino, manuckiya

properties (23)

author

chri5h

permlink

integrate-multiple-twitter-hashtag-feeds-to-your-website

category

utopian-io

json_metadata

"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":130354914,"name":"twitter_timeline","full_name":"chrix95/twitter_timeline","html_url":"https://github.com/chrix95/twitter_timeline","fork":false,"owner":{"login":"chrix95"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","tutorial","twitter","development","hashtags"],"users":["prof"],"links":["https://twitter.com/ ","https://dev.twitter.com/web/embedded-timelines/parameters","https://github.com/chrix95/twitter_timeline.git","https://utopian.io/utopian-io/@chri5h/integrate-multiple-twitter-hashtag-feeds-to-your-website"],"image":["https://cdn.utopian.io/posts/e36a62d6b8f6a8084e68e3e2cf5b3f143c14sample_HTML_design.JPG","https://cdn.utopian.io/posts/75526ee9968850f5e8e1245d1f2bc055f5e4Screenshot_20180419-213115.png","https://cdn.utopian.io/posts/accb1975506cf15b8908d181eca5545231ebScreenshot_20180419-213923.png","https://cdn.utopian.io/posts/7d78aa5a66b1038be3351d35b372a3ec9153Screenshot_20180420-080410.png","https://cdn.utopian.io/posts/9a615d547c0671217bd0ae349bba517c3eecScreenshot_20180420-080415.png","https://cdn.utopian.io/posts/bda1e66ecd9d6636b6f1a41bc960d186fea7Screenshot_20180420-121949.png","https://cdn.utopian.io/posts/58483b0f373dde3dded5bae134c6cf086a7fScreenshot_20180420-083454.png"],"moderator":{"account":"portugalcoin","time":"2018-04-20T23:34:33.841Z","pending":false,"reviewed":false,"flagged":true},"questions":null,"score":null,"total_influence":null,"staff_pick":null,"config":{"questions":[{"question":"Does the tutorial address a minimum of 3 substantial concepts and no more than 5?","question_id":"tut-1","answers":[{"answer":"3-5 substantial concepts covered in the tutorial.","answer_id":1,"value":10},{"answer":"Less than 3 or more than 5 substantial concepts covered in the tutorial.","answer_id":2,"value":5},{"answer":"No substantial or recognisable concepts.","answer_id":3,"value":0}]},{"question":"Concepts covered in the tutorial are indicated in the post text with a short description of each concept and when appropriate, images?","question_id":"tut-2","answers":[{"answer":"Thorough text and images for concepts covered.","answer_id":1,"value":10},{"answer":"Minimal text and images.","answer_id":2,"value":5},{"answer":"No or very little text and images.","answer_id":3,"value":0}]},{"question":"Does the contributor provide supplementary resources, such as code and sample files in the contribution post or a GitHub repository?","question_id":"tut-3","answers":[{"answer":"Yes","answer_id":1,"value":10},{"answer":"No","answer_id":2,"value":0}]},{"question":"Is the tutorial part of a series?","question_id":"tut-4","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Yes, but first entry in the series.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Is there an outline for the tutorial content at the beginning of the post?","question_id":"tut-5","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Yes, but not detailed enough or does not cover all sections.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the writing style meet the Utopian standard considering formalness, informativeness and clarity of the content?","question_id":"c-1","answers":[{"answer":"It is formal, informative and well written with clear content.","answer_id":1,"value":10},{"answer":"It is informative with clear content but not formal enough.","answer_id":2,"value":5},{"answer":"The contribution could be more informative or contains unrelated information, formality and clarity of the content are good enough.","answer_id":3,"value":4},{"answer":"Not all sections were clear enough but overall holds value for the project.","answer_id":4,"value":2},{"answer":"Not at all.","answer_id":5,"value":0}]},{"question":"Was the provided category template for the editor followed?","question_id":"c-2","answers":[{"answer":"All points of the template were included with additional points as well.","answer_id":1,"value":5},{"answer":"The template was followed without additions.","answer_id":2,"value":4},{"answer":"The template was edited but the points were covered in different way.","answer_id":3,"value":3},{"answer":"Not all points of the template were covered in the contribution but the structure is clear enough.","answer_id":4,"value":3},{"answer":"The template was not followed but the structure is clear enough.","answer_id":5,"value":2},{"answer":"The contents are not clearly structured at all.","answer_id":6,"value":0}]},{"question":"Did the contributor tag other users?","question_id":"c-3","answers":[{"answer":"No other users were tagged by the contributor.","answer_id":1,"value":5},{"answer":"Used tags are reasonable and all tagged people are connected to the project and/or the contribution.","answer_id":2,"value":5},{"answer":"The contribution contains mentions of other users that are not directly related to the contribution but related in other ways.","answer_id":3,"value":2},{"answer":"The contributor misuses tagging of other users.","answer_id":4,"value":0}]},{"question":"Did the contributor ask for upvotes, resteems, follows or witness vote?","question_id":"c-4","answers":[{"answer":"No","answer_id":1,"value":5},{"answer":"Yes, but not in a way that disturbs readability. ","answer_id":2,"value":5},{"answer":"Yes.","answer_id":3,"value":0}]},{"question":"Was a graphical content like images, charts, videos or screenshots included?","question_id":"c-5","answers":[{"answer":"Yes, the graphical content is included and adds more value to the contribution.","answer_id":1,"value":5},{"answer":"No but the contribution works well without graphical content well.","answer_id":2,"value":4},{"answer":"Yes, but most of the graphical content’s purpose is just for presentational matters.","answer_id":3,"value":3},{"answer":"No relevant or useful graphical content is included in the contribution.","answer_id":4,"value":0}]},{"question":"How would you rate the overall added value?","question_id":"c-6","answers":[{"answer":"Extraordinary value to both the project and the open source community overall.","answer_id":1,"value":20},{"answer":"Significant value to the project or open source community.","answer_id":2,"value":15},{"answer":"Some value to the project or open source community.","answer_id":3,"value":10},{"answer":"Little value to the project or open source community.","answer_id":4,"value":5},{"answer":"No obvious value to project or open source community.","answer_id":5,"value":0}]}]}}"

created

2018-04-20 19:59:45

last_update

2018-04-20 23:34:36

depth

children

last_payout

2018-04-27 19:59:45

cashout_time

1969-12-31 23:59:59

total_payout_value

0.031 HBD

curator_payout_value

0.003 HBD

pending_payout_value

0.000 HBD

promoted

0.000 HBD

body_length

10,538

author_reputation

2,291,303,072,819

root_title

"INTEGRATE MULTIPLE TWITTER HASHTAG FEEDS TO YOUR WEBSITE"

beneficiaries

0.

`account`	utopian.pay
`weight`	1,500

max_accepted_payout

1,000,000.000 HBD

percent_hbd

10,000

post_id

51,184,079

net_rshares

7,271,800,457

author_curate_reward

vote details (4)

voter	rshares	pct
filipino	351,782,652	10%
manuckiya	75,561,578	100%
piotr-galas	4,310,166,252	100%
marketstack	2,534,289,975	0.49%

voter	rshares	pct
gentlebot	223,631,315,941	15%
kimmystewart	12,865,027,961	23%
chri5h	0	0%