Divi 文档

Using Media Sharing Buttons In Monarch

Using Media Sharing Buttons In Monarch
Encourage the sharing of media on media-centric websites such as Pinterest and Facebook.

An Overview Of Media Sharing Button Settings

Images are of the most shared content on the web and there is no reason you should miss out on letting your readers share your image-rich content with the world. Monarch auto detects all images within post content and even offers a custom shortcode to enable image sharing for any image on your site.
Choose Icon Style
Select Hover
This option allows you to choose from any of the available hover styles Monarch offers for Media Sharing Buttons. You can hover over any of the options to get an example preview of the hover effect. Once you decide on an option, just click to select any style and your section will be indicated by a green checkmark.
Choose Icon Shape
Select Shape
Monarch offers 3 shapes for your icon buttons: Squared, Rounded, and Circles. Combined with the styles mentioned above you can create a variety of great looking social buttons.
Display Settings
Icon Alignment
This option lets you select either ‘Left’ or ‘Centered’. Selecting left will display your button labels and/or share counts to the right of your network icons, creating a more horizontal button shape. Selecting ‘Centered’ will place your button labels and/or share counts below your network icons and center the button content, creating a taller button shape.
Number of Columns
Monarch offers 7 column width options. You can choose to have up to 6 equal width columns, or let your buttons take on an auto-width based on the width of your buttons’ content. No matter your selection, Monarch accommodates for small browser widths and adjusts your column selection for mobile devices.
Display Share Counts
Displaying share counts is a great way to show off how many times your pages have been shared and even a great way to encourage visitors to spread your content. This number will appear inside each button either to the right or below your network icons based on your ‘Icon Alignment’.
Minimum Count Display
Sometimes it is better to not show counts at all than it is to show that your content hasn’t been shared over a certain threshold. This setting allows you to set the minimum share count that Monarch will display in your media buttons. This is a great feature for new content that hasn’t had the opportunity to be shared for much time.
Display Total Shares
This share count will add up the shares across all displayed networks and display the total right above your buttons. This is a great way to show the totality of how popular a given page is.
Display Network Names
Check this box to display the network labels in your sharing buttons. These can be customized to whatever you wish. For example, you can choose to replace the Network Name ‘Twitter’ to something like ‘Tweet This’ or ‘Share This’.
Outer Text Color
If the option above is selected, this option will appear to allow you to choose your Outer Text Color. This setting will affect your Total Shares Count, and your Network Label and/or individual share count if you have selected circular buttons, which place button text outside the background color of your buttons. Using circular buttons with network names on with media sharing can be hard to optimize since the images across your website will contain an array of colors.
Remove Icon Spacing
By default, the media sharing buttons are spaced out with a small margin. Checking this option lets you remove the spacing between your icons for a whole new set of design possibilities.
Hide On Mobile Devices
If you wish to not display media sharing buttons on mobile devices you can check this box.
Color Settings
Use Custom Colors
By default, Monarch uses the default network colors, but for a more custom approach you can select your own button colors. If an option below is not defined, the default setting will be used for that element.
Background Color
This color picker will define the background color of your media sharing buttons.
Hover Background Color
This color picker will define the background color of your media sharing buttons when the user hovers over a button.
Icon Color
This color picker will define the color of your media sharing buttons’ icons.
Icon Color
This color picker will define the color of your media sharing buttons’ icons when the user hover over a button.
Post Type Settings
Global Setting
Monarch will auto detect any image within a blog post and automatically enable media sharing for those images.
Media Sharing Shortcode
Although Monarch will only auto detect images on blog posts, you can enable media sharing for any image on your site by wrapping it in the media sharing shortcode like so [et_social_share_media][/et_social_share_media]

How To Install Your Monarch WordPress Plugin

How To Install Your Monarch WordPress Plugin
Installing our plugins is a snap using the WordPress Dashboard plugin installer.

Download Your Plugin

To update your new plugin, you must first upload it to your WordPress website via the WordPress dashboard. When you download Monarch from the Elegant Themes Member’s Area, you will be be given a file called Monarch.zip. Some browsers (such as Safari on OSX) will automatically unzip that folder for you. In this case, you will need to re-size the Monarch folder by right clicking the folder and compressing it. Once you have located your Monarch.zip file, you are read to upload it to your WordPress website.
Log in to your WordPress Dashboard and click the Plugins > Add New link. This will bring you to the WordPress plugins page.
Upload Your Plugin

After the plugins page in your dashboard has loaded, locate the “Upload Plugin” button towards the top of the screen. Click this button to proceed to the next step.
Choose Your Plugin ZIP File

After clicking “Upload Plugin,” you will be taken to a new page where you can select the plugin that you would like to install. In this case, we will be installing the Monarch.zip file that you downloaded earlier. Click the “Choose File” button to open a local browser window.
Upload And Activate

You will need to browse your local machine and find the Monarch.zip file. You will often find it in your Downloads folder, but it depends on your browser settings. Once you have located the file, select it and click the Open button. Next click the “Install” button to install the Monarch.zip folder that you have just selected. After the plugin has been uploaded you will be taken to a confirmation page where you can activate the plugin. Click the “activate” button and you are good to go!

Using Inline Sharing Buttons In Monarch

Using Inline Sharing Buttons In Monarch
Don’t skip the basics. Monarch’s simple inline sharing buttons can be placed above and below your posts.

An Overview Of Inline Sharing Button Settings

