Child pages
  • Blog - Magento 2

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section

The Blog extension by Aheadworks uses the Disqus service to process and manage blog comments. Along with the comment management enhancements, Disqus allows defining if guest customers can comment on blog posts, open discussions on Disqus forums, and serves as another social platform for your store advertising.

Column
width50%
Panel

1. Create an account on Disqus;

Expand
titleClick to view details

a) Proceed to the Disqus website;

b) Click the button in the upper right corner of the screen to proceed to the registration form.

You can create the account through your social network accounts or register via email. If registering via an email address, don't forget to check for the 'Confirm email' message from the Disqus team after the registration is completed.

Panel

2. Register new application;

Expand
titleClick to view details

a) Proceed to the API Resources page and click the button;

Decide on the Application Label, Description, your Organization name, and Website. Those are used for the application identification purposes.

Once done, click the button to create the application.

b) Once again, navigate to the API Resourses page and copy the newly created application's Secret Key;

Under the Application section, you can now see the newly created application. Copy the application's Secret Key and paste it to the Disqus Secret Key field of the Blog extension's General Settings.

c) The secret key is now set, and it's time to click the 'Admin' link to proceed to the adding a site to Disqus stage.

Panel

3. Add new site;

Expand
titleClick to view details

 

a) Proceed to Your Sites block at the top of the page and click the button;

b) Decide on the Website name, copy the Unique Disqus URL below the Website Name (where you will manage all blog comments) and choose the appropriate category (optional)

Image RemovedImage Added

Paste the Unique Disqus URL to the Disqus Forum Code field of the Blog extension's General Settings.

c) Once done, click the button.

Info

Please note, the Website name you enter will be displayed above the Comments section of each blog post:

Panel

4. Configure comment policies.

Expand
titleClick to view details

a) After adding the new site, navigate to the Settings section;

b) Proceed to the Community tab:

  • Guest Commenting - decide if you want to allow guest customers to leave comments;
  • Pre-moderation - decide if you want to manually approve comments;
  • Links in Comments - decide if you want to manually approve only the comments that contain links;
  • Media Attachments - decide if you want to let your customers attach images and videos to comments;
  • Flagged Comments - decide about the notifications on customer reported comments;
  • Automatic Closing - decide if you want a blog post to become unavailable for comments after a set number of days;

c) You may also want to look through the other settings available. Once done, click the button at the bottom of the page.

Note

We are not providing assistance with setting up the Disqus services.

If you have any questions or require assistance with additional settings, refer to the Disqus knowledge base.

Column
width50%

 

...

Section

Once you are finished with installing the extension and registering the Disqus application, it is time to proceed to your Magento 2 backend to finalize the Blog extension setup.

Before creating your first blog post, we suggest walking through the Blog extension's settings and other options available to adjust the blog's look and behavior. This will help to better understand of how the extension functions and what you can expect your posts to look and feel like.

 

The first step is the application of Disqus Forum Code and Secret Key in the General Settings section of the extension, which finalizes the installation.

General Settings


Stores > Configuration > Aheadworks Extensions > Blog

This configuration section reflects the extension's functional aspects. These are the settings that affect the blog accessibility, content layout, and other.

Here, you have access to the following configuration options:

  • Enabled - defines if the Blog extension is enabled in your store;

  • Route to Blog - defines the direct link to the main blog page of your store e.g. store.com/myblog;

  • Blog Title - defines the name of the blog page; either you want to add your company name or change the title completely, - feel free to adjust this field as you like;

  • Posts per page - defines how many posts will be displayed per a blog page;

  • Display Sharing Buttons At - defines where the social network sharing buttons should be displayed at;

  • Comments enabled - defines if customers can comment blog posts;
  • Disqus Forum Code - paste here the Disqus URL from the step 3 of the Disqus setup;

  • Disqus Secret Key - paste here the Disqus Secret Key from the step 2 of the Disqus setup;

  • Facebook App ID - allows you to take benefit of Facebook Insights and explore the traffic from Facebook to your site;
  • Default Twitter site account - the Twitter card markup required to determine the official company's Twitter account;
  • Default Twitter post author account - the Twitter card markup required to determine a Twitter account of the post author.

You have just configured the main blog page and access to it. Now, we suggest proceeding to the adjusting the Blog sidebar and SEO step.

Stores > Configuration > AheadWorks Extensions > Blog

Sidebar

This configuration section reflects the Blog sidebar's functional aspects. These settings define the post tags look, let you add a CMS block and configure the recent posts to display.

Here, you have access to the following configuration options:

  • Number of Recent Posts to Display - defines how many most recent blog posts should be displayed in the Blog sidebar;
  • Number of Most Popular Tags to Display - defines how many popular tags should be displayed in the tag cloud of the blog sidebar;
  • Highlight Popular Tags - defines if the most popular tags should be highlighted with bold or with increased font size;
  • Sidebar CMS Block - allows choosing a CMS block to be displayed on the blog sidebar;
  • Display Categories List in a Sidebar - enables blog categories to be displayed on the sidebar;
  • Maximum Number of Categories to Display - the number of categories visible above the 'Show X More' link on the sidebar.

SEO


Below the Sidebar configuration block, you can find SEO configuration with a single filed Blog Meta Description. At this field, you are suggested to type in few words for SEO identification of your Blog.

The second configuration option URL structure allows you to determine the structure of your URLs either containing categories or not.

Related Products

Stores > Configuration > aheadWorks extensions > Blog

Starting from 2.0 version of Blog extension, store administrator can add related product blocks to the blog post pages. In addition, Blog tab is added to the product pages. Under the 'Blog' tab customers can find blog articles where this particular product has been mentioned as related.

