×
Namespaces

Variants
Actions
Revision as of 07:58, 5 April 2013 by hamishwillee (Talk | contribs)

Integrating your social presence with the Digital Marketing Toolkit website

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to enhance the website assets created with the Nokia Digital Marketing Toolkit by integrating with your social presence on Facebook and Twitter.

Article Metadata
Article
Created: jappit (31 Mar 2013)
Last edited: hamishwillee (05 Apr 2013)

Contents

Introduction

The Digital Marketing Toolkit allows developers to easily create marketing assets to promote their own applications on various channels and media. By following the guidelines in the Nokia App Marketing Guide, this article will show how to integrate your social presence in the assets, and specifically in the website created by using the Digital Marketing Toolkit.

This integration is intended to create engagement and communication with your app users directly on your app website, without the need to have users visiting different websites to gather information about your app, and to have a direct communication channel with the developer (You).

This article uses the sample website visible in the picture below, and created with the Digital Marketing Toolkit, as a test case for the illustrated techniques.

Nmt website socialpresence start point.png

Creating your social presence

Depending on your target audience you should consider which social channel would most benefit your app, by reaching the widest possible audience. Once you have defined the desired channels, carefully follow the tips illustrated in the Nokia Marketing Guide (section 1.4) to setup your social presence in an effective way.

This article focuses on the Facebook and Twitter media channels. So, it assumes that you have already created a Twitter account and/or a Facebook page for your app. If you haven't already done that, you can:


Setup the website assets

Before starting integrating your social presence, it is necessary to actually create the website assets by using the Digital Marketing Toolkit, via its wizard based interface that guides you through the necessary steps.

Nmt website socialpresence createwebsite.png

Moving the website to your own hosting

Once created, the website assets are available for download as a ZIP file.

Nmt website socialpresence websitezip.png

