Adding Subscribe/Unsubscribe button to a page
ActivityFeedSubscribeButton is a web control that is used to subscribe for a topic by the
logged user. By default control is displayed as link.
Topic is passed to the control as required string property
Topic.
Note: Subscribing for topic by user different than current user is possible through API: Subscribing/Unsubscribing users for updates.
<af:ActivityFeedSubscribeButton runat="server" Topic="CustomTopic1"/>
Note: Control will not check if the topic exists in target system.ActivityFeedSubscribeButton works in two modes:
- Follow - enable when current user doesn't follow topic. After clicking link, user will be following topic.
- Unfollow - enable when current user follows topic. After clicking link, user will stop following topic.
There are also two additional properties exposed in control:
FollowText and
UnfollowText. They are used to setup displayed texts of link.
Customizing button markup
To define custom layout template of link, nested controls of ActivityFeedSubscribeButton are used.
<af:ActivityFeedSubscribeButton runat="server" Topic="CustomTopic2">
<span class="subscribe">My custom Follow text</span>
<span class="unsubscribe">My custom Unfollow text</span>
</af:ActivityFeedSubscribeButton>
When ActivityFeedSubscribeButton works in Follow mode then only
_af-subscribe-button class is added to link.
<a class="_af-subscribe-button">
<span class="subscribe">Follow</span>
<span class="unsubscribe">Unfollow</span>
</a>
In Unfollow mode, there is also
subscribed class is added to link.
<a class="_af-subscribe-button subscribed">
<span class="subscribe">Follow</span>
<span class="unsubscribe">Unfollow</span>
</a>
After user clicked follow/unfollow link and before response came back from server to browser, the
busy class is added to link.
<a class="_af-subscribe-button subscribed busy">
<span class="subscribe">Follow</span>
<span class="unsubscribe">Unfollow</span>
</a>
Based on those classes, it's easy to manipulate the button markup.
._af-subscribe-button .unsubscribe {
display: none;
}
._af-subscribe-button.subscribed .subscribe {
display: none;
}
._af-subscribe-button.subscribed .unsubscribe {
display: inline;
}
._af-subscribe-button.busy {
opacity: 0.5;
}
Note: When custom layout is defined, then FollowText and UnfollowText properties are not used.
Adding the button using jQuery plugin
Subscribe/Unsubscribe button can be created using jQuery without placig ASP.NET web control. The jQuery extension syntax is:
$('#targetElement').subscribeUnsubscribeButton();
The followed
Topic is stored in
data-topic attribute of target element. This is required attribute.
<a data-topic="CustomTopic3"/>