X hide

Magento QQ Login Configuration

From Plumrocket Documentation

You are viewing:  Social-login-pro-icon-32.png  Social Login Pro

QQ-icon.png QQ (connect.qq.com)

Description:Tencent QQ, also known as QQ, is an instant messaging software service,it offers a variety of services, including online social games, music, shopping, microblogging, movies, platform of games and group and voice chat. As of now, there are 829 million active QQ accounts, with a peak of 176.4 million simultaneous online QQ users.
Protocol OAuth2
Returned Data UserId, name, gender, photo
Requires SSL? No


How to Configure QQ API for Magento

In this article you will learn how to find your QQ API in order to setup the QQ Login functionality. Please follow the step-by-step instructions below.


Information Sign sm.png Step-by-Step action:
  1. Login to your QQ account and click on this URL connect.qq.com.
  2. Press "Add Site / Application" button to start creating your QQ application."


Magento social login pro qq conf1.jpg


Information Sign sm.png Step-by-Step action:
  1. Press "Website" button.


Magento social login pro qq conf2.jpg


Information Sign sm.png Step-by-Step action:
  1. Indicate your QQ application name.
  2. Provide short description of your application.
  3. Enter the name of your company.
  4. In the dropdown box, select the category of your website.
  5. Specify the subcategory of your website.
  6. Indicate your website address.
  7. Press "Verification" button.


Magento social login pro qq conf3.jpg


Information Sign sm.png Step-by-Step action:
  1. Copy this line of code to your clipboard.


Magento social login pro qq conf4.jpg


In order to verify your website you will need to paste the code you got from the previous page into your head.phtml file.
Code Example

Edit the file:

 app/design/frontend/THEME_NAME/default/template/page/html/head.phtml

where "THEME_NAME" is the name of the theme you are using,

add the code from previous page:

<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
 var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
 var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
!!- <meta property="qc:admins" content="352046272147552312560455352652637571617" /> -!!
Information Sign sm.png Step-by-Step action:
  1. Return to your registration page and press "Verification" button.
  2. Press "Start the authentication" button.


Magento social login pro qq conf7.jpg


Information Sign sm.png Step-by-Step action:
  1. When your website will be verified, you will get "It has been verified" notification.
  2. Copy and Paste callback URL, that can be found in your Magento backend-> Plumrocket-> Social Login Pro-> QQ-> Callback URL.
  3. In order to proceed, please agree with QQ login developer agreement.
  4. Press "Add Site / Application" button.


Magento social login pro qq conf8.jpg


Information Sign sm.png Step-by-Step action:
  1. Copy "App ID" to your clipboard.
  2. Copy "App Key" to your clipboard.


Magento social login pro qq conf9.jpg


QQ Integration in Magento Social Login Pro Extension

In this step you must update your Magento Social Login Pro Extension configuration. In your magento admin panel, go to "System" -> "Configuration" -> "Plumrocket Inc" -> "Social Login Pro" -> "QQ" Tab.


Information Sign sm.png Step-by-Step action:
  1. Paste App ID into according field of your "QQ" backend tab.
  2. Insert App Key into according field of your "QQ' backend tab.
  3. Press "Save Config" button to save your settings.


Magento social login pro qq conf10.jpg


QQ Integration in Magento 2 Social Login Pro Extension

In this step you must update your Magento 2 Social Login Pro Extension configuration. In your magento 2 admin panel, go to "Plumrocket" tab in the main menu -> "Social Login Pro" section -> "Configuration" - > "QQ" Tab.


Information Sign sm.png Step-by-Step action:
  1. Paste App ID into according field of your "QQ" backend tab.
  2. Insert App Key into according field of your "QQ' backend tab.
  3. Press "Save Config" button to save your settings.


26 Magento 2 QQ Login Configuration v1.jpg


How to Configure QQ API for Magento - Production Mode

At this point, in order to apply this application for production, you will need to add more data to your application. Please follow the steps below.


Information Sign sm.png Step-by-Step action:
  1. Press "Icon footage" button to add icons to your application.


Magento social login pro qq conf11.jpg


Information Sign sm.png Step-by-Step action:
  1. Press "Upload" button to upload 16x16 icon.
  2. Press "Upload" button to upload 100x100 icon.
  3. Press "Upload" button to upload 64x64 icon.
  4. Press "Upload" button to upload 32x32 icon.
    Note: It is only necessary to have 1 icon in 100x100 size. The system will adjust other icon sizes automatically.


Magento social login pro qq conf12.jpg


Information Sign sm.png Step-by-Step action:
  1. Return to your QQ application page.
  2. Press "Submit Review" button to apply your application for production.


Magento social login pro qq conf13.jpg


Information Sign sm.png Step-by-Step action:
  1. Now your application is "In review". Once it's approved - you will receive an email from QQ.


Magento social login pro qq conf14.jpg


Configuration of QQ Magento Social Login and Magento 2 Social Login application is now completed.


Next Step > Return to Social Login Pro API Reference
Navigation