Support Thread

Bad Social Account Avatar

Bad Social Account Avatar — APG vNext Guide

Bad Social Account Avatar — a feature discussion or integration topic from the APG vNext community forum.

APG vNext Integration Capabilities

  • Authentication: ASP.NET Membership, Active Directory/LDAP, OAuth (Facebook, Twitter, Google)
  • Email: Configurable SMTP, HTML templates, digest notifications, bounce handling
  • Mobile: Responsive design + official Tapatalk integration from v5.5+
  • Search: Built-in full-text search powered by SQL Server Full-Text Indexing
  • Analytics: Google Analytics, Adsense, and third-party widget support
  • CDN: Static asset CDN support configurable via admin panel

Browse the full list at Features Overview or ask in the support forum.

Bad or Broken Social Account Avatar in APG vNext — Causes and Fixes

When a member registers or logs in via a social account (Google, Facebook, Microsoft), APG vNext attempts to pull their profile photo from the provider's API and use it as their forum avatar. A "bad avatar" — broken image, incorrect photo, or a low-resolution placeholder — means the avatar fetch either failed, returned an unusable URL, or was cached in a corrupted state. This guide covers each cause and its fix.

How APG vNext Fetches Social Avatars

On first social login, APG vNext calls the provider's profile API endpoint:

  • Google: https://people.googleapis.com/v1/people/me?personFields=photos
  • Facebook: https://graph.facebook.com/me?fields=picture.type(large)
  • Microsoft: https://graph.microsoft.com/v1.0/me/photo/$value

The returned image URL is stored in apg_Members.AvatarUrl. If this URL later becomes invalid (provider changes URL format, privacy setting changed, token expired), the image breaks.

Fix 1 — Re-Sync Avatar from Provider

The cleanest fix is to force a re-sync. Navigate to Admin Panel → Users → [Affected Member] → Edit Profile → click Refresh Social Avatar. APG vNext discards the cached URL and fetches a fresh one from the provider.

Bulk Re-Sync via SQL

-- Reset avatar sync flag — forces re-fetch on next login:
UPDATE apg_Members
SET    AvatarSyncedAt = NULL
WHERE  AuthProvider IN ('google','facebook','microsoft')
  AND  (AvatarUrl IS NULL OR AvatarUrl LIKE '%default%');

Fix 2 — Fallback Avatar When Provider URL Fails

Configure a graceful fallback so that broken social avatars display the member's initials instead of a broken image icon:

<!-- web.config -->
<add key="APG.Avatar.FallbackMode"   value="Initials" />
<add key="APG.Avatar.InitialsBgColor" value="#3b82f6" />
<add key="APG.Avatar.InitialsColor"   value="#ffffff" />

With FallbackMode=Initials, APG vNext generates a coloured circle with the member's initials whenever their avatar URL returns a non-200 HTTP status.

JavaScript Fallback in the Skin

// Catch broken avatar images in the browser:
document.querySelectorAll('.apg-member-avatar').forEach(img => {
  img.onerror = function() {
    const name = this.dataset.memberName || '?';
    const initials = name.split(' ').map(w => w[0]).join('').slice(0,2).toUpperCase();
    this.replaceWith(Object.assign(document.createElement('span'), {
      className:   'apg-avatar-initials',
      textContent: initials
    }));
  };
});

Preventing Avatar Sync Issues Proactively

Social avatar URLs from Google and Facebook are not permanent — providers rotate them periodically, especially when a member changes their profile photo on the provider's platform. APG vNext should re-fetch social avatars on each login rather than assuming the stored URL remains valid indefinitely.

<!-- Force avatar re-sync on every social login (minor performance cost) -->
<add key="APG.SocialAuth.ResyncAvatarOnLogin"     value="true" />
<add key="APG.SocialAuth.ResyncAvatarIntervalDays" value="7" />
<!-- Re-sync at most once per 7 days per member to reduce API calls -->

Validating the Avatar URL Before Storing

Some social providers return a URL to a generic placeholder image rather than a real avatar. APG vNext can be configured to reject these defaults:

<!-- Reject known placeholder avatar URLs from social providers -->
<add key="APG.SocialAuth.RejectPlaceholderAvatars" value="true" />
<!-- APG vNext maintains an internal list of known placeholder image paths:
     - Google: /a/default-user-photo
     - Facebook: /profile/picture/type=large (no user photo)
     - Microsoft: graph.microsoft.com defaults
     Members with placeholder avatars get the forum's fallback instead -->

Debugging Social Avatar Fetches

Enable diagnostic logging to trace exactly what URL is being fetched and what response is returned:

<!-- web.config: enable social auth debug logging -->
<add key="APG.SocialAuth.Debug" value="true" />
<add key="APG.SocialAuth.LogPath" value="~/App_Data/logs/social-auth.log" />

The log will include lines like:

[2025-03-15 14:22:11] Google avatar fetch: https://lh3.googleusercontent.com/a/...
[2025-03-15 14:22:12] Response: 200 OK, Content-Type: image/jpeg, Size: 8432 bytes
[2025-03-15 14:22:12] Avatar stored for MemberID: 1042

[2025-03-15 14:22:45] Facebook avatar fetch: https://graph.facebook.com/...
[2025-03-15 14:22:46] Response: 302 Redirect → known placeholder URL
[2025-03-15 14:22:46] Rejected placeholder avatar, using fallback for MemberID: 1043

Token Expiry and Avatar Access

Some providers (Microsoft Graph) require a valid OAuth access token to fetch the avatar image. Access tokens expire after 1 hour by default. If APG vNext tries to refresh a social avatar using an expired token, the request will return 401 Unauthorised, and the avatar will appear broken.

Solution: Store a refresh token during social login and use it to obtain a new access token before fetching the avatar. APG vNext 5.2+ handles this automatically when offline_access scope is requested during OAuth authorisation:

<!-- Request offline_access for Microsoft provider -->
<add key="APG.OAuth.Microsoft.Scopes" value="openid email profile offline_access" />

User Experience Impact of a Bad Avatar

A broken avatar image (shown as an empty box or broken icon) signals to members that their account has a problem, even when it does not. High-profile members or community leaders with broken avatars reduce trust and perceived professionalism of the forum. Proactively monitoring and fixing social avatar issues — rather than waiting for members to report them — is a worthwhile investment in community appearance and member satisfaction.

Related Resources

Looking for more help? Browse the support forum or check the Knowledge Base.