Adding a favorite button
MB Favorite Posts is a solution of Meta Box for users saving a post to their Favorite lists. This solution provides you with all the needed tools and features to add a Favorite button. This tutorial will show how!
Video version
Preparation
These are the tools we need for this practice:
- Meta Box: to have a framework to use its solution;
- MB Favorite Posts: to create a favorite button.
After activating the MB Favorite Posts solution, a favorite button will automatically appear on the posts of your site like this:
In default, this button is named as Add to Favorites, and shown at the end of the content section of your blog posts. Of course, you can change its name, display position, and ask users to log in before using this button. In particular, you can add a page for users to sign up for a new account or see the list of their favorite posts.
To set up the Favorite button, go to Settings > Favorite Posts.
For each side, there are 3 tabs of settings:
- General: for general settings such as Position, Post Types,...
- Button: for button styles and content such as change text, color, or font-size
- Icon: show/hide icon and change parameter
General settings
Pre-built styles
You can change the style for the button. We create 3 predefined styles for you to choose from:
- Default: which has a form of a button
- Like: a simple like icon (similar to Facebook like button)
- Rounded: a rounded button with an icon only
Enabling for non-logged in users
This option is chosen as default. However, if users do not log in, their favorite posts list will be temporarily saved in the cookie of the browser, and will be lost when the cookie is deleted.
To avoid these annoying cases, you had better allow users to create an account and save their favorite posts list in their account.
First, untick the Enable for non-logged in users option > Register Page section:
If you’ve had a register page already and want to use it, just leave the Register Page box blank. Then anyone logging in to their accounts with any roles can use the favorite button.
Or you can create a new blank page.
After that, in the Register Page section, you will see the page you have just created in the dropdown list as below:
MB Favorite Posts will automatically add fields to this register page with a form.
Position
Choose where to display the favorite button as you want by this setting. To choose its location on a single post page, you just have to choose 1 of these 3 options in the Position section on the setting page like this:
If you want to display the Favorite button in the posts of a certain post type, tick to choose that post type in the Post Types section.
Moreover, you can show the favorite button at other positions on a single post or a random page if you want. Just refer to the code in the Shortcodes section.
For example, I added my favorite button to the sidebar of the my website by going to Appearance > Widgets and add a Shortcodes to paste the shortcode as follow:
Dashboard Page
It is a page where users review their list of favorite posts. 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 posts list. In case, users choose a post as their favorite, it will be shown on this Dashboard Page.
Finally, you need to display your Favorite Posts page on your website to help users access it easily. I will set it on my menu as an example.
When going to the Favorite Posts page, you will see a list of favorite posts display like this:
Button settings & Icon settings
Button and Icon tabs in the settings of the MB Favorite Posts solution are so easy to set up. They allow you to customize the style for all elements of the button, such as text, size, color, etc. It also provide a live preview for the bottom, so you can easily set up the button and icon as you want.