This configuration section defines how the related product blocks that can be assigned to the blog posts should behave:

  • Display Blog Posts Tab on Product Page - defines if the 'Blog' tab should be displayed at product pages;
  • Display Related Products Block on Post Page - defines if and where the related products block should be displayed at the blog post page;
  • Related Products Block Layout - defines the related product block's layout;
  • Display "Add to Cart" Button - defines if 'Add to Cart' button should be displayed on the products featured in the related product blocks at blog post pages.

Once done with the settings click button.

Before continuing to creating your first blog post there is one other thing to consider - blog categories.

Wordpress Import

Stores > Configuration > aheadWorks extensions > Blog

Starting from 2.2.0 version of Blog extension, store administrator can import blog posts from the WordPress blog.

The process behind migration is the following:

  1. Navigate to Tools > Export in the Wordpress administrator area;
  2. Choose 'Posts' option and click 'Download export file' button. An XML file containing all blog posts should be downloaded;
  3. Navigate to your Magento backend Stores > Configuration > aheadWorks extensions > Blog;
  4. In the 'Wordpress Import' section of the Blog settings upload XML file via 'Import file';
  5. Set 'Override existing posts with the same URL' if you want the existing Magento 2 posts with the same URL overridden;
  6. Click 'Import Posts' button to begin post import;
  7. If imported successfully copy contents from Wordpress folder:
    wp-content/uploads/ 
    directly to Magento folder:
    /pub/media/wp-content/uploads/
    If this directory doesn't exist - create it manually. Make sure the file permissions are set properly.

Post migration is now complete.

Blog Categories


Content > Blog by Aheadworks > Categories

Blog Categories represent another navigation tool your customers may find helpful. Along with providing a navigation tool, categories ease the post management and let you highlight the post's theme.

Click button to add the first blog category to your store. Once at the New Category page decide on the following:

The configuration is pretty much straightforward with the options names speaking for themselves.

Blog Posts

Content > Blog by Aheadworks > Posts

The Post page allows you to edit published and draft posts and contains a grid with the following columns:

  • ID
  • Title
  • Image
  • Status
  • Publish Date
  • Published Comments
  • New Comments
  • Categories
  • Tags
  • Author.

The grid allows you to track the existing posts, delete and change their status with the provided mass actions functionality.

Now, when we are done with configuring the extension it is time to create your first blog post.

...

Section

This is it. To create your first post navigate to Content > Blog by aheadWorks > New Post this will land you directly at the New Post form.

The New Post form is quite huge that is why for further convenience we will split it into three steps:

Step 1: Title, URL key, schedule

 

At this step you are suggested to:

  • Type in the blog post title that will be visible at the top of it;
  • Decide on the post's URL key;
  • Schedulethetopostthe draft automatically at a time set.
Info

Scheduling a post can prove useful in different situations:

  • Startofthesale;
  • New product/service release;
  • Holiday greeting;
  • etc.

With the scheduling functionality, you can choose the date, hour, and even second you want the draft to be published.

Whenever you tick Schedule Post box appears at the top of the page. Once you are done with the post click it and the post is scheduled.

Expand
titleClick to see how the scheduler looks like...

Step 2. Images, canonical URLs

Second, you need to add an image to your post and provided it with Title and Alt text. The image can be taken from the existing media files or uploaded from your device.

Info

The hints provided for the image upon the question mark hover allows you to find out the recommended image sizes for different social media and the blog post page itself.

The Canonical URL option makes it possible to determine a canonical blog post URL if the post is assigned to several categories. This option allows you to avoid duplicate content issues.

Step 3: Short content, categories, tags
Anchor
tags
tags

In the third step, you are suggested to decide if your post should have a Short Content, set the post to a particular category and decide on tags.

Short Content can prove useful if your post is content heavy and takes a couple of pages. What it does is instead of displaying the whole post on a Blog page it allows displaying only the contents of the Short Content field, thus saving blog page space and making it look neat.

Info
Expand
titleClick to see how the post looks like with and without short content...

Without Short Content field enabled:

With Short Content field enabled:

 

Tags are one of the navigations tools provided by Blog extension. Every post is suggested to be tagged with relevant words or phrases to simplify further customer search for relevant information. All the tags are gathered in a tag cloud displayed at the blog Sidebar.

Info
Expand
titleClick to see how the tags work...

The more particular tags you have the more highlighted they become.Atan image above we have five tags: post, lorem ipsum, first, Grand opening, test store.

The 'post' tag has been used three times on our blog, all the other tags were used only once. As you can see from the tag cloud the tag 'post' is larger than the others.

 

Step 4: Content, comments, meta description

In the fourth step, you are suggested to type in the blog contents, meta description and decide if you want your customers to comment on the post.

Content field column comes with native Magento WYSIWYG editor allowing text editing, inserting images, widgets, variables etc.

Info

Magento Commerce store owners are able to take advantage of the Bluefoot Magento page builder provided within the extension's WYSIWYG editor.

Step 5. Twitter cards, Open Graph tags, and blog post visibility options


In order to make social media sharing suitable and attractive for your customers, the extension uses both Open Graph and Twitter Cards markups.

The Open Graph markup acts behind the scenes and includes the following tags:

  • “og:site_name” content="Store title" - store title;

  • “og:type” content="article" - the type of marked-up object. ‘Content’ in this particular case;

  • og:locale - the locale to be used;

  • og:image - an image representing blog post;

  • og:title - blog post title;

  • og:description - blog post short description;

  • og:url - canonical blog post URL.

The provided Twitter Card tags can be manually added from the backend. You can add them either for the whole extension or a particular blog post with 'Twitter site account' and 'Twitter post author account' options.

The 'Enable post for customer groups' makes it possible to hide posts from particular customers if necessary.

That's it. Providing you are done with all five steps you can now click the button and your first blog post is ready.

...