Whether or not you love social media or you hate social media, it can really help your business apps. How? For one thing, it can provide valuable information that you can’t get from your data. For instance, your data can tell you what’s happening in your business. Social media can tell you what people are saying about your business or a particular topic regarding your business.

Doesn’t that sound like information you’d want to know? Of course it does. Wouldn’t it make sense to add that data to your web apps? Of course!

Today, I’d like to show you how to add a Twitter feed to your m-Power web applications. How might this be useful? Here are a few examples:

• Set the feed to only display tweets mentioning your product or company.
• Set the feed to only display tweets mentioning a subject relating to your company.
• Set the feed to only display tweets from certain users, like your CEO or competitors.

Make sense? Alright let’s get started. Adding a Twitter feed to an m-Power application is quite simple, requiring only these few steps:

1. Choose your application

Which application would you like to use for this feed? For this example, I’m going to use the Business Dashboard found on Crazybikes. I think a Twitter feed could be quite useful on dashboard applications in particular.

2. Choose your feed

Thankfully, Twitter makes the process very easy. They’ve created this page on their site where you can create a feed and grab the necessary code. For this example, I’m going to set up a “Search Widget”. Here are the steps needed to create a search widget:

1. On the “Select Your Widget” page, click “My Website”
2. Click “Search Widget”
3. Set up your search widget. You’d probably want to use your company or product name as the search query. However, since I’m building this for a fictional company (crazybikes), I highly doubt anyone is tweeting about it. So, I’ll just use “bicycle” as the search query. This will pull up any tweets mentioning bicycles, which could be useful to our fictional company.
4. Set up your widget preferences. I left all of the preset settings, except for changing the width to “auto”
5. Click the “Finish and grab code” button. Copy the generated code.

Here’s what my generated code looks like:

Code:

 
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'Bicycle',
  interval: 30000,
  title: 'Bicycle Tweets',
  subject: '',
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().start();
</script>

3. Paste the feed in your application

Figure out where you want to place your feed, and then just copy and paste the code. I’ll quickly walk you through the process. If you remember, I want to place the feed in this Business Dashboard. As you notice in the dashboard, every graph/chart resides in a movable widget on the page. I’d like to create a new widget and place the Twitter feed inside.

To do this, I’ll first need to open the application in m-Painter. Then, I’ll need to switch to source mode and identify the HTML code for one of those widgets. In this case, it’s pretty easy to find. Here is the source code for one of the widgets:

Code:

 
<tr>
<td class="" valign="top">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Today's Orders</div>
<div class="portlet-content">
import:CBB2E.R01221s?run=6&amp;R001=${selection[001].value?url}&amp;R002=${select.R002}&amp;R003=${select.R003}&amp;R004=${select.R004}&amp;R005=${select.R005}:end
</div>
</div>
</td>
</tr>

To create my Twitter widget, I’ll just copy and paste this widget code, and replace everything inside of the “portlet-content” div tag with the Twitter code that we generated earlier. Here’s what this would look like:

Code:

 
<tr>
<td class="" valign="top">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Twitter Feed</div>
<div class="portlet-content">
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'Bicycle',
  interval: 30000,
  title: 'Bicycle Tweets',
  subject: '',
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().start();
</script>
</div>
</div>
</td>
</tr>

Technically, that’s all you should need. Check the application to make sure it’s working right. If it is working, then congratulations! You’re all done!

If it isn’t working, there’s probably a javascript conflict with your app. The javascript used by the Twitter widget may cause problems with Web applications that already use a lot of javascript. If this is the case, I have a simple workaround for you. We’ll place the feed on another web page and pull it in using an iframe. To do that, just follow these steps:

1. Create a blank web page and paste the Twitter code in the “body” section.
Here’s what my page looks like:

Code:

 
<html>
<head>
</head>
<body>
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'bicycle',
  interval: 30000,
  title: 'Bicycle mentions',
  subject: '',
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().start();
</script>
</body>
</html>

2. Save the page somewhere on your site, or on a server that can be accessed by your web application.

3. Pull the new page into the web app using an iframe.

Here’s what that looks like on my application:

Code:

 
<td class="" valign="top" width="300">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Twitter Feed</div>
<div class="portlet-content">
<iframe height="350" width="300" src="https://www.mrc-productivity.com/test/twitter.html" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</td>

4. Save and run the application. You should now have a working Twitter feed!

Conclusion

That’s it! With just a few easy steps, we’ve added a real-time Twitter feed to a business dashboard. If you’d like to add a feed to your applications, but don’t feel comfortable going through the steps listed above, let us know. One of our consultants can handle the job for you quickly and easily. Visit this page to learn more.

Related Posts:

• No Related Posts