Monarch dynamically detects where the content of your pages and posts begin and end so that it can automatically place social sharing buttons above or below your content. Place icons and share counts at the beginning of your content to show your readers how popular your posts are or place them at the bottom to encourage users to share your posts after reading.
Choose Icon Style
Select Hover
This option allows you to choose from any of the available hover styles Monarch offers for Inline Sharing Buttons. You can hover over any of the options to get an example preview of the hover effect. Once you decide on an option, just click to select any style and your section will be indicated by a green checkmark.
Choose Icon Shape
Select Shape
Monarch offers 3 shapes for your icon buttons: Squared, Rounded, and Circles. Combined with the styles mentioned above you can create a variety of great looking social buttons.
Display Settings
Choose Location
This dropdown lets you choose to display sharing buttons either above your content, below your content, or above and below your content.
Icon Alignment
This option lets you select either ‘Left’ or ‘Centered’. Selecting left will display your button labels and/or share counts to the right of your network icons, creating a more horizontal button shape. Selecting ‘Centered’ will place your button labels and/or share counts below your network icons and center the button content, creating a taller button shape.
Number of Columns
Monarch offers 7 column width options. You can choose to have up to 6 equal width columns, or let your buttons take on an auto-width based on the width of your buttons’ content. No matter your selection, Monarch accommodates for small browser widths and adjusts your column selection for mobile devices.
Display Share Counts
Displaying share counts is a great way to show off how many times your pages have been shared and even a great way to encourage visitors to spread your content. This number will appear inside each button either to the right or below your network icons based on your ‘Icon Alignment’.
Minimum Count Display
Sometimes it is better to not show counts at all than it is to show that your content hasn’t been shared over a certain threshold. This setting allows you to set the minimum share count that Monarch will display in your inline buttons. This is a great feature for new content that hasn’t had the opportunity to be shared for much time.
Display Total Shares
This share count will add up the shares across all displayed networks and display the total right above your buttons. This is a great way to show the totality of how popular a given page is.
Display Network Names
Check this box to display the network labels in your sharing buttons. These can be customized to whatever you wish. For example, you can choose to replace the Network Name ‘Twitter’ to something like ‘Tweet This’ or ‘Share This’.
Outer Text Color
If the option above is selected, this option will appear to allow you to choose your Outer Text Color. This setting will affect your Total Shares Count, and your Network Label and/or individual share count if you have selected circular buttons, which place button text outside the background color of your buttons. Your page’s background may be light or dark in color value — this option lets you make sure your text stands out on top of your background.
Remove Icon Spacing
By default, the inline icon buttons are spaced out with a small margin. Checking this option lets you remove the spacing between your icons for a whole new set of design possibilities.
Hide On Mobile Devices
If you wish to not display inline sharing buttons on mobile devices you can check this box.
Color Settings
Use Custom Colors
By default, Monarch uses the default network colors, but for a more custom approach you can select your own button colors. If an option below is not defined, the default setting will be used for that element.
Background Color
This color picker will define the background color of your inline sharing buttons.
Hover Background Color
This color picker will define the background color of your inline sharing buttons when the user hovers over a button.
Icon Color
This color picker will define the color of your inline sharing buttons’ icons.
Icon Color
This color picker will define the color of your inline sharing buttons’ icons when the user hover over a button.
Post Type Settings
Select Your Post Types
All post types that exist on your website will appear in the Post Type Settings, whether it is a post or page, a WooCommerce Product, a Project post from a portfolio plugin, etc. These are global settings that allow you to choose what kind of posts you would like your inline sharing buttons to appear on. Note that you can override any of these settings on a per post basis.

Importing and Exporting Your Monarch Settings

Importing and Exporting Your Monarch Settings
Building a new website? Import your settings from a previous install and skip the steup!

An Overview Of Importing and Exporting Your Monarch Settings

For those of you who are managing multiple websites or migrating to a new WordPress install, the import and export settings in the Monarch Dashboard make it extremely easy to either export your Monarch Settings or import Monarch Settings from one site to another. These options can be accessed by the import/export icon in top bar of the Monoarch Dashboard
Export Monarch Settings
You can export the Monarch settings from any site as a .json file. This allows you to easily import your Monarch configurations into any other site with Monarch installed and activated.
Import Monarch Settings
Just as easily, you can import Monarch settings from a .json file. This .json file can be obtained by exporting the settings from another site using the export steps described above.

An Overview Of Social Sharing Flyins

An Overview Of Social Sharing Flyins
Flyings are a great way to encourage sharing when visitors are most engaged with your post.

An Overview Of The Flyin Settings

