Social Plugins - docs.day.com

Social Plugins
Social Plugins
Overview / Adobe Experience Manager / Adobe Experience Manager 6.0 / Administering / Social Communities /
The use of social plugin components in AEM Social Communities allows marketers to strengthen the
connection between their digital properties and social networks by enabling customers to share content with
friends.
CAUTION
Social Plugins may not display properly when:
• the server is not accessible to Facebook or Twitter
• the server is accessed using an IP address or localhost
• the server is accessed using a port other than 80
You may experience clipping or loss of functionality in these scenarios.
Configure the Link Externalizer
During the process of configuring domains (URLs) for social plugins, it is often an option to leave empty to
use current page.
This option is especially useful when adding the plugins to multiple pages or page templates.
To leverage this feature, the Link Externalizer must be properly configured to transform resource paths into
externally accessible absolute paths.
To configure the Externalizer:
Begin by navigating to the Web Console, to locate and open for edit, the service Day CQ Link Externalizer.
The properties of the Externalizer configuration are :
• Domains
Mapping of standard externalizer names (local, author, publish) and, optionally, custom externalizer
names to prepend to resource paths. Default entries are for development (localhost) :
• local http://localhost:4502
• author http://localhost:4502
• publish http://localhost:4503
• Host name
(Deprecated) Leave empty
• Context path
(Deprecated) Leave empty
Enable Social Plugin Components for Authoring
To enable Communities components for authoring, start by following these instructions :
• Accessing Social Communities Components
The social plugin components in the Communities component group are :
• Facebook :
• Facebook Activity Feed
• Facebook Comments
• Facebook Facepile
• Facebook Like Button
• Facebook Send Button
• Twitter :
• Twitter Follow Button
• Twitter Search
• Twitter Share Button
Facebook Activity Feed
1. Drag the Facebook Activity component from the sidekick to the target location.
2. Edit the component.
3. Configure the settings, as necessary.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 1
Created on 2014-11-21
Social Plugins
4. Click OK to preview the component.
Example Facebook Activity Feed Configuration
Example Facebook Activity Feed
NOTE
Additional information is available at https://developers.facebook.com/docs/reference/plugins/
activity/.
Facebook Comments
1.
2.
3.
4.
Drag the Facebook Comments component from the sidekick to the target location.
Edit the component.
Configure the settings, as necessary.
Click OK to preview the component.
Example Facebook Comments Configuration
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 2
Created on 2014-11-21
Social Plugins
Example Facebook Comments
NOTE
Additional information is available at https://developers.facebook.com/docs/reference/plugins/
comments/.
Facebook Facepile
1.
2.
3.
4.
Drag the Facebook Facepile component from the sidekick to the target location.
Edit the component.
Configure the settings, as necessary.
Click OK to preview the component.
Example Facebook Facepile Configuration
Example Facebook Facepile
NOTE
Additional information is available at https://developers.facebook.com/docs/reference/plugins/
facepile/.
Facebook Like Button
1.
2.
3.
4.
Drag the Facebook Like Button component from the sidekick to the target location.
Edit the component.
Configure the settings, as necessary.
Click OK to preview the component.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 3
Created on 2014-11-21
Social Plugins
Example Facebook Like Comment Configuration
Example Facebook Like Button
NOTE
Additional information is available at https://developers.facebook.com/docs/reference/plugins/
like/.
Facebook Live Stream
1.
2.
3.
4.
Drag the Facebook Live Stream component from the sidekick to the target location.
Edit the component.
Configure the settings, as necessary.
Click OK to preview the component.
Example Facebook Live Stream Configuration
Example Facebook Live Stream
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 4
Created on 2014-11-21
Social Plugins
NOTE
Additional information is available at https://developers.facebook.com/docs/reference/plugins/livestream/.
Facebook Send Button
1.
2.
3.
4.
Drag the Facebook Send Button component from the sidekick to the target location.
Edit the component.
Configure the settings, as necessary.
Click OK to preview the component.
Example Send Button configuration
Example Send Button
NOTE
Additional information is available at https://developers.facebook.com/docs/reference/plugins/
send/.
Twitter Follow Button
1.
2.
3.
4.
Drag the Twitter Follow Button component from the sidekick to the target location.
Edit the component.
Configure the settings, as necessary.
Click OK to preview the component.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 5
Created on 2014-11-21
Social Plugins
Example Twitter Follow Configuration
Example Twitter Follow Button
NOTE
Additional information is available at https://twitter.com/about/resources/buttons#follow.
Twitter Search
NOTE
In order to use the Twitter Search plugin, you must install a hotfix: cq-5.6.1-hotfix-3408.
You also have to execute the following steps, or the Twitter Search widget will not be displayed.
1.
2.
3.
Navigate to to https://twitter.com/settings/widgets.
Create new widget and select type Search.
Add a Search Query, select preferences and save the widget.
NOTE
If the Twitter search is for more than one tweeter, it is recommended to create a List
for the search query instead of entering each search member individually. This is
to prevent search results from being reported as "No tweets found..." when only one
tweeter has not tweeted within the last week or so, even though there were tweets from
others.
To create a List, while logged into Twitter, select Lists from the Settings icon or your
home page and click the Create list button.
4.
Grab the ID from the URL bar, which will look like this: https://twitter.com/settings/widgets/123456789/
edit/....
5.
6.
7.
In AEM, drag the Twitter Search component from the sidekick to the target location.
Click Edit.
Enter your Widget ID and click OK. You should now see a preview of the Twitter Search widget.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 6
Created on 2014-11-21
Social Plugins
Example Twitter Search configuration
Example Twitter Search design
Follow these steps to edit the design:
1.
2.
3.
4.
Navigate to the target page.
In the sidekick, click the option to switch to the Design mode.
Click the option to edit the design of the twittersearch component.
Select the desired style and click OK.
Example Twitter Search
When you publish the Twitter Search component, the style you applied, such as the Shell Background
color, will not automatically be applied when you click Activate Page in the Sidekick. To resolve this issue,
use the Tree Replication tool at http://localhost:4502/etc/replication.html, and specify the design for the
Twitter Search component using this CRXDE path:
/etc/designs/geometrixx-outdoors/jcr:content/page_home/par/twittersearch.
NOTE
Additional information is available at https://twitter.com/about/resources/widgets/widget_search.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 7
Created on 2014-11-21
Social Plugins
Twitter Share Button
CAUTION
The Twitter Share button will only allow users to share public facing urls. If the url is not public
facing e.g. localhost, it will not be displayed.
1.
2.
3.
4.
Drag the Twitter Share Button from the sidekick to the target location.
Edit the component.
Configure the settings, as necessary.
Click OK to preview the component.
Example Share Button Configuration
Example Share Button
NOTE
Additional information is available at https://twitter.com/about/resources/buttons#tweet.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 8
Created on 2014-11-21