Settings Page

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

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

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;

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 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
  1. Fill in the Display Name and Contact Email fields then click Create App ID

  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

  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 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?!)

  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

  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

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

  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

Google+

Getting your profile ID

If your Google+ URL is like “https://plus.google.com/+Themientofficial” then your profile ID is +Themientofficial (including the + sign)

If your Google+ URL is like “https://plus.google.com/b/101381814164679645690/101381814164679645690” then your profile ID is 101381814164679645690

Getting Google API Key

  1. Go to https://console.developers.google.com/cloud-resource-manager
  2. Click Create Project
  3. Enter your project name then click Create

  1. Once your project is created, click on it and you will be redirected to your project page
  2. Now click the hamburger icon (Products & Services) from the top-left area to open the menu
  3. Go to APIs & Services > Dashboard
  4. Click Google+ API (if it is not showing, click View All to reveal all the available APIs)
  5. Click Enable. The guys at Google are very smart! Since you don’t have any API credentials yet, you will get a message at the top with a button Create Credentials. Click it
  6. Once you get this screen, click API key

  1. Once you get this page, don’t change anything, just click Create

  1. Here is your Google API key, copy it to the clipboard

  1. Go back to Arkam settings page and click on Google+ to expand the box
  2. Enter your Google api key inside the Google API Key field

Youtube

Getting Channel ID/User ID

Go to https://www.youtube.com/account_advanced

You’ll see your channel’s user and channel IDs under Account information

Getting Google API Key

To get a Google API key for Youtube, follow the same steps previous steps that you followed to get an API key for Google+, but this time instead of choosing Google+ API (in step 7), you need to choose YouTube Data API v3.

You don’t need to create a new project. If you have a project already, from your project dashboard, click Enable APIs and Services and select YouTube Data API v3 then click Enable.

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

MailChimp

Getting your API Key

  1. Login to your MailChimp account then go to https://us9.admin.mailchimp.com/account/api/
  2. If you don’t have any API keys attached to your MailChimp account, click Create A Key to get a new api key. (Make sure your api key is enabled)

Getting your List ID

  1. When logged in, go to https://us9.admin.mailchimp.com/lists/ and select a list
  2. Expand the Settings menu then click List name and defaults
  3. Here is your MailChimp list ID

Vkontakte (aka VK)

Getting your VK Account Screen Name

Your VK community or user screen name is easily identifiable from your VK URL. So if this is your VK profile URL: “https://vk.com/siasia is your VK screen name.

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;

Dribbble

  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

SoundCloud

Unfortunately, at the time of writing this document, new app registration at soundcloud.com is disabled. But if you’ve been lucky enough to create a SoundCloud app before they made this change. You just need your Client ID/Consumer.

Behance

  1. Go to https://www.behance.net/dev/register
  2. Fill in your app details then click Register Your App

  1. Once your app is created, you will be redirected to this screen; (note your API Key/Client ID)

Flickr

Getting your Group ID

  1. To get your Flickr group ID, go to https://www.webpagefx.com/tools/idgettr/
  2. Enter your Flickr URL then hit Find. Your Flickr ID should be something like 1234567@N99

Getting your API Key

  1. Go to https://www.flickr.com/services/apps/create/apply/ and click APPLY FOR A NON-COMMERCIAL KEY
  2. Fill in your app details, check the agreement boxes then click Submit

  1. Once your app is created, you will get your API key in the next screen;

Twitch

  1. When logged in, go to https://dev.twitch.tv/dashboard/apps
  2. Click Register Your Application and fill in your application details then click Register

  1. Once your app is created, Twitch will give you your app Client ID. It should be something like this;

Feedly

Getting your Feedly ID

When you open your website feeds in Feedly, check your browser address bar;

In this example, our Feedly ID is feed%2Fhttps%3A%2F%2Fthemient.com%2Ffeed%2F or in other words, everything after https://feedly.com/i/subscription/.