Even if the Digital Marketing Toolkit allows you to preview your website on a public URL (http://www.developer.nokia.com/Distribute/Promoting_your_app/Web?id=<app_id>&uId=<your_username>) you should download the assets and host the website on a hosting that you own for various reasons:

  • Having a domain that is associated with your app: as specified by the Nokia App Marketing Guide (section 1.3.4), you when registering a domain for your application website you should carefully consider which keywords to include in your website URL and domain name.
  • Enhancing the website with further features, as the social presence integration illustrated in this article, or other features like blogs, news sections, forums.


Once you have uploaded the website assets on your own domain (typically via FTP), it's possible to proceed with the social presence integration.

Integrating your Twitter presence

This section illustrates how to display your Twitter social presence on the website created with the Digital Marketing Toolkit.

Creating the Twitter widget

Once you have setup your Twitter presence, visit the Twitter widgets page and select Create New. You'll be presented with a page where you can configure the settings of the Twitter widget you wish to create, including:

  • your Twitter account: specify the account you've created for your app's social presence
  • height of the widget
  • widget's theme
  • links color

Nmt website socialpresence twitter widget setup.png

Once you've experimented with the settings, and found out what works better for you, click Create Widget: your widget's HTML code will be displayed in a text area just below the live preview.

Integrating the widget in your website

Open the kit.html page created by the Digital Marketing Toolkit with your preferred HTML editor.

Add a new table row with one cell just before the </table> tag near the end of the page, with a title related to your Twitter social presence.

<tr>
<td class="td_l">
<h3 >Happening on Twitter</h3>
</td>
</tr>

Now, add the Twitter widget's code generated in the previous section inside the table cell, just below the title.

<tr>
<td class="td_l">
<h3 >Happening on Twitter</h3>
 
<a class="twitter-timeline" href="https://twitter.com/TheBigMapQuest" data-widget-id="318003380993802240">Tweets by @TheBigMapQuest</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
</td>
</tr>

Save the changes made to kit.html and preview the final result in a Web browser. If you're not satisfied with the final result, you can change the widget's settings and create a new widget as illustrated in the previous section, and then update the widget's code in the kit.html page. The following picture shows how the Twitter widget appears on the app's website.

Nmt website socialpresence twitter widget.png

Integrating your Facebook presence

This section illustrates how to integrate your Facebook page into the website created with the Digital Marketing Toolkit.

Facebook offers multiple social plugins: this section explores the ones that would best work for the purpose of communicating with your app users.

The Like Box

The "Like Box" is one of the available Facebook social plugins, and offers features that are well suited to communicate updates and news to your app users. Specifically, the Like Box allows your website's visitors to:

  • read the latest updates published on your Page
  • see how many users and friends have already liked your Page
  • like your Page with just one click, without leaving your website


In order to create a Like Box for your Facebook page, take note of your Facebook Page URL: it must be something like https://www.facebook.com/118007911673837 or https://www.facebook.com/<your_page_name>. Then visit the Like Box page, and check the available settings:

  • the Facebook Page URL must be populated with your Facebook Page URL
  • the Width should be set to 420, in order to perfectly fit into the website layout generated by the Digital Marketing Toolkit
  • the Stream option, if checked, allows the Like Box to list the latest published news from your Facebook Page
  • the Show Faces allows your website's visitors to see photos of users (and, if any, of their friends) who already liked your Page
Nmt website socialpresence fblike widget setup.png

Once you're satisfied with the Like Box settings, click the Get Code button: you'll be presented with two code snippets that must be used to integrate the Like Box in your website.

Integrating the Like Box

Open the kit.html page created by the Digital Marketing Toolkit with your preferred HTML editor.

Paste the first code snippet generated in the previous section just after the opening <body> tag:

[...]
</head>
 
<body style="background-color:#000">
 
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div id="fncontainer">
[...]

Then create a table row just before the closing </table> tag (if you have already created a row to integrate the Twitter widget, you can use that one). Inside that row, create a table cell with title related to your Facebook presence.

[...]
<tr>
[...]
<td class="td_r">
 
<h3 >Like us on Facebook</h3>
 
</td>
</tr>
</table>

Finally, paste the second code snippet generated in the previous section just below the cell title:

    <tr>
 
[...]
 
<td class="td_r">
<h3 >Like us on Facebook</h3>
 
<div style="background: white;" class="fb-like-box" data-href="https://www.facebook.com/118007911673837" data-width="420" data-show-faces="true" data-stream="true" data-header="true"></div>
 
</td>
</tr>
</table>

Save the changes to the kit.html file and check out the result on your Web browser. You can see the Like Box section added to the app website in the picture below.

Nmt website socialpresence fblike widget.png

The Comments Box

The Comments Box is Facebook plugin that allows to create a bi-directional channel of communication with your app users. This allows users to give developers direct feedback about your app, and developers can easily reply to users about their needs or suggestions.

In order to create a Comments Box for your app website, visit the Comments Box page. You're asked to enter a URL to create your Comments Box: you can enter the URL of your app website, or any other URL that is uniquely associated with your app: this way, you'll just get comments related to your app, and your users will not see irrelevant comments on your website.

After you've entered the URL you wish, you can set the width of the Comments Box: if you wish to create box that occupies half of your website's width, you can set it to 420. In this article, the width will be set to 900 to let the box take the full width of the website generated by the Digital Marketing Toolkit.

Nmt website socialpresence fbcomment widget setup.png

Once you're done with the settings, click the Get Code button: you'll be presented with two code snippets that are needed to integrate the Comments Box in your website.

Integrating the Comments Box

Open the kit.html page created by the Digital Marketing Toolkit with your preferred HTML editor.

Paste the first code snippet generated in the previous section just after the opening <body> tag:

[...]
</head>
 
<body style="background-color:#000">
 
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
 
<div id="fncontainer">
[...]

Note.pngNote: If you have already integrated the Like Box in your website, the previous step could be not necessary, since you've already included the Facebook JavaScript SDK.

Then, create a table row with a cell that takes the full table width, and add a title asking users to leave you a feedback about your application.

<tr>
<td colspan="2">
<h3>Tell us what you think about our app.</h3>
</td>
</tr>

Finally, paste the second code snippet generated in the previous section just below the cell title:

<tr>
<td colspan="2">
[...]
<div style="background: white;" class="fb-comments" data-href="http://example.com" data-width="900" data-num-posts="4"></div>
</td>
 
</tr>

Save the file changes and check out the final result in your Web browser.

Nmt website socialpresence fbcomment widget.png

The final result

The picture below illustrates how the app website created with the Digital Marketing Toolkit looks after integrating the 3 widges illustrated above.

Nmt website socialpresence final result.png

A live preview of the above website is available here: http://www.jappit.com/m/thebigmapquest/

Summary

Using this techniques illustrated in this article as a starting point, it's possible to integrate your social presence in the website created with the Nokia Digital Marketing Toolkit, so adding to the benefits of having a social presence (for instance, generating buzz, reaching a wider audience) the plus of having all your social content available in one place: your App website.

370 page views in the last 30 days.
×