Automatic Flyins are not only extremely easy to create with Monarch, but they are one of the most elegant ways to engage your users. Flys are either appear in the lower left or lower right corner of your visitors’ browsers and you can fully customize your flyin’s title, message, and display trigger.
Choose Icon Style
Select Hover
This option allows you to choose from any of the available hover styles Monarch offers for Flyin Sharing Buttons. You can hover over any of the options to get an example preview of the hover effect. Once you decide on an option, just click to select any style and your section will be indicated by a green checkmark.
Choose Icon Shape
Select Shape
Monarch offers 3 shapes for your icon buttons: Squared, Rounded, and Circles. Combined with the styles mentioned above you can create a variety of great looking social buttons.
Title
Input Custom Title
Give your Flyin a Custom title to further engage your readers.
Message
Input Custom Message
Give your Flyin a Custom message for a more detailed call to action, such as “Share this page with your friends. Thanks for stopping by!”.
Display Settings
Choose Location
You can choose to display social flyins in either the lower left or lower right corner of your visitor’s browser.
Icon Alignment
This option lets you select either ‘Left’ or ‘Centered’. Selecting left will display your button labels and/or share counts to the right of your network icons, creating a more horizontal button shape. Selecting ‘Centered’ will place your button labels and/or share counts below your network icons and center the button content, creating a taller button shape.
Number of Columns
Monarch offers 7 column width options. You can choose to have up to 6 equal width columns, or let your buttons take on an auto-width based on the width of your buttons’ content. No matter your selection, Monarch accommodates for small browser widths and adjusts your column selection for mobile devices.
Intro Animation
Boost the attention grabbing potential of your social flyins with a fun and engaging intro animation! Choose from 10 great load-in animations such as Zoom, Flip, Bounce, and Swing to catch your visitors’ eye.
Trigger After Time Delay
Enabling automatic flyins will trigger sharing flyins on your pages based on a timed delay. This is a great way to presented users that have been browsing your page for a specific amount of time with with a social flyin.
Trigger After Inactivity
This will cause the flyin to appear once the user has been inactive for a certain period of time. If the user has left their computer, or left the tab after reading your post, try reminding them toshare when they get back!
Trigger After Scrolling
This will trigger the flyin after the visitor has scrolled a certain percentage down the page. Depending on the size of your page, and the content within it, you can have the flyin trigger at specific points within the reading. Depending on the situation, having the flying trigger at certain percentages may be much more effective than a timing delay.
Trigger After Commenting
This is a great way to target your most engaged visitors. When this is enabled, your visitor will be greeted with a flying after they have posted a comment on your website.
Trigger After Purchasing
This is another great way to target your most engaged visitors. When this is enabled, your customers will be asked to share your website after they have successfully purchased a product using WooCommerce.
Trigger at Bottom of Post
Just as a reader reaches the end of your page or post content is a perfect time to offer them a way to share your content. Enabling this flyin trigger will auto detect the end of your content and do just that.
Triggers NOTE
No matter how many triggers you have selected above, Monarch will only use whichever trigger occurs first so that your users are not overwhelmed with flyin if you have multiple triggers enabled.
Display Once Per Session
By Default, Monarch will display a flyin on any and every page that has flyins enabled once per page view. Selecting this option will only present a visitor with one flyin per session.
Session Duration
If ‘Display Once Per Session’ is selected, this option will be displayed, allowing you to define the length of time (in days) that a session lasts for. For example, if you input ‘2’ a user will only see a flyin on your site every two days.
Display Share Counts
Displaying share counts is a great way to show off how many times your pages have been shared and even a great way to encourage visitors to spread your content. This number will appear inside each button either to the right or below your network icons based on your ‘Icon Alignment’.
Minimum Count Display
Sometimes it is better to not show counts at all than it is to show that your content hasn’t been shared over a certain threshold. This setting allows you to set the minimum share count that Monarch will display in your flyin’s sharing buttons. This is a great feature for new content that hasn’t had the opportunity to be shared for much time.
Display Total Shares
This share count will add up the shares across all displayed networks and display the total right above your buttons. This is a great way to show the totality of how popular a given page is.
Display Network Names
Check this box to display the network labels in your sharing buttons. These can be customized to whatever you wish. For example, you can choose to replace the Network Name ‘Twitter’ to something like ‘Tweet This’ or ‘Share This’.
Remove Icon Spacing
By default, the flyin icon buttons are spaced out with a small margin. Checking this option lets you remove the spacing between your icons for a whole new set of design possibilities.
Hide On Mobile Devices
If you wish to not display flyins on mobile devices you can check this box.
Color Settings
Use Custom Colors
By default, Monarch uses the default network colors, but for a more custom approach you can select your own button colors. If an option below is not defined, the default setting will be used for that element.
Background Color
This color picker will define the background color of your flyin sharing buttons.
Hover Background Color
This color picker will define the background color of your flyin sharing buttons when the user hovers over a button.
Icon Color
This color picker will define the color of your flyin sharing buttons’ icons.
Icon Color
This color picker will define the color of your flyin sharing buttons’ icons when the user hover over a button.
Post Type Settings
Select Your Post Types
All post types that exist on your website will appear in the Post Type Settings, whether it is a post or page, a WooCommerce Product, a Project post from a portfolio plugin, etc. These are global settings that allow you to choose what kind of posts you would like your social flyins to appear on. Note that you can override any of these settings on a per post basis.

Customizing The Monarch Design

Customizing The Monarch Design
Monarch comes with some great design customization options for each integration area.

An Overview Of The Monarch Design Settings
Monarch is packed full of design options so that you can fully customize your sharing and follow buttons into your website’s design. Combining button shape options, icon placement, icon spacing, button hover effects, and unlimited color options, the design possibilities are countless.
Hover Styles

Sidebar Hover Styles
Choose from 5 hover effects for you floating sidebar. These hover effects become even more diverse as you mix them with different button shapes and button spacing as described below.
Inline Button Hover Styles
Choose from 4 hover effects for you inline sharing and following buttons. Again, these hover styles become more unique when combined with other design settings.
Icon Shapes

Monarch comes with three different button shapes. You can choose for you buttons to have squared corners, rounded corners, or be circles. If you choose circle shapes, your network labels and counts will appear outside of the button in contrast to the rectangular shapes which include network icons, labels, and counts all within the button.
Icon Orientation

