How to Add a Favorite Button with MB Favorite Posts Solution
Tags: wordpress
Published: 2021-04-27 03:28:14

Do you want to add a button for users to save a post to their Favorite lists, and then read it again? MB Favorite Posts solution of Meta Box is surely a useful tool for you to do this simply and quickly.

<!--more-->

MB Favorite Posts is a solution of Meta Box for users having bought <a href="https://metabox.io/pricing/">lifetime bundles</a> of Meta Box. This solution provides you with all the needed tools and features to add a Favorite button. Using it, users can choose their favorite posts to save in their own lists. More than that, users can access their lists to read the posts they like one more time. MB Favorite Posts solution can <strong>automatically create a Favorite button</strong>, and you can <strong>customize it easily</strong>.

To get started, let’s see through some impressive benefits of Favorite buttons.
<h2>Why to Use a Favorite Button?</h2>
A Favorite button can help you in many cases. Using this button, you can <a href="https://gretathemes.com/optimize-wordpress-website-increase-conversions/" rel="follow">improve the conversion rate</a>, sale, interaction, … and especially users’ experience. For example:
<ul>
 	<li>For eCommerce websites: Customers can <strong>save their interested products</strong>, then come back to search and buy them in the next shopping time.</li>
 	<li>Readers can <strong>save posts / documents / novels / helpful contents</strong>, then they can get back to the exact position they finished reading the last time.</li>
</ul>
Here is an eCommerce website using Favorite buttons (the heart-shaped), so that their users can add their preferred products.

<img class="aligncenter" src="https://i.imgur.com/4jX9UMY.gif" alt="an eCommerce website using Favorite buttons" />
<h2>Install Meta Box Plugin</h2>
Now I will add a favorite button on my blog sites (on single post pages). Once users read my blogs, they can click this button to save their favorite posts for the next reading time, if they find them helpful.

As I have said before, I will use MB Favorite Posts solution of Meta Box. This solution is super easy to use, and I can work on it without configuring or coding. Besides, you also can quickly set up many options for the Favorite button on one and only Settings page.

First, you need to install and activate Meta Box plugin:

<img class="aligncenter" src="https://i.imgur.com/bBo6YV3.png" alt="install and activate Meta Box plugin" />

Next, go to your <a href="https://metabox.io/my-account/">My Account</a> on <a href="https://metabox.io/">metabox.io</a>, then download MB Favorite Posts solution. Upload the .zip file you have just downloaded to the website like you usually do to <a href="https://gretathemes.com/install-wordpress-plugin/" rel="follow">install plugins</a>.

<img class="aligncenter" src="https://i.imgur.com/d3XL2S0.png" alt="Upload the .zip file of MB Favorite Posts solution" />

After activating the solution, a favorite button will automatically appear on the posts of your website. You can randomly go to a post to check it out, and the favorite button will come to you like this:

<img class="aligncenter" src="https://i.imgur.com/8aCZVvb.png" alt="a favorite button shows up on the posts of your WordPress website" />

In default, this button is named as <strong>Add to Favorites</strong>, and shown at the end of the content section. Of course, you can change its name, display position, and ask users to log in before using this button. Especially, you can add a page for users to sign up for a new account or see the list of their favorite posts
<h2>Set Up the Favorite Button</h2>
To set up the Favorite button, go to <strong>Settings</strong> &gt; <strong>Favorite Posts</strong>.
<h3>Rename</h3>
On this settings page, you just have to type the name of the button in the <strong>Button text</strong> and <strong>Button Added Text</strong> section, like in the image below:

<img class="aligncenter" src="https://i.imgur.com/IHIgH4U.png" alt="type the name of the Favorite button" />
<h3>Relocate the Favorite Button</h3>
You can freely choose where to display the favorite button as you want.

To choose its location on a single post page, you just have to choose 1 of these 3 options in the <strong>Position</strong> section on the setting page like this:

<img class="aligncenter" src="https://i.imgur.com/YjoiyX9.png" alt="choose where to display the button" />

<strong>Note</strong>: If you want to display the Favorite button in the post of a certain post type, tick to choose that post type in the <strong>Post Types</strong> section.

<img class="aligncenter" src="https://i.imgur.com/zVJjzkB.png" alt="display the Favorite button in the post of a certain post type on the WordPress website" />

To show the favorite button at other positions on single post pages or a random page, you can use this shortcode: <code>[mbfp-button]</code>.

