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"/>

Last edited Jun 12, 2012 at 12:05 PM by grzwie, version 58

Comments

No comments yet.