Another great design option is your icon orientation. This doubles the design possibilities and can really effect the outcome of your custom designs. If you choose ‘Left’ Orientation, your button content will appear to the right of the network icons. If you choose a ‘Centered’ orientation, your button content will appear below your network icons. See below for info about button content
Icon Spacing

This setting lets you add a spacing between your buttons or remove it entirely for a two very different looks.
Button Content

Display Follow/Share Counts
This setting lets you display either the share or follow count alongside the network icons. This is a great way to show off how popular a page or social profile is.
Minimum Count Display
Sometimes content is new and profiles are young. This setting lets you set a minimum display count so that a count will not display if it is under your defined threshold.
Display Network Labels
This setting lets you display a button label. By default, this is the network name, but it can be customized to say things like ‘Pin This’, ‘Tweet This’, or ‘follow Us’.
Column Display

Use Custom Colors
By default, Monarch uses the default network colors, but for a more custom approach you can select your own button colors. If an option below is not defined, the default setting will be used for that element.
Background Color
This color picker will define the background color of your buttons.
Hover Background Color
This color picker will define the background color of your buttons when the user hovers over a button.
Icon Color
This color picker will define the color of your buttons’ icons.
Icon Color
This color picker will define the color of your buttons’ icons when the user hover over a button.

Using Network API’s In Monarch

Using Network API’s In Monarch
Connecting to your social account allows Monarch to update your social follower counts automatically.

What Are Networking API’s?
Networking API’s allow Monarch to automatically grab follower counts from your social profiles and display them on your website. This means that, for the networks that support it, you never have to update your follower count since the plugin continually checks the API and caches the count for you. Only certain networks support API calls, and each of them need to be configured a little differently. For a full list of supported networks and their installation instructions, keep reading.

