Settings Page

Arkam Lite is a user friendly plugin. In fact, this plugin has no bells and whistles, just a simple and clear Settings Page;

Arkam Lite

If Arkam Lite plugin is active on your website, a new item “Arkam Lite” will appear on your admin menu (below the Settings). To access the settings page, you just need to click Arkam Lite.

Arkam Lite

Exploring the Settings Page

In the settings page, you will find a list boxes, each one represents a social media channel. If you click on top of any of these boxes, the box will expand into a larger box (another click and the box will shrink to its initial size); Now few more options will appear specific to this box. What you will notice is that most of these boxes have 3 options in common;

Arkam Lite

URL field – This field is optional and it will redirect the user to whatever URL you add here when he click on the social media button. You can add any valid URL here but keep in mind that your website’s visitor expect to be redirected to your Facebook page, if he clicks on the Facebook button, for example.

Label field – This field is optional too, and it expects from you to add one single word here. Something like; Fans, Followers, Subscribers, Members.. Etc. Whatever you add here will be displayed right below the counter in a smaller text.

Fallback field – Once again, this field is optional, and it expects from you to add an positive number here. If the plugin,for some reason, fails to retrieve your social count, it will fallback to the number you specify here. If you leave this field empty, the plugin will display 0 instead.

Also, you can rearrange the social media boxes by holding and dragging vertically. This order will be used when displaying the buttons on your website via the plugin’s shortcode or widget. Keep in mind that it is possible to rearrange the social media channels with the widget settings form but not with the shortcode.

Maybe you have noticed that some boxes have a special API Key or Access Token field. API stands for Application Programming Interface and it is a technology used everywhere nowadays including social media giants like Facebook and Reddit. Using API is the recommended way to programmatically retrieve data from social media sites and in most cases it is the only way since. Even worse, many of them require API calls to be signed using a special access token.

Fortunately, our plugin will do most of the heavy lifting for you, but you still need to do create an app and get an access token for some of the supported social media websites. But please don’t get frustrated, we promise you we will explain everything here and you will find our guide quite easy to follow.

The Caching Option

Instead of getting your social media counters every time someone access your website, Arkam Lite will get the counters once and save them in the cache. You can change how often you want these counters to be updated/re-created from the Cache Results for dropdown menu.

Keep in mind that fetching the counters takes time so you should not set this option to 2 minutes or 5 minutes if your website receives tons of traffic on a daily basis.

Facebook

Getting your page ID

If your Facebook page URL is like this: “https://www.facebook.com/themient” then the Page ID is just themient.

If your page URL is like this: “https://www.facebook.com/themient-123456789123456” then the ID is 123456789123456.

And if your page URL is like this one: “https://www.facebook.com/pages/themient/123456789123456” then the Page ID is actually this number 123456789123456.

Creating a Facebook App

  1. Go to https://developers.facebook.com/
  2. Hover your mouse over My Apps menu, then click Add a New App
  3. Fill in the Display Name and Contact Email fields then click Create App ID

Arkam Lite Facebook app

  1. You will be prompted to enter the security check code, just enter the code then hit Submit
  2. Now you will be redirected to your app page. Click Dashboard from the left menu

Arkam Lite Facebook app

  1. Note the App ID and App Secret, you will need them later (you may click Show to reveal your app secret key)
  2. Go back to Arkam Lite settings page and click on Facebook to expand the box
  3. Click Get Access Token, you should get a prompt screen like this; (unless you have JavaScript disabled on your browser but why would you?!)

Arkam Lite Facebook secret

  1. Enter your app ID in the App ID field and your App Secret in the App Secret field then click Generate
  2. Under the hood, the plugin will make a GET request to Facebook via JavaScript with your app ID and secret attached to the request and Facebook should return an access token that will never expire. This access token should be added automatically to the App Access Token field
It is important to note here that your app ID and secret key will NOT be stored in your database, we need them only once to get the access token from Facebook.

Twitter

  1. Go to https://apps.twitter.com/app/
  2. Click Create New App
  3. You will be redirected to this page

Arkam Lite Twitter app

  1. Fill in all the required details, check the agreement box then click Create your Twitter application
  2. Once you are on your Twitter’s app page, click Keys and Access Tokens. Note your app Consumer Key (API Key) and Consumer Secret (API Secret), you will need them later

Arkam Lite Twitter keys

  1. Go back to Arkam Lite settings page and click on Twitter to expand the box
  2. Click Get Access Token, you should get a prompt screen like this;

Arkam Lite Twitter token

  1. This step is very similar to the previous step we did to get the access token from Facebook. You just need to fill your app Consumer Key and Consumer Secret then click Generate
  2. The access token should be added automatically to the App Access Token field

Pinterest

Creating a Pinterest App

  1. Go to https://developers.pinterest.com/apps/
  2. Click Create App
  3. Fill in your Pinterest app Name and Description then click Create

Getting an Access Token

Once your app is created, you need to get an access token. The good news, you don’t need to write any codes to get this token. The bad news, you need to use a third party app called Postman which is available for free on Windows, Mac and Linux.

Follow these instructions if you don’t know how to use Postman;

  1. First, you need to update your app to allow Postman to use it by adding the Postman OAuth callback URL (https://www.getpostman.com/oauth2/callback) as a valid redirect URL for your app.

Arkam Pinterest

  1. Next, open Postman and configure the OAuth flow as follow;

Arkam Pinterest

  • GET: https://api.pinterest.com/v1/me
  • Type: OAuth 2.0
  1. Now click Get New Access Token and configure the page as follow;

Arkam Pinterest

  • Callback URL: https://www.getpostman.com/oauth2/callback
  • Auth URL: https://api.pinterest.com/oauth/
  • Access Token URL: https://api.pinterest.com/v1/oauth/token
  • Client ID: YOUR_CLIENT_ID
  • Client Secret: YOUR_CLIENT_SECRET
  • Scope: read_public
  1. Now click Request Token.

Arkam Pinterest

  1. Now click Okay to approve access to your Pinterest app
  2. If everything goes well, you will receive your access token like in the screenshot below;

Arkam Pinterest

Vimeo

  1. Go to https://developer.vimeo.com/apps then click Create App
  2. Fill in your app required fields and check the agreement box then click Create App
  3. Once your app is created, click Authentication
  4. Under the Scopes section, un-check all the checkboxes and only keep the Public checkbox checked (Important) then click Generate Token
  5. Your Vimeo access token should look like this;

Arkam Lite Vimeo

Dribbble

Dribbble API v1 is deprecated and V2 requires authentication before requesting anything. So we are now forced to use a hacky method (by requesting the full page and then parsing its HTML) to fetch followers count until Dribbble make it possible to fetch it using their new API.
  1. Go to https://dribbble.com/account/applications/ then click Register a new application
  2. Fill in your Dribbble app details, check the agreement box then click Register application
  3. Once your app is created, scroll down. You access token is your app Client Access Token

Arkam Lite Dribbble