Recently, we were working on a social app of one of our clients. Their requirement was to add reactions feature in the app and especially Facebook Reactions. To integrate Facebook Reactions platform in the app was a great experience for our team. In this guide, we will give you a detailed information about integrating the Facebook Reactions platform in your iOS iPhone app.
Reactions are an extension of the Like Button to give people more ways to share their reaction to a post in a quick and easy way. The collection of Reactions includes Like, Love, Haha, Wow, Sad and Angry.
To ensure accurate and consistent use, never alter, rotate, embellish or attempt to recreate the Reactions. Never alter the proportions and shape of the Reactions (and surrounding UI) for any reason.
What are reactions?
Reactions are not emojis or individual icons, and they cannot be used in this way. It's important to show Reactions in the way they are intended to be used on Facebook - as a quick and easy way to express how you feel. Reactions are line-up of emoji that allow you to react to posts with six different animated emotions:Love, Haha, Wow, Sad, Angry, and, the classic Like.
When a Like simply won’t do
After years of requests for a “dislike” option, Its Reactions which give users a more nuanced way of expressing their sentiments to posts. Because let’s face it, some life events aren’t befitting of a Like (deaths, break-ups, disappointing election outcomes, etc.).
How do Reactions work?
Reactions work in the same way as the original Like button and appear on any post.To choose the reaction you want, simply hold down the Like button (or hover with your mouse if viewing from a desktop) and a menu will appear showing the six reactions.Once you add your reaction, it’s lumped together with the Likes and other reactions under the post. You can only add one reaction per post (e.g. you can’t Love and Haha a post at the same time).
Reactions design
An enormous, but perhaps less obvious part of Reactions’ success is owed to their design. Reaction’s design has two key principles:
What about dislikes?
Wondering why human beings doesn't make life easier for themselves by just giving into the many requests for a simple thumbs-down button?
“Binary ‘like’ and ‘dislike’ doesn’t properly reflect how we react to the vast array of things we encounter in our real lives
How do Reactions impact the feed?
“Over the past year we’ve found that if people leave a Reaction on a post, it is an even stronger signal that they’d want to see that type of post than if they left a Like on the post. So we are updating News Feed to weigh reactions a little more than Likes when taking into account how relevant the story is to each person.”
Steps to Implement Reactions in App:
Step1: Pod installation in App including the pod in pod file
pod 'Reactions'
Write the above code in pod file and run the command pod install
Step2 : Import the the Reaction module and Iimplement delegate method in your class where you want to use
"import Reactions" "ReactionFeedbackDelegate"Step3: Initialise the class:
"let myReaction = Reaction(id: "like", title: "Like", color: .black, icon: UIImage(named: "yourImageName")!)Step4 : Create an outlet of facebookReaction button , set the initial value and a Closure to notify the value of reaction has ben changed:
var reactionSelected: ((_ reactionName:String, _ cell: UITableViewCell) -> Void)?
@IBOutlet weak var facebookReactionButton: ReactionButton! {
didSet {
let selector = ReactionSelector()
selector.reactions = Reaction.facebook.all
facebookReactionButton.reactionSelector = selector
// React to reaction change
selector.addTarget(self, action: #selector(reactionDidChanged), for: .valueChanged)
facebookReactionButton.config = ReactionButtonConfig() {
$0.iconMarging = 4
$0.spacing = 4
$0.font = UIFont(name: "HelveticaNeue", size: 13)
$0.neutralTintColor = .black
$0.alignment = .centerLeft
}
facebookReactionButton.reactionSelector?.feedbackDelegate = self
}
}
public func reactionFeedbackDidChanged(_ feedback: ReactionFeedback?) {
let text = feedback?.localizedString
print("Text Is --- ",text ?? "")
}
"let myReaction = Reaction(id: "like", title: "Like", color: .black, icon: UIImage(named: "yourImageName")!)
facebookReactionButton.reaction = myReaction
facebookReactionButton.config.neutralTintColor = .black
facebookReactionButton.isSelected = false"
"self.facebookReactionButton.isUserInteractionEnabled = enable"
func reactionDidChanged(_ sender: ReactionSelector) {
let reactionID = sender.selectedReaction?.id
print("Selected Reaction -- ",sender.selectedReaction?.id ?? "Default")
reactionSelected?(reactionID ?? "like",self)
}
func setReactionsFor(_ feed:ActivityFeeds){
facebookReactionButton.isSelected = true
switch feed.reactionName {
case "haha":
facebookReactionButton.reaction = Reaction.facebook.haha
case "love":
facebookReactionButton.reaction = Reaction.facebook.love
case "wow":
facebookReactionButton.reaction = Reaction.facebook.wow
case "sad":
facebookReactionButton.reaction = Reaction.facebook.sad
case "angry":
facebookReactionButton.reaction = Reaction.facebook.angry
default:
/*Like*/
self.updateLikeStatusForFeed(feed)
}
}
[av_one_full first av_uid='av-ts5sbi']