Before you can configure your API settings, you must first make sure that you have “Get Counts VIA API” enabled within the Networks tab of your Monarch settings panel. Once enabled, you can begin setting up each account as outlined below.
Twitter
Twitter uses OAuth for its API, which means it requires some additional authentication steps before it will allow Monarch to access your profile information. To begin the process, first log in to your Twitter.com account and then access the Application Manager. Here you will need to fill in several fields as outlined below:
Name
This can be anything you want. Just something to remember it by.
Description
This can be anything you want as well.
Website
The full URL to your website (for example, http://www.yourwebsite.com).
Callback URI
This setting requires a very specific URL to identify your app. The URL that must be pasted here is the URL that leads directly to the Social Follow Networks tab in the Monarch settings inside your WordPress Dashboard. To get this URL, log in to your WordPress Dashboard and click Tools > Monarch Settings> Social Follow > Networks and then copy and past the URL from your address bar. It will look something like this:
http://www.yourwebsite.com/wp-admin/tools.php
Once you have filled in the required information, click the “Create Your Twitter Application” button and you will be taken to a new page that contains the information you will need to link Monarch to your account. Copy and paste the Consumer Key, Consumer Secret, Access Token and Access Token Secret into the Twitter API settings within the Networks tab of your Monarch settings panel. Click the “Authorize” button the complete the process. Monarch will now grab your twitter follower counts automatically.

Youtube
Youtube uses authorization keys for its API, which means it requires some additional authentication steps before it will allow Monarch to access your subscriber count. First, input the ID of your channel into the “name” field within the Monarch networks tab. The channel ID can be found at the end of your channel URL. For example:
https://www.youtube.com/channel/UCuasRuWliU48RwnKXf9GesA

Obtain An API Key
Now, log in to your Youtube account and then access the Google Developers Console where you will create a new Project. Then in the sidebar on the left, click Overview. In the list of APIs, make sure YouTube Data API v3 is included in the list of Enabled APIs.

In the sidebar on the left, select Credentials. Click the blue Create credentials button and select API key. For the key type, select Server key and then assign it a name to remember it by. Finally, select the blue Create button. You will now see your new API Key. You must copy and paste the API Key into the Youtube authentication fields within the Social Follow tab of the Monarch control panel. When you click the “Authorize” button, Monarch will automatically grab your Youtube share and follower counts.
Pinterest
Pinterest makes it easy to access the API for your account. Simply input the URL to your Pinterest profile page into the Pinterest URL field in the Networks tab of your Monarch settings panel. Monarch will now grab your follower counts automatically.

Facebook

Facebook uses OAuth for its API, which means it requires some additional authentication steps before it will allow Monarch to access share and follow information. To begin the process, open Monarch’s control panel and go to the Social Follow Networks tab. If you have not done so already, go ahead and enable Facebook by clicking Add Networks. Now you will see four input fields. In the second field (from the left) input your Facebook Page’s complete URL. In the third field, input only your Facebook Page’s name. For more information on how to setup a name for your Facebook Page see this article in Facebook’s Help Center.
Page URLs will typically have the following format: http://facebook.com/your-page-name

To obtain an App ID & Secret for Monarch, log in to your Facebook account and then access the Facebook
Developers page. From the main menu, hover over “My Apps” and then click “Add a New App”.
Now, input a name for your App. This can be anything you want. It’s just something to remember it by. Next, adjust the contact email if necessary and click Create App ID.
In the next step you are prompted to “Select a Scenario” where you can select the first option “Integrate Facebook Login”. Click on “Confirm” to confirm the selection.

Now, from the main menu on the left, find the Products section and click Facebook Login > Settings.
Find the field labeled Valid OAuth redirect URIs and input your site’s redirect URL using the following format (replace the highlighted portion with your domain):
https://your-website.com/wp-admin/tools.php?page=et_monarch_options#tab_et_social_tab_content_general_main

Now click the button labeled Save Changes located at the bottom-right side of the page.
Note: As of March 2018 all new apps created have the “Enforce HTTPS” option enabled by default and it cannot be turned off. More information about this can be found here.
Finally, you must copy and paste the App ID and the App Secret into the Facebook authentication fields within the General Settings tab of Monarch’s control panel. You can find the ID and Secret in Settings > Basic from the left side menu.

Leave this tab opened and head out to your WordPress Dashboard > Tools > Monarch Settings > General Settings and enter the App ID and App Secret from your Facebook app.

Once you click on the Authorize button you will be redirected to the Facebook authorization page where you may see a popup with a warning message saying “Some of the permissions below have not been approved for use by Facebook. Submit for review now or learn more“. This warning message can be disregarded as long as the account you are using to authorize is administrator on both the app and the Facebook page. Click on “Continue as …” then “Ok” to complete the authorization and now Monarch will automatically grab your Facebook share and follower counts.

Instagram
Instragram uses OAuth for its API, which means it requires some additional authentication steps before it will allow Monarch to access your profile information. To begin the process, first access the developer clients manager. Once you have clicked the URL, you will be asked to log in to access the API tools.
Once logged in, click the “Register Your App” button to get started. Then, click the “Register a New Client” button at the top of the screen. On this screen, you will need to fill in the following fields:
Application Name
This can be anything you want. Just something to remember it by.
Description
This can be anything you want as well.
Website
Input the full URL to your website (for example, http://www.yourwebsite.com).
OAth Redirect URI
This setting requires a very specific URL to identify your app. The URL that must be pasted here is the URL that leads directly to the Social Follow Networks tab in the Monarch settings inside your WordPress Dashboard. To get this URL, log in to your WordPress Dashboard and click Tools > Monarch Settings> Social Follow > Networks and then copy and past the URL from your address bar. It will look something like this: http://www.yourwebsite.com/wp-admin/tools.php?page=et_monarch_options#tab_et_social_tab_content_follow_networks

Once these fields have been filled out, click the “Register” button to complete the process. You will be brought to a new page that lists the information of your new app. You will need to copy and paste the Client ID and the Client Secret into the Twitter API settings fields within the Monarch Social Follow Networks tab, and then click the “Authorize” button to complete the process. Once authorized, your website will grab your social follow counts automatically.

LinkedIn
LinkedIn uses OAuth for its API, which means it requires some additional authentication steps before it will allow Monarch to access your company profile information. To begin the process, first access the secure developer tools. After you click the URL, you will be asked to log in to access the API tools.
Once logged in, click the “Add New Application” button to get started. You will be taken to a new page where you will need to fill in the following fields as shown here:
Applicate Name
This can be whatever you like.
Description
This can be whatever you like.
Website URL
Input the full URL to your website (for example, http://www.yourwebsite.com).
Live Status
Set to “Live.”
Default Scope
r_basicprofile (only have this selected)
OAuth 2.0 Redirect URL
This setting requires a very specific URL to identify your app. The URL that must be pasted here is the URL that leads directly to the Social Follow Networks tab in the Monarch settings inside your WordPress Dashboard. To get this URL, log in to your WordPress Dashboard and click Tools > Monarch Settings> Social Follow > Networks and then copy and past the URL from your address bar. Next, delete everything after the # character within the URL (http://www.yourwebsite.com/wp-admin/tools.php?page=et_monarch_options#tab_et_social_tab_content_follow_networks). In the end, it will look something like this: http://www.yourwebsite.com/wp-admin/tools.php?page=et_monarch_options
OAuth 1.0 Accept Redirect URL
Input the same URL as used in the field above.
Next click the “Add Application” button to complete the process. This will bring you to a success page with some information that you will need to input into the LinkedIn API fields within the Networks tab of the Monarch settings page in your WordPress Dashboard. Copy and paste the API Key and the Secret Key into the required fields, and then click the Authorize button the complete the profess. Monarch will now be able to grab your company’s follower counts automatically from LinkedIn.

Dribbble
Before Dribbble will give Monarch your follower count, you will first need to register an application and receive an access token. First, log in to Dribbble.com and then access the Register Application page. Here you will need to fill in the following fields:
Name
This can be anything you like.
Description
This can be anything you like.
Website URL
Input the full URL to your website (for example, http://www.yourwebsite.com).
Callback URL
Input the full URL to your website (for example, http://www.yourwebsite.com).
Next click the “Register Application” button. You will be taken to a new page with three pieces of information. Copy and paste the “Acess Token” into the Dribbble Access Token field within the Networks Tab of your Monarch settings page. Monarch will now grab your follower counts automatically.

Vimeo
Vimeo uses OAuth for its API, which means it requires some additional authentication steps before it will allow Monarch to access your profile information. To begin the process, log in to your account and then access the Vimeo API Tools to get started.
Click the “Create A New App” button, and then fill in the required fields as outlined below:
App Name
This can be anything you want. Just something to remember it by.
App Description
This can be anything you want as well.
App URL
Input the full URL to your website (for example, http://www.yourwebsite.com).
Callback URI
This setting requires a very specific URL to identify your app. The URL that must be pasted here is the URL that leads directly to the Social Follow Networks tab in the Monarch settings inside your WordPress Dashboard. To get this URL, log in to your WordPress Dashboard and click Tools > Monarch Settings> Social Follow > Networks and then copy and past the URL from your address bar. It will look something like this: http://www.yourwebsite.com/wp-admin/tools.php?page=et_monarch_options#tab_et_social_tab_content_follow_networks
Click the “Create App” button to bring you back to the developer tools home page. Next click the “Authentication” tab, which will give you a list of information about your new app. You will need to copy and paste the Client Identifier and the Client Secret into the Vimeo authentication fields within the Network tab of the Monarch settings panel. Once you click the Authorize button, Monarch will automatically grab your Vimeo follower counts.

Soundcloud
Soundcloud requires two pieces of information in order to grab your follower counts via their API: Name and Client ID. To access these details, you will first need to register an app within your Soundcloud account.
Log in to your Soundcloud.com account and then access the Soundcloud Apps Page to get started. Click the “Register A New Application” button to begin the app creation process.
Next you will be asked to fill in the following information:
Name
This can be anything you like.
Website of your app
Input the full URL to your website, such as: http://www.yourwebsite.com
Redirect URL
This setting requires a very specific URL to identify your app. The URL that must be pasted here is the URL that leads directly to the Social Follow Networks tab in the Monarch settings inside your WordPress Dashboard. To get this URL, log in to your WordPress Dashboard and click Tools > Monarch Settings> Social Follow > Networks and then copy and past the URL from your address bar. It will look something like this: http://www.yourwebsite.com/wp-admin/tools.php?page=et_monarch_options#tab_et_social_tab_content_follow_networks
Click the “Save App” button. After your application has been saved, copy and paste the “Client ID” (which will be listed on the app page your are currently on) and your SoundCloud Username into the SoundCloud API settings within the Networks tab of your Monarch settings panel. Monarch will now grab your follower counts automatically.

Github
Github makes it easy to grab your follower counts. All you need to do is input your Github username into the Github “Name” field within the Networks tab of your Monarch settings panel.

VK
Before you can configure VK, you first need to figure out your User ID, which is actually different than the VK username you use when logging in. To access this User ID, log in to VK and then go to the Account Settings page. Scroll down and look for the “Your Profile ID” section, and then copy and paste your Profile ID into the “User ID” field within the VK API settings inside the Network tab of your Monarch settings panel.

Extra’s Custom Sidebar Widgets

Extra’s Custom Sidebar Widgets
Extra comes with tons of custom widgets built for needs of bloggers and publications.

Overview
WordPress Widgets add content and features inside any widget-ready area on your website, such as your footer or sidebar. In addition to the widgets that come with WordPress by default, Extra includes custom widgets for displaying posts, advertisements, social feeds, and more.

Using Widgets
You can add widgets to your sidebar areas using the drag-and-drop interface in Appearence>>Widgets as demonstrated in the animation below. Next, we’ll take a look at each of Extra’s nine custom widgets in detail.

Authors
With the Authors Widget you can display a list of your site’s authors, each with a profile picture and number of posts stat.

Ads
As it’s name implies, the Ads widget allows you to display advertisements. You can configure multiple images in a single instance of the widget and the images will be shown in a round-robin fashion (based on page-load).
Basic Linked Image
Image URL
The image’s source URL. (eg. //yoursite.com/wp-content/uploads/2015/12/image.png)
Link URL
The URL that the image should be linked to. (your affiliate/ad URL)
Custom HTML
Ad HTML
Custom HTML Ad code.

Recent Comments
With the Recent Comments Widget you can display a list of your site’s most recent post comments.

Recent Posts
The Recent Posts Widget lets you display a list of your most recently published posts.

Recent Reviews
With the Recent Reviews Widget you can display a list of your most recently published review posts.

Recent Videos
The Recent Videos Widget lets you display a list of your most recently published posts that use the video post format.

Social Follow
The Social Follow Widget lets you display links to your social profiles along with your follower counts.
Facebook
Page URL
Your page’s Facebook Web Address. You can find this in your page’s About tab.
Page Slug
This is the last part of your page’s URL. The part after http://facebook.com/
App ID & App Secret
To obtain an App ID and App Secret, follow the directions provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same ID & Secret.
Google+
Page URL
Google+ ID
Your page’s Google+ ID.
eg. +elegantthemes
Google API Key
To obtain an API Key, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same API Key.
Youtube
Page URL
Youtube Username
Google API Key
To obtain an API Key, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same API Key.
Vimeo
Channel URL
Channel Name
Tumblr
URL
Keys & Tokens
To obtain the necessary keys and tokens, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same keys and tokens.
Twitter
URL
Keys & Tokens
To obtain the necessary keys and tokens, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same keys and tokens.
Pinterest
URL
Username
Instagram
URL
Username
Access Token
To obtain a token, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same token.

How To Update The Extra Theme

How To Update The Extra Theme
Using our Elegant Updater Plugin, you can update Extra right from your dashboard.

Updating Your Themes & Plugins
Elegant Themes products can be updated normally through the WordPress update system. When new versions of our themes or plugins become available, update notifications will appear in the Dashboard > Updates page of your WordPress Dashboard, as well as within the Themes & Plugins manager. It is important to always keep your themes and plugins updated to ensure compatibility with the latest version of WordPress, to keep your website secure, and to take advantage of the latest and greatest features!
Before you can update, you must first authenticate your Elegant Themes subscription by inputting your Username and API Key into the Updates tab of your theme or plugin settings. Only members with active Elegant Themes accounts have access to the latest versions of our products. Your Username is the username you use when logging in to ElegantThemes.com, and your API Key can be found by logging into your Elegant Themes account and clicking on the Account > Your API Key link. Once you have authenticated your account, you can click the update link when you receive an update notification to automatically update your theme or plugin.
Update Notifications
When new updates become available for any of our themes or plugins, a notification will appear in the Dashboard > Updates page of your website’s WordPress Dashboard.

Authenticating Your Membership
Before you can update your theme or plugin, you must first authenticate your Elegant Themes subscription. Only members with active accounts have access to product updates. To authenticate your account, you will be asked to input two pieces of information into your theme or plugin settings panel: 1) Your Username and 2) Your API Key. Your username is the same username you use when logging in to your ElegantThemes.com account, and your API Key is a unique identifier used to authenticate your account that is only available to you when logging in. To locate your API Key, log in to the Elegant Themes members area and click on the Account > Your API Key link. Copy the API Key displayed on the page. You will by pasting this key into your Theme or Plugin options page.

Once you have copied your API Key, you will need to use it to authenticate your account by pasting it into your theme or plugin options page. Log in to your website’s WordPress Dashboard and navigate to your theme or plugin options page. For Extra, this can be found by clicking the Extra > Theme Options link.

Once you have loaded your theme or plugin options page, look for the Updates tab. Click the Updates tab to reveal the Username and API Key fields. Type your username into the Username field and paste the API Key you copied earlier into the API Key field. You should confirm that you have not copied any extra white spaces by mistake. Click save to complete the account authorization.

Once you have entered your credentials, you are now ready to update your theme. Click on the Dashboard > Updates tab and update your theme or plugin normally using the WordPress update interface. If you do not see any update notifications, or you receive an authentication error when updating, try waiting a bit and then check back later. Sometimes WordPress will cache update notifications and it can take some time for them to appear correctly.

Using Extra’s Theme Options

Using Extra’s Theme Options
All of Extra’s basic configurations can be modified within the theme options panel.

Theme Options
Every Elegant Theme comes fully loaded with its own custom theme options panel. This is where you can control things like your logo, post meta information, and so much more. These options exist in what we call ePanel, and it can be accessed via the
Extra >> Theme Options menu.

General Settings

Logo
This is where you can upload your own logo file to appear in the header of every page of your website.
Favicon
installing an image here will add a favicon image to represent your site in browser address bars and bookmark menus.
Global Accent Color
This allows you to control your site’s Global Accent Color which is used on all pages.
Sidebar Location
Here you can choose the default location of the Sidebar. You will still be able to control the sidebar location at the individual page/post level.
WooCommerce Sidebar Location
Here you can choose the default location of the Sidebar for WooCommerce pages.
Sidebar
Here you can choose the custom Sidebar (defined in Appearance >> Widgets) that will appear on your site’s category, archive, and index pages.
WooCommerce Sidebar
Here you can choose the custom Sidebar (defined in Appearance >> Widgets) that will appear on your site’s WooCommerce pages.
Social Network Follower Count Refresh
Here you can configure how frequently your social follow counts are retrieved from the social networks.
Social Media Icons
You can control which of Extra’s supported social networks’ icons are enabled using these controls. There is a control for each of the supported networks.
Social Media Profile URLs
In order for an icon to be shown on the frontend it must have a profile URL configured using these controls. Again, there is a control for each of the supported networks.
Numbers of posts per page
Define how many posts you would like to be displayed when a user visits a Category Page, an Archive Page, a Search Results Page, or Tag Page.
Date Format
This option allows you to change how your dates are displayed. For more information please refer to the WordPress codex here:
http://codex.wordpress.org/Formatting_Date_and_Time
Use excerpts when defined
This will enable the use of excerpts in posts or pages.
Responsive shortcodes
This option enables shortcodes to respond to various screen sizes
Google Fonts subsets
This will enable Google Fonts for Non-English languages.
Back To Top Button
This will enable a small button fixed to the bottom-right side of the screen that will scroll the page to the top when clicked.
Smooth Scrolling
This will enable smooth scrolling which is especially useful when using anchor links to link to specific areas of the page.
Custom CSS
This is where you can enter any custom css to customize your site. For extensive CSS modifications we recommend that you always use a child theme.
Navigation > Pages

Exclude pages from the Navigation Bar
All of your existing pages will appear in this window. Every new page will appear in your navigation by default. You can uncheck any page here if you wish to not display a specific page or pages.
Show Dropdown Menus
If you would like to remove the dropdown menus from the pages navigation bar disable this feature.
Display Home Link
By default the theme creates a Home link that, when clicked, leads back to your blog’s homepage. If, however, you are using a static homepage and have already created a page called Home to use, this will result in a duplicate link. In this case you should disable this feature to remove the link.
Sort Pages Links
Choose how page links should be sorted here.
Order Pages Links by Ascending/Descending
Further, specify in which order your sorted page links should appear.
Number of dropdown tiers shown
This options allows you to control how many tiers your pages dropdown menu has. Increasing the number allows for additional menu items to be shown.
Navigation > Categories

Exclude Categories from the Navigation Bar
All of your existing categories will appear in this window. Every new category will appear in your navigation by default. You can uncheck any category page here if you wish to not display a specific category or categories.
Hide Empty Categories
If a category has been made but is not being used by any posts, you can choose whether or not to display it in your navigation. By default empty categories are hidden
Number of Dropdown Tiers Shown
This options allows you to control how many tiers your pages dropdown menu has. Increasing the number allows for additional menu items to be shown.
Sort Category Links
Choose how category links should be sorted here.
Order Category Links by Ascending/Descending
Further, specify in which order your sorted category links should appear.
Navigation > General

Disable top tier dropdown menu links
In some cases users will want to create parent categories or links as placeholders to hold a list of child links or categories. In this case it is not desirable to have the parent links lead anywhere, but instead merely serve an organizational function. Enabling this options will remove the links from all parent pages/categories so that they don’t lead anywhere when clicked.
Layout Settings

Single Post Layout
Choose Which Items to display in the post meta info section
Here you can choose which items appear in the post meta info section on single post pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Show Comments on posts
You can disable this option if you want to remove the comments and comment form from single post pages.
Sharing Icons
You can choose which social networks’ icons are shown on your posts (for social sharing).
Single Page Layout
Show Comments on Pages
By default comments are not placed on pages, however, if you would like to allow people to comment on your pages simply enable this option.
General Settings
Post Info Section
Here you can choose which items appear in the post meta info section on pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Archive Page Style
Choose whether your archive/index pages list posts in the standard layout or the masonry layout.
Ad Management

Here you can control Extra’s five predefined Advertisement areas. Each Ad Area has the following options:
Enable Ad
Enable the Ad Area.
Input advertisement image
Here you can provide your image url
Input advertisement destination url
Here you can provide the URL that the image should link to.
Input Adsense code
Place your Adsense code here (if applicable).
SEO > Single Post Page SEO

The SEO options are only applied when you are not using a supported SEO plugin. Currently, Elegant Themes support Yoast SEO and All-In-One SEO.
Enable canonical URL’s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL’s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine’s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treaded individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Enable meta descriptions
Check this box if you want to display meta descriptions on category/archive pages. The description is based off the category description you choose when creating/edit your category in wp-admin.
Choose title autogeneration method
Here you can choose how your titles on index pages are generated. You can change which order your blog name and index title are displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and index page name when using autogenerated post titles. Common values are | or –

Enable custom titles
By default the theme creates post titles based on the title of your post and your blog name. If you would like to make your meta title different than your actual post title you can define a custom title for each post using custom fields. This option must be enabled for custom titles to work, and you must choose a custom field name for your title below.
Enable custom description
If you would like to add a meta description to your post you can do so using custom fields. This option must be enabled for descriptions to be displayed on post pages. You can add your meta description using custom fields based off the custom field name you define below.
Enable custom keywords
If you would like to add meta keywords to your post you can do so using custom fields. This option must be enabled for keywords to be displayed on post pages. You can add your meta keywords using custom fields based off the custom field name you define below.
Enable canonical URL’s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL’s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine’s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Custom field Name to be used for title
When you define your title using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom title you would like to use.
Custom field Name to be used for description
When you define your meta description using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom description you would like to use.
Custom field Name to be used for keywords
When you define your keywords using custom fields you should use this value for the custom field Name. The Value of your custom field should be the meta keywords you would like to use, separated by commas.
If custom titles are disabled, choose auto-generation method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
SEO > Index Page SEO

Enable custom title
By default the theme uses a combination of your blog name and your blog description, as defined when you created your blog, to create your homepage titles. However if you want to create a custom title then simply enable this option and fill in the custom title field below.
Enable meta description
By default the theme uses your blog description, as defined when you created your blog, to fill in the meta description field. If you would like to use a different description then enable this option and fill in the custom description field below.
Enable meta keywords
By default the theme does not add keywords to your header. Most search engines don’t use keywords to rank your site anymore, but some people define them anyway just in case. If you want to add meta keywords to your header then enable this option and fill in the custom keywords field below.
Enable canonical URL’s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URLs all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine’s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Homepage custom title (if enabled)
If you have enabled custom titles you can add your custom title here. Whatever you type here will be placed between the tags in header.php
Homepage meta description (if enabled)
If you have enabled meta descriptions you can add your custom description here.
Homepage meta keywords (if enabled)
If you have enabled meta keywords you can add your custom keywords here. Keywords should be separated by commas. For example: wordpress,themes,templates,elegant
If custom titles are disabled, choose autogeneration method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
Integration

The integrate tab is great for adding third party code to certain areas of the theme. Code can be added to your websites head and body, as well as before and after each post. For example, if you need to add a tracking code to your website (such as google analytics), but are unsure which PHP file to edit in order to add the code to the of your website, you can simply input this code into the “body” field of the Integration tab.
For more information on getting the most out of the Integration Tab, see our blog post on
Ways To Use The Integration Tab In Our ePanel Theme Options

Four Creative Ways To Use The Integration Tab In Our ePanel Theme Options

Enable header code
Disabling this option will remove the header code below from your blog. This allows you to remove the code while saving it for later use.
Enable body code
Disabling this option will remove the body code below from your blog. This allows you to remove the code while saving it for later use.
Enable single top code
Disabling this option will remove the single top code below from your blog. This allows you to remove the code while saving it for later use.
Enable single bottom code
Disabling this option will remove the single bottom code below from your blog. This allows you to remove the code while saving it for later use.
Add code to the of your blog
Any code you place here will appear in the head section of every page of your blog. This is useful when you need to add javascript or css to all pages.
Add code to the (good for tracking codes such as google analytics)
Any code you place here will appear in body section of all pages of your blog. This is useful if you need to input a tracking pixel for a state counter such as Google Analytics.
Add code to the top of your posts
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.
Add code to the bottom of your posts, before the comments
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.