For example, I have added my favorite button to the sidebar of the WordPress website by going to <strong>Appearance</strong> &gt; <strong>Widgets</strong>, adding a <strong>Text</strong> widget to the <strong>Sidebar</strong> then paste the shortcode there:

<img class="aligncenter" src="https://i.imgur.com/r7jSbkE.png" alt="Use shortcode to add a favorite button to the sidebar of the WordPress website" />

And here is the result:

<img class="aligncenter" src="https://i.imgur.com/iRJnEjB.png" alt="the like button shows up on the sidebar of the WordPress website" />
<h3>Ask Users to Log in to Use the Favorite Post Feature</h3>
After installing, the <strong>Enable for non-logged in users</strong> feature will be enabled by default.

<img class="aligncenter" src="https://i.imgur.com/1Sy8fbx.png" alt="allow non-logged in users to use the Favorite Posts feature" />

But if users do not log in, their favorite post list will be <strong>temporarily saved in the cookie of the browser</strong>, and will be lost when the cookie is deleted. After a period of time, or when users have deleted cookies, they cannot find out their favorite posts anymore.

To avoid these annoying cases, you had better allow users to create an account and save their favorite post list in their account.

First, untick the <strong>Enable for non-logged in users</strong> option and then go to the <strong>Register Page</strong> section:

<img class="aligncenter" src="https://i.imgur.com/tK61j2o.png" alt="Ask Users to Log in to Use the Favorite Post Feature" />

If you have had a register page already and want to use it, just leave the <strong>Register Page</strong> box blank. Then anyone logging in to their accounts with any roles can use the favorite button.

If you’ve had a register page, you can create a blank page.

<img class="aligncenter" src="https://i.imgur.com/CfUeg5y.png" alt="create a blank page on the WordPress website" />

After that, in the <strong>Register Page</strong> section, you will see the page you have just created in the dropdown list like in the image below:

<img class="aligncenter" src="https://i.imgur.com/OdePr11.png" alt="create a Register page on the WordPress website" />

You just have to choose the page you have created and click <strong>Save Settings</strong>. MB Favorite Post will automatically add fields to this register page with a form like this:

<img class="aligncenter" src="https://i.imgur.com/xaG7xnE.png" alt="MB Favorite Post automatically add fields to the register page" />

You can use CSS to make this form more stunning.

When users sign up for a new account on this page, their User Role is <strong>Subscriber</strong> by default.
<h3>Set Up Dashboard Page</h3>
Dashboard Page is a page where users review their list of favorite posts. You can choose a random page to turn into Dashboard Page. When users choose a post as favorite, it will be shown on this Dashboard Page.

Here I create a page as <strong>Favorite Posts</strong> and choose it in the <strong>Dashboard Page</strong> section in the settings page of MB Favorite Posts.

<img class="aligncenter" src="https://i.imgur.com/eR1DdFL.png" alt="Create a dashboard page" />

<strong>Note</strong>: Even when you choose to allow non-logged in users to use this feature, you still have to choose the Dashboard page as a certain page, so that users have a place to see their favorite post list.

Finally, you need to display your <strong>Favorite Posts</strong> page on your website to help users access it easily. I will set it on my menu as an example.

<img class="aligncenter" src="https://i.imgur.com/ED6Bi4u.png" alt="display your Favorite Posts page on the WordPress website" />

When going to the <strong>Favorite Posts</strong> page, you will see a list of favorite posts display like this:

<img class="aligncenter" src="https://i.imgur.com/05xS8q7.png" alt="a list of liked posts on the dashboard page" />
<h2>Tutorial Video</h2>
https://youtu.be/fSFmNp-Ayew
<h2>Last Words</h2>
As you can see, MB Favorite Posts solution of Meta Box can provide you with enough tools to add the Favorite Post feature to your websites. It even can create a register page for you. Everything becomes so effortless with this solution, isn’t it?

Beside MB Favorite Posts, Meta Box team also develops other solutions like <a href="https://metabox.io/plugins/mb-testimonials/">MB Testimonials</a> and <a href="https://metabox.io/plugins/mb-user-avatar/">MB User Avatar</a> with the same way of using. All of these solutions are made to support website developers to add more interesting and helpful features within a few clicks. You can read how to use these tools <a href="https://metabox.io/product-category/solutions/">here</a>. However, keep in mind that they are for users having the Lifetime bundle of Meta Box only.

Good luck with your websites!