-
null
The documentation set for this product strives to use bias-free language. For the purposes of this documentation set, bias-free is defined as language that does not imply discrimination based on age, disability, gender, racial identity, ethnic identity, sexual orientation, socioeconomic status, and intersectionality. Exceptions may be present in the documentation due to language that is hardcoded in the user interfaces of the product software, language used based on RFP documentation, or language that is used by a referenced third-party product. Learn more about how Cisco is using Inclusive Language.
This chapter provides an overview of the various social modules and their functions.
The social modules enable you to provide your customers access to various social networking sites from your site. There are modules that connect the customers to Facebook and Twitter. In addition, the modules like Share enables the end users to share the URL using social networking sites, SMS, and e-mails.
This section provides detailed description of the following Social modules:
The Facebook Comments module is a social plug-in that enables the end user to place comment on a specific URL or in a page where the module is placed. The user can also respond to a discussion by liking or replying to the available comments.
The site producer can use this module to enable commenting on various pages of a site that can contain stories, videos or photos.
For example, an advertising agency or a publishing house would like to display a comments box on their pages to get to know feedback from readers or users. This module integrates the Facebook commenting system to their site.
This module can be viewed only on touch devices.
Note This module can be used only for web sites.
Using this module, the end user can:
For example, if an end user selects the Post to Facebook option in the comments box, the comment made on a site page for the configured URL is shared on their Facebook profile as well.
To configure the Feedback Comments module, perform the following steps:
Step 1 In the Modules panel, enter Feedback Comments. The Feedback Comments module appears in the Modules panel.
Step 2 Drag and drop the Feedback Comments module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Note Ensure that you place this module at the end of your page or mobile website, so that the content below this module remains unaffected. When you use the Facebook Comments module, sometimes, extra white space appears under the module. Hence, it is highly recommended that you place this module under or at the end of the page than somewhere in the middle. When you click View more comments, the white space automatically keeps decreasing.
The Main properties enable you to configure the basic properties of this module. The following is the list of Facebook Comments Main properties.
|
|
---|---|
The URL of the page for which comments can be entered by end users. Note If the user has not configured any URL, then the module takes the current page URL. |
|
The Background properties enable you to specify the background for this module. The following is the list of Facebook Comments Background properties.
The Border properties enable you to specify the border details for the Facebook Comments. The following is the list of Facebook Comments Border properties.
The Padding and Margin properties enable you to specify the padding and margin properties for the module. The following is the list of Facebook Comments Padding and Margin properties.
|
|
---|---|
The space that you want to leave between the content and the module boundary. |
|
The amount of space required between the module boundary and the sides of device screen. |
The Facebook Like module enables you to add the Facebook Like button in a page of your mobile site. For example, in an article details page the end user can click this button to like the content on that page. The Like button can also take an external URL if you want the user to like a specific URL regardless of its location. When the end user click the button, a link to your mobile site or page appears in the end user's Facebook wall as their favorite page.
Before using the Facebook Like module, you must create a Facebook app that links to the publisher's site containing the Facebook Like functionality.
After you drag and drop the Facebook Like module on your mobile site, you may also want to know how the users are interacting with the social plug-in. For this, you need to integrate your site into Facebook's Open Graph and set up Insights, Analytics tool. For more information, see the “Setting Open Graph Tags” section.
Note This module can be used only for web sites.
To configure the Facebook Like module, perform the following steps:
Step 1 In the Modules panel, enter Facebook Like. The Facebook Like module appears in the Modules panel.
Step 2 Drag and drop the Facebook Like module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
Open Graph tags are <meta> tags that you can add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, and so on.
The Open Graph Protocol enables you to integrate your web pages into the social graph. It is currently designed for web pages representing profiles of real-world things like movies, sports teams, celebrities, and restaurants. When a user clicks a Like button on your page, a connection is made between your page and the user’s Facebook profile. Your page appears in the Likes and Interests section of the user's profile, and you have the ability to publish the updates to the user. Your page shows up in the same places that Facebook pages show up around the site (for example: search), and you can target ads to people who like your content. The structured data you provide through the Open Graph Protocol defines how your page is represented on the Facebook.
To get values for Open graph tags, you need to create a Facebook application.This will give you an Application ID. The application ID links the site or page which contains the Facebook Like button.
Note The app ID is a unique identifier for your site that ensures that you have the right level of security in place between the user and your site. To use the authentication methods, your app must be configured with an App Domain.
After the application is created, the app ID is shown below the application name. Your app ID is the value that you must use to integrate your website with Facebook.
Note When you test this feature on a draft site, you use the draft site URL. After the site has been made live, you should update the live URL into this field.
After you have successfully set up your site as an application object in Facebook’s Open Graph, you need to add the appropriate <html> and Open Graph meta tags to your site pages.
These meta tags communicate to the Facebook APIs the information necessary to integrate your website with the Open Graph protocol. Facebook calls this turning your web pages into graph objects. The tags must be placed within the <head> </head> tags of your HTML file.
<meta property="og:title" content="Test 1" />
<meta property="og:type" content="cafe" />
<meta property="og:url" content="http://in.yahoo.com/?p=us" />
<meta property="og:image" content=" http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg />
The Admin ID or fb:admins is a Facebook user’s numeric Facebook ID.
To get this, perform the following steps:
Step 1 Go to www.facebook.com/[username].
Step 2 Enter graph instead of “www”.
Each Open Graph object page with a Like Button should now include the following Open Graph markup:
<meta property="fb:app_id" content="[FB App ID]" />
For developers who need to use the admin page functionality to publish updates to users, ensure that the Open Graph object page includes the following.
<meta property="fb:app_id" content="[FB App ID]" />
<meta property="fb:admins" content="[FB UIDs of FB App Admins]" />
Later, you can see the analytics from the URL, http://www.facebook.com/insights/
Note You can use the same APP ID and ADMIN ID to configure all the LIKE buttons across your site. The configured Facebook Like button can be saved and reused. On Facebook, you can view the number of Likes associated with your app.
Note You can use one facebook app ID for all your sites, and all the Likes across all the sites are registered against that Facebook app.
After you get the above details and configure the values in Studio, if a user Likes any article or post then it appears in the Facebook time line. After somebody likes your post or content then it is automatically shown in the insights section.
Note For Facebook pages like www.facebook.com/ndtv, you do not have to configure the metatags.
The Main properties enable you to specify the basic properties of this module. The following is the list of Facebook Like Main properties.
The Layouts properties enable you to specify the style and alignment for the Facebook Like button. The following is the list of Facebook Like Layout properties.
The Open Graph Tags properties enable you to specify the open graph configurations required. The following is the list of Facebook Like Open Graph properties.
The Background properties enable you to specify the background color for the Facebook Like button.The following is the list of Facebook Like Background properties
The Border properties enable you to specify the border details for the Like button. The following is the list of Facebook Like Border properties.
|
|
---|---|
The border color for the area where the Like button appears. |
|
To apply a rounded corner effect to the corners of the border: |
|
The Padding and Margin properties enable you to specify the padding and margin values. The following is the list of Facebook Like Padding and Margin properties.
The Facebook Like Box module enables users to like your Facebook Page and view its stream directly from your site.
You need to create a Facebook page to use this module. This module can be viewed only on Touch Devices.
The Facebook Like Box module enables the Facebook page owners to attract and gain Likes for their Facebook page from any of their sites. The module enables you to show or hide faces, stream and header.
The Facebook Like Box enables users to do the following:
Note This module can be used only for web sites.
To configure the Facebook Like Box module, perform the following steps:
Step 1 In the Modules panel, enter Facebook Like Box. The Facebook Like Box module appears in the Modules panel.
Step 2 Drag and drop the Facebook Like Box module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
The Main properties enable you to specify the basic module details. The following is the list of Facebook Like Box Main properties.
|
|
---|---|
The Layout properties enable to configure the layout for the module. The following is the list of Facebook Like Box Layout properties.
|
|
---|---|
The Background properties enable you to specify the background properties for the Facebook Like Box. The following is the list of Facebook Like Box Layout properties.
|
|
---|---|
The Border properties enable you to specify the border details for the Facebook Like Box. The following is the list of Facebook Like Box Border properties.
The Padding and Margin properties enable you to specify the padding and margin values. The following is the list of Facebook Like Box Padding and Margin properties.
With the ShareV2 module you can enable the end users to share the URL using social networking sites, SMS, and e-mails. The end users can share on social networking sites such as Facebook, Google+, Twitter, and Pinterest.
While users browse the websites, they can share certain URLs using various social networking sites or through SMS or e-mails. You can enable the users to share the URLs without having to configure the plug-ins individually. The ShareV2 module enables you to configure multiple social networking sites plug-ins in the same module.
Note This module can be used only for web sites.
This module offers the following use cases:
The ShareV2 module enables you to configure multiple social networking sites on your website. It enables you to select the social networking sites you want the end users to use.
To configure the ShareV2 module, perform the following steps:
Step 1 In the Modules panel, enter ShareV2. The ShareV2 module appears in the Modules panel.
Step 2 Drag and drop the ShareV2 module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
The Main properties enable you to specify the basic module details. The following is the list of ShareV2 Main properties.
By default, background properties apply to both touch and non-touch modes. The following is the list of ShareV2 Background properties.
The Border properties enable you to specify the border properties for the module.. The following is the list of ShareV2 Border properties.
|
|
---|---|
The value to apply a round corner effect at the bottom corner. |
The Padding and Margin properties enable you to specify the padding and margin values. The following is the list of ShareV2 Padding and Margin properties.
|
|
---|---|
The space between the content boundary and the module border. |
|
The space between the outer border and the sides of device screens. |
This module enables a user to display Tweets from an ID (or multiple IDs), topic (or multiple topics) or from a list (or multiple lists).
Before you begin to use the Twitter Buttons modules in your website, you need to have a valid Twitter account.
When a user browses your websites, the user may like to share an article or a story. The user may also want to follow a user account so that they get information from that account. This is possible with the use of Twitter buttons in your website.
The Twitter Buttons module offers the following use cases:
The following are the buttons that you can add to your website:
Note This module can be used only for web sites.
To configure the Twitter buttons module, perform the following steps:
Step 1 In the Modules panel, enter Twitter buttons. The Twitter buttons module appears in the Modules panel.
Step 2 Drag and drop the Twitter buttons module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
The Main properties enable you to specify the properties of buttons that you want to set on your website. The following is the list of Twitter Buttons Main properties.
|
|
---|---|
The Share a Link properties enable you to set optional parameters for the Share a Link button. The following is the list of Twitter Buttons Share a Link properties.
|
|
---|---|
The appropriate option to include either the page title or a specific text in the tweet text. |
|
The Follow properties enable you to specify the optional parameters for the Follow button. The following is the list of Twitter Buttons Follow properties.
|
|
---|---|
The Hashtag properties enable you to specify the optional parameters for the Hashtag button. The following is the list of Twitter Buttons Hastag properties.
|
|
---|---|
To include either the page title or a specific text in the tweet text. |
|
The user names that you want the users to follow.You can enter two user names. |
|
The Mention properties enable you to specify the optional parameters for Mention button. The following is the list of Twitter Buttons Mention properties.
|
|
---|---|
To include either the page title or a specific text in the tweet text. |
|
The user names that you want the users to follow. You can add two user names. |
The Background properties enable to specify the background properties for the Twitter buttons. The following is the list of Twitter Buttons Background properties.
The Border properties enable you to specify the border properties for the Twitter button. The following is the list of Twitter Buttons Border properties.
|
|
---|---|
The value for the top corner radius to give a rounded effect to the border. |
|
The value for the bottom corner radius to give a rounded effect to the border. |
The Padding and Margin properties enable you to specify the padding and margin values for this module. The following is the list of Twitter Buttons Padding and Margin properties.
|
|
---|---|
The space between the content boundary and the module boundary. |
|
The space between the outer border and the sides of device screens. |
This module enables a user to display Tweets from an ID (or multiple IDs), topic (or multiple topics) or from a list (or multiple lists).
The Tweets module has the following features:
Note This module can be used only for web sites.
To configure the Twitter Feed module, perform the following steps:
Step 1 In the Modules panel, enter Twitter Feed. The Twitter Feed module appears in the Modules panel.
Step 2 Drag and drop the Twitter Feed module into the Canvas. The Edit panel of the module opens.
Step 3 In the Edit panel of the module, specify the required values in the respective fields.
The Main properties enable you to specify the basic details of the module. The following is the list of Twitter Feed Main properties..
This option enables you to specify the twitter ID properties. The following is the list of Twitter Feed Tweeter ID properties.
|
|
---|---|
The Twitter ID of Tweets that you would like to display on the site. Click +Add ID to add multiple Twitter IDs. |
The Topic properties enable you to specify the properties of topics that you want to display. The following is the list of Twitter Feed Topic properties.
|
|
---|---|
The hashtag or keyword whose Tweets you want to display on the site. You can add multiple hashtags or keywords using the +Topic button. |
The Lists properties enable you to specify the list IDs. The following is the list of Twitter Feed Lists properties.
The Tweets properties enable you to specify the font properties for the tweet. The following is the list of Twitter Feed Tweets properties.
The Display Picture properties enable you to specify the picture properties. The following is the list of Twitter Feed Display Picture properties.
The Navigation properties enable you to specify the properties of the navigation links. The following is the list of Twitter Feed Navigation properties..
The Background properties enable you to specify the background properties of the module. The following is the list of Twitter Feed Background properties.
The Border properties enable you to specify the border properties for the module. The following is the list of Twitter Feed Border properties.
|
|
---|---|
The value for the top corner radius to give a rounded effect to the border. |
|
The values for the top and bottom corner radius to give a rounded effect to the border. |
The Padding and Margin properties enable you to specify the padding and margin values for the module. The following is the list of Twitter Feed Padding and Margin properties..
The Separator properties enable you to specify the properties of separators used between tweets. The following is the list of Twitter Feed Separators properties.