PRODUCT
Follow

Overview

Introduction and Screenshots

The HTML5 Social Share Feature allows you to easily add share buttons for the top five social networks, including Facebook, Twitter, Pinterest, and Tumblr. The Feature comes with two templates: The Social Share Panel and Social Share Icons. Both allow you to share a link and image when applicable. 

  

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Edge, Firefox, Chrome

Mac

Firefox, Chrome, Safari

iPhone

iOS 8.0 and later

iPad

iOS 8.0 and later

Android

Android 4.1 and later( including tablets)

 

Assets

Workspaces Available

The Social Share Ad Feature includes two HTML5 Workspace directories, both built using the HTML5 Polite Banner. 

Included Workspace Files

Icons Template

      Filename

Description

config.js

Sizmek Ad Manifest file

images/DefaultImage300x250.gif

Social Share Demo Backup image

images/social

Social Share Network icons and Features images

index.html

Social Share Demo HTML file

scripts/socialShare.js

Social Share Feature Javascript file

styles/styles.css

Social Share Feature Stylesheet

Panel Template

      Filename

Description

config.js

Sizmek Ad Manifest file

images/DefaultImage300x250.gif

Social Share Demo Backup image

images/social

Social Share Network icons and Features images

index.html

Social Share Demo HTML file

scripts/socialShare.js

Social Share Feature Javascript file

styles/styles.css

Social Share Feature Stylesheet

  

Implementing the Ad Feature

How to Add the Ad Feature to your Workspace Code

Prerequisite

Before you begin, make sure you have the following resources available:

  • HTML5 Social Share Ad Feature Files.
Procedure

The following steps illustrate how to add the Social Share Ad Feature to your creative Workspace.

  1. Add the Sizmek AdKit include to the head of your index.html file.

    Note: The file path has been shortened for simplification.


    <script type="text/javascript" src="http://ds.serving-sys.com…/adkit.js"></script>

  1. Include Social Share Javascript File.

    <script type="text/javascript" src="scripts/socialShare.js"></script>

  1. Include Social Share Stylesheet. 

    <link type="text/css" rel="stylesheet" href="styles/styles.css"/>

  1. Add and edit the following code to your HTML file's body element. 

    <script type="text/javascript">
var feature_Config = {
options: {
Facebook: true,
Twitter: true,
Google: true,
Pinterest: true,
Tumblr: true,
Share_Url: 'http://www.sizmek.com',
Share_Twitter_Text: 'Additional Text here',
Share_Pinterest_Img_Location: 1,
Share_Pinterest_Img: 'images/social/sizmek_logo.gif',
Share_Pinterest_Desc: 'This is a test for the Sizmek Social Share Feature',
Share_Tumblr_Img_Location: 1,
Share_Tumblr_Img: 'images/social/sizmek_logo.gif',
Share_Tumblr_Caption: 'This is a test for the Sizmek Social Share Feature',
template: 'icons',
width: 175,
height: 45,
pX: 115,
pY: 195
}
};

var new_Share = new SocialShare (feature_Config);

</script>

Social Share Configurations

Message

Parameters

Description

Facebook

Boolean

Determines whether or not a Facebook share button is included.

Twitter

Boolean

Determines whether or not a Twitter share button is included.

Pinterest

Boolean

Determines whether or not a Pinterest share button is included.

Tumblr

Boolean

Determines whether or not a Tumblr share button is included.

Share_Url

String

Defines the URL you wish to share on Facebook, Twitter, and Google

Share_Pinterest_Img_Location

Number

1 or 2 – Enter 1 if the image you want to pin is a Workspace asset or 2 if you’re entering a URL to an image.

Share_Pinterest_Img

String

Enter Asset id number if using an asset for Pinterest Image or the absolute path to the image if using a URL.

Share_Pinterest_Desc

String

Enter a description for Pinterest

Share_Tumblr_Img_Location

Number

1 or 2 – Enter 1 if the image you want to share is a Workspace asset or 2 if you’re entering a URL to an image.

Share_Tumblr_Img

String

Enter Asset id number if using an asset for Tumblr Image or the absolute path to the image if using a URL.

Share_Tumblr_Caption

String

Enter a caption for your Tumblr image.

width

Number

Width of the div in which the buttons will reside.

height

Number

Height of the div in which the buttons will reside.

pX

Number

The X Position of the Share Button div
pY

Number

The Y Position of the Share Button div
iWidth

Number

The width of the inner div in which the Share button reside. If left empty, Share Buttons will center to Share Panel Width and Height. 

Setting up the Social Share Ad Feature in the Sizmek Platform

Sizmek MDX2.0 Setup

Archive the Social Share workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

  1. Zip and upload the HTML5 Workspace Folder found in the template folder.
  2. Log into the MDX2.0 Platform.
  3. Click on ManageCreative Assets, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the format type drop-down.
  8. Choose the HTML5 Workspace Folder you uploaded to platform.
  9. Save

Sizmek Sizmek Advertising Suite Setup

  1. Zip the HTML5 Workspace Folder found in the template folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click the Creative menu item > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click the Creative menu item > Ads and click the New Ad button and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format drop-down.
  8. Under Main Assets select the Workspace folder and default image.
  9. Click Save

Custom Interactions

Interaction Name

Description

FACEBOOK_CLICKED

Facebook button has been clicked

TWITTER_CLICKED

Twitter button has been clicked

PINTEREST_CLICKED

Pinterest button has been clicked

TUMBLR_CLICKED

Tumblr button has been clicked

 

Important Notice

While not included in this Feature, it is advised that a separate redirect page is used as the Share URL instead of the intended url you want to share. Within this redirect page, meta tags can be used to customize the post on certain social networks, such as Facebook. Below are the suggested meta tags.


    <!-- Meta Tags for Facebook -->
    <!-- Include to customize the post title -->
    <meta property="og:title" content="Post Title"/>
    <!- Include to customize the post  Description -->
    <meta property="og:description" content="Post Description"/>
    <!--  This should be the URL you want to share -->
    <meta property="og:url" content="Post URL"/>
    <!--  Include to customize the post image -->
    <meta property="og:image" content="Post Image"/>
    <!--  Determines the type of post -->
    <meta property="og:type" content="article" />
    <!-- Meta tags for Twitter -->
    <!-- Determines the type of post, important for layout -->
    <meta name="twitter:card" content="summary_large_image" />
    <!-- This should be the URL you want to share   -->
    <meta name="twitter:url" content="Post URL" />
    <!-- Include to customize the post title  -->
    <meta name="twitter:title" content="Post Title"/>
    <!-- Include to customize the post description -->
    <meta name="twitter:description" content="FB Descr"/>
    <!-- Include to customize the post image -->
    <meta name="twitter:image:src" content="Post Image" />

Change Log

November 29, 2016

  • Migrated to the Sizmek Advertising Suite

March 08, 2016

  • Updated for AdKit
  • Added Feature Tracking 

December 04, 2014

Initial Release

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments