VSUN Android Smartphone Ships with Adware

A year ago I had enough with my Windows Phone for a multitude of reasons that has since made it a lost cause. Naturally I decided to switch back to Android, a decision that prompted getting a new device altogether.

A bit of window shopping online unearthed what I thought was a good match for me. It was a budget android phone with 4G and a display below 5" - the only two requirements I had then. The device was by a little known Chinese manufacturer by the name of VSUN.

The price on offer was quite affordable, perhaps too affordable it would be deemed a throwaway since no other 4G device with similar specs was in this price range (about $40). A good bargain I concluded it was and quickly got hold of one before the last of them found an eager owner.



Adware Packaged as Software Update App

After almost a year of use, a month ago I noticed a peculiar thing. A certain app was pushing ads in my notification drawer and lock screen. This came as huge surprise for me bearing in mind I always have background data restricted not to mention the bulk of my apps don't have ads.

Long pressing on the ad revealed that the app in question was Software Update (package name: com.rock.gota). This is a system app that I thought up until this time was for fetching and installing OTA updates. Preposterous I know for budget android phone.
software update adware
Software Update Adware

The app had lived up to this sentiment as it never installed let alone found any updates yet here it was serving ads from RevContent - a popular advertisement network that specializes in content recommendation ads.

No question that the app is adware however I wonder what took it this long to start pushing the ads. 


Removing the Software Update Adware

Unfortunately, since the adware is a System App options on removing it are very limited. One cannot uninstall the app and likewise VSUN made sure we cannot disable the app.

That leaves us with the option of rooting the device - a venture I long shelved owing to the fact that VSUN is not exactly a popular brand meaning it comes with limited support in the way of custom roms. Most one-click root apps (including the popular Chinese ones) have also failed to root it.

Consequently, I've been forced to FORCE STOP the app every time I get the hint it's running (I rely on Developer Option's Show CPU Usage overlay for that). I'm afraid that's the only way until I can either root the device or dispose it off.


Be Wary of Adware and Spyware in Budget Android Phones

Personal user data is a powerful resource that can be leveraged for better profits or influence, be it by companies or politicians. Chinese companies seem to have the worst track record in this matter; a worrying trend considering a lot of electronic gadgets, in particular smartphones and tablets are manufactured there.

Consumers in Europe and N.America are largely protected by high quality standards for consumer products and data privacy laws which to an extent shields them from this kind of pilferage. In essence, the government steps in to protect its citizens since the average consumer doesn't know better when it comes to such "complex" matters.

Furthermore, companies wouldn't risk losing highly profitable markets such as these on account of collecting data. It defeats the purpose as they won't be able to leverage such data for better future sales should they get caught in the act.

That leaves us with low income countries that become essentially the target market or rather the dumping ground for these budget android phones. Quality standards laws in such countries are either shaky or decent enough but not well enforced. Data privacy is on the other hand an afterthought for there are better concerns such as setting up infrastructure to facilitate data access.

A huge appetite for loans from the generous Chinese government further ensures that goods from China, often cheap and substandard, get an easy pass.

I know all this too well as my home country of Kenya falls squarely under this category. Barring the knock-offs that still somehow get entry into the country, the markets are otherwise awash with genuine smartphones from little known Chinese brands.

The growing preference for online retail stores as opposed to physical electronic stores ensures such small players get visibility to compete with established brands at an almost level playing field.

And while most people prefer having smartphones from a big brand name, for such a name not only presupposes quality but also confers status, the added cost that is seemingly charged for a mere name will often push consumers to these lesser known brands.

Such brands will compensate for their unpopularity by selling phones with similar if not slightly superior specs (usually a bigger battery or display size) at lower price ranges.

Price aside, the average consumer is more than likely to conflate a bigger display size with better hardware - a relationship that small brands exploit with astounding results. All this coupled with well-timed discounted offers ensure many consumers gladly choose the likes of VSUN or CUBOT over the costlier Samsungs and Huaweis.

Little do consumers realize that this inexpensiveness is paid with data harvesting and revenue making in the form of ads.

Last year a long list of such small brands were implicated in a report that revealed their android smartphones shipped with a spyware app called Adups. Unsurprisingly, VSUN was one of these 40 manufacturers in this report where Blu was the focus of the attention.

The extra amount charged for better known brands would therefore seem justified if only to safeguard oneself from this blatant disregard of one's privacy. Still, I fear that consumers in low income countries are preoccupied with more pressing needs to care for their data privacy let alone protest against smartphones they see as a refuge from the dominance of pricier established brands.

iSlide: Professional PowerPoint Presentations Made Easy

Making professional looking PowerPoint presentations requires a certain amount of design skill. Many however can get past this limitation thanks to the hundreds of free and premium templates out there.

Nevertheless, a template may still require some touch ups and additions no matter how professional or suitable it's to the subject being showcased. This may include simple fixes in layouts and transitions to addition of elements such as diagrams, charts and pictures.

iSlide aims to address all these design needs in one place, and what's more, in just a few clicks.



The iSlide Add-in ToolBox

The iSlide add-in is compatible with Microsoft Office 2010 and later (2013/2016/2019/365) and WPS Office Free/Professional running on Windows 7, 8/8.1 or10.

After installation, the add-in is accessible within the PowerPoint ribbon just beside the Home tab. The iSlide tab is packed with most of the essentials needed to design a presentation from start to end. This includes design tools, resources, animations and some specific tools.
islide ribbon
iSlide Tab in PowerPoint 2016

The idea here is to keep one's focus on designing a complete presentation without the distracting need to switch between tabs every now then.


Design

In the Design sections we've three tools:
  • Standard Specification
  • Design Layout
  • Design Tools

As the name alludes to, Standard Specification provides a quick way to "standardize" a presentation. You can set uniform fonts, paragraphs, guides and colors that can be used in all the slides, selected ones or a slides array (e.g 1-3, 5-10).

The Design Layout provide some non-standard layout options that can be used on shapes and pictures. Examples include the matrix and circular layouts that can be used to create interesting designs of various shapes.

A watermark tool is also included here that makes adding or deleting watermarks from all or specific slides quick. Other tools include a handy eyedropper tool for picking colors and a crop (resize) tool that crops with units thus allowing for much finer control.

Finally, there is the Design Tools which opens a pane with a variety of layout adjustment options including alignment, size, guides layout, rotation and more.


Resources

This section is arguably the main selling point for iSlide. These resources are hosted remotely and thus one has to be connected to the internet to download them. It includes the following categories of resources:

1. Theme Library

This hosts a huge collection of templates that can be filtered by category (think presentation context), style and permissions (free or premium). The templates can also be searched and favorited for future use . Additionally, one has the choice to download a template in either 16:9 or 4:3 aspect ratio.
islide templates
Templates Library
The variety of templates here is staggering one is almost guaranteed of finding a suitable candidate for their project, be it free or premium. With that said, premium users have at their disposal more variety of templates to choose from.


2. Color Library

The color library houses a wide selection of color schemes for various sectors. Think company colors and the like. You can search specific color schemes or filter them according to the industry.

For instance, in the Computer category, you 'll find color schemes for tech giants such as Google, Huawei and Sony to online services like GitHub and Evernote.
islide colors
Color Library

The color schemes can be applied directly to all or selected slides. One can also edit a custom color scheme and save them for later use.


3. Diagram Library

This library contains a collection of ready to use diagrams. The diagrams have fields to fill with text and may include data placeholders, shapes (vectors) and pictures.
islide diagrams
Diagram Library

The diagrams can be filtered according to permission (free or premium), category (e.g. list, hierarchy, cycle, pyramid etc.), contains data or not and whether it has pictures, vectors or is text-only.


4. Smart Diagram Library

This is similar to the diagrams library but only includes smart diagrams. Likewise, they include fields to fill with one's data.
islide smart diagrams
Smart Diagram Library

The Smart Diagrams are the equivalent of MS Office's SmartArt however there's a lot more variety going on here and the designs are more graphical.


5. Icon Library

This is offers a huge collection of icons that can be inserted in a slide in just one click. The icons are of high resolution and thus can be enlarged with no noticeable loss in quality.

As it's expected by now, the icons can likewise be searched using keywords (e.g. car, office) or filtered according to categories. Interestingly all the icons here are free to use.
islide icons
Icon Library

Premium users however get to upload their icons into their account and can access them at any time by filtering the permission to Private.


6. Picture Library

Pictures when used imaginatively can make a presentation engaging for the audience. The Picture library offers thousands of high quality pictures that span a multitude of categories and that are sure to meet anyone's needs.

In addition to these, the images are searchable and can be filtered according to type (JPG or PNG) or orientation (vertical or horizontal).
islide pictures
Picture Library

This quite a time saving resource as it does away with the hassle of finding and downloading pictures online first. The pictures themselves are actually free to use (for both personal and commercial use) as it seems the bulk of them are sourced from free image websites such as Pixabay and Unsplash.

For such pictures, a link to the author is thoughtfully included in the preview window should one wish to support or explore more of their artwork.

All the pictures here are accessible to both free and premium users and can be added into one's favorites for future use. Premium users can however also upload their pictures into a private collection to use.


7. Vector Library

This library is similar to the Pictures one with the only difference being the images here are of the vector type. Vector images are ideal where large graphics are required as they don't lose quality with enlargement.
islide vectors
Vector Library

As such, this may prove quite invaluable for presentations that have to be projected on huge displays.



Animations

The animation section includes a Smooth Transition tool that creates a transition between two objects (shapes, images, text etc.) within a slide. The process is completely automated - just select the two objects and with one click set the transition. No need therefore to fiddle with direction, timing and specific transitions if one is short on time.

Nevertheless, Tween, Scale Time and Sequence tools are provided for those that may want to tweak the transitions to their preferences.


Tool Box

This section hosts a set of useful utilities to manage a presentation. They include:

1. Security Export

This utility provides for the following export functions:
  • Save as Image Presentation - exports the presentation to a normal presentation file (*.pptx)
  • Export Images - exports the all or selected slides to individual images.
  • Save as Read Only Presentation - password protects an exported presentation to prevent modification.
  • Export Video - exports the presentation to a video (MP4) using various quality options.
  • Export Fonts - exports the embedded fonts in a presentation.

2. Join Images

This utility creates an image file with the thumbnails of all the slides in a presentation. The exported image shows an overview of all the slides with the first slide taking center stage at the top.

As such this can be quite handy as a presentation summary or when one needs to share the presentation without having to give access to the actual file.

3. Compress

As the name suggest, this tool compresses the presentation to save space. The tool analyses the presentation and gives options to delete particular elements that may be unnecessary such as Notes, Comments, Animations and Invisible or Off-slide content.

A compression quality setting for images used in the presentation is also thoughtfully included.

4. File Analytics, ZoomIt and Timer

File Analytics gives an overview of the slides and the slide master so as to understand how the presentation is laid out and if need be, to edit the master slide.

ZoomIt uses the nifty application of the same from Sysinternals to do various zoom functions and drawing on screen. It's quite useful in annotating during a slideshow though admittedly may take some time to get used to. The application is however not included in the package but downloaded separately.
zoomit
ZoomIt Options

Timer on the other hand allows one to time a presentation's duration after which one can adjust accordingly to fit a preferred timespan. Quite a useful tool in situations where the presentation time is fixed.


PPT Groups

This is a hub with resources to network on presentation design skills. There are tutorials, a bulletin and announcements on the latest developments concerning the add-in. The hub is however currently in Chinese only so at the moment it's impossible to gauge its usefulness with the language barrier.


Setting Up iSlide

To use iSlide's resources you'll need to create an account and log in. This is completed within PowerPoint and not in your Browswer. During the first run after installing the add-in, you'll be taken on a tour with the option to set up an account at the end.

You can sign up with email or phone. A verification code is sent to either of them to verify the registration. After logging in you'll be able to download and use the free resources in your presentations.


Verdict

iSlide's centralizes the process of making a complete presentation by putting the essential tools and resources for this task in one tab. It further uses a modern interface that's simplistic and clutter free, relying on pop-up windows rather than additional tabs to give more options. The result - a more streamlined approach in the design process.

The add-in's biggest strength is the resources it puts at one's disposal and with the ease it allows for their use. The resources themselves are of high quality and options are provided to narrow down the search to a suitable resource as well as some cataloguing for future use.

For any individual that makes presentations for a living or on a regular basis, this feature alone is worth considering the upgrade to the premium option.

The add-in is however not without some shortcomings, the most glaring at the moment being the localization support. More languages are needed should it hope to take over different markets.

The English translation while sufficient need polishing in some parts by using better wording to communicate a feature e.g. Security Export, Join Images (Create Overview Image would for instance be more befitting here).

Fortunately, the add-in has help resources accessible via the Window's question marks that should expound on how what a particular tool does. The help articles are however online and so an active internet connection is needed.

A minor complaint also is that PowerPoint takes longer to start-up now (~12 secs for me with PowerPoint 2016). Nevertheless, it does make the extra seconds worth the wait.


Upgrading to Premium

If you're happy with the add-in, you can always upgrade from the Free Edition to a Premium plan. Upgrading will unlock access to the entire collection of resources and also give you the option to upload resources into your Private collection.

Currently iSlide offers two premium plans:
  • Monthly Premium for $9.99/Month (limited to 50 downloads/day)
  • Yearly Premium for $39.95/Year (Unlimited Downloads)

A comparison of the three editions can be seen here.

To upgrade, use the Upgrade Premium button at the far right of the tab's ribbon. That will launch a window with a checkout to pay with PayPal.
islide premium
iSlide Premium Account

At the moment, you can get a discount on the yearly plan to get 3 additional months of use (15 months total) by using my coupon code. At checkout just enter the following code in the coupon box:

iSlide Coupon Code

Avatar

3 MONTHS FREE ON PURCHASE OF YEARLY PREMIUM

Get 3 free additional months of use (15 months total) on purchasing the yearly plan. At checkout enter the following coupon to get this deal:
Use Coupon Code: 5grzsf
VALIDITY: ACTIVE

Should you've any difficulties using the code leave me a message on my contact page.

How to Hide Blogger's Sidebar on Mobile

The Blogger sidebar is especially useful in providing space for widgets/gadgets such as Popular Posts, Featured Post, Labels and the Blog Archive. On desktop view it also provides a valuable space for vertical ads such as the skyscraper that are viewable even as users scroll down the page.

On mobile view the sidebar may be visible or not depending on the template in use. For the old non-responsive templates (Simple, Awesome Inc. etc), the sidebar is hidden if the mobile theme is enabled for mobile devices. Otherwise, it's visible as it’s on the desktop.

In custom responsive templates however, the sidebar typically aligns below the Blog Post when on Mobile/ Potrait view. This post is geared towards this type.



Hiding the Sidebar on Mobile using Conditional Tags

remove blogger sidebar
Remove Sidebar
To hide the sidebar content on mobile one has two choices:
  • to hide all the widgets inside the sidebar individually, or
  • to hid the entire sidebar

In both instances the hiding or removal as some may call it, is done using conditional tags however the latter is more efficient if the sidebar widgets need not be displayed on mobile. Let's see how we accomplish this.

  • NOTE: The new blogger templates (Contempo, Soho, Emporio) are responsive however their sidebars don't align at the bottom as it's the case with other responsive templates. Instead, the sidebar is revealed by using the hamburger menu on both desktop and mobile views. As such this post doesn't apply to them. Removing their sidebar as follows will only hide their widgets.
 
1. Go to your Blogger Theme and select Edit HTML. You may want to back up your template before proceeding.

2. Press Ctrl+F and then search for: aside. Depending on the template you may get many hits. Ignore the ones in the style code (CSS) and find the one inside the main body with closing and openings brackets. It could be in the following variations:
<aside>
<aside class='sidebar-container container sidebar-invisible' role='complementary'>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
3. Now just below this line paste the following conditional tag:
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
So that you have something like:
<aside>
<b:if cond="data:blog.isMobileRequest == &quot;false&quot;">
4. Use the search function again and now find: </aside>. Just above it paste the following: </b:if>

So at the end of it all you'll have something like this:
<aside>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
... sidebar content code here ...
</b:if>
</aside>
5. Save your template and test your site in mobile view. To do that either load the blog on a mobile browser or just do it on desktop by adding [?m=1] to the end of your URL.

You can also use the Device Mode on Chrome or Firefox's Responsive Design Mode to emulate real world devices.

The sidebar should be hidden now. If it's not, check how many times <aside> appears in your code. If it's multiple times, you'll have to establish the correct one to use. You could inspect your blog's sidebar using the inspect tool to do this (on Firefox or Chrome right-click the Sidebar then select Inspect Element/Inspect).

To restore the sidebar remove the conditional tag we've added. While this just hides the sidebar on mobile, you can use the same principle to remove the sidebar on desktop alone by modifying the conditional tag accordingly.

How to Remove Blogger's Render Blocking Comment JS

Page speed is important for user experience and how they eventually engage with a site's content. It's also said that it's an (or going to be) a ranking factor. With this in mind, it's important to optimize one's blog for faster loading.

With Blogger one has limited control over what they can optimize. Still, that's not to say there is nothing one can do. A quick test of your blog with Google's PageSpeed Insight and other tools such as GTMetrix and Varvy can give you insights on what may be slowing down your blog.

One common problem with Blogger sites as reported by the PageSpeed tool are Render Blocking Scripts. These external scripts delay the rendering of your webpage as they get loaded especially on mobile sites. One such script in Blogger is the Comment Iframe Script (comment_from_post_iframe.js) that loads the default comment form.



The Render Blocking Comment Iframe

render blocking comment js
Render Blocking Comment Form JavaScript

Pagespeed recommends one either defer or load render blocking scripts asynchronously. In the case of the latter, this resolves this issue with little difficulty as you only need to add "async" to the affected scripts. For example:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

That little piece of code will work with most external scripts that you may have in your Blogger Template. With the Comment Iframe Script however, things are a bit complicated since the script is not called in the usual way as shown in the example above.

If you check your template's you may instead notice the following line of code:
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
</script>
This code is what calls the script (xxxxx-comment_from_post_iframe.js) from Blogger's servers. This is done synchronously however adding the "async" tag to the script in this case won't work.


Removing the Render Blocking Comment Iframe

Since we cannot load the script asynchronously an alternative means would be to include the script right in the template, that is, make the script inline. To do that we need to obtain the script's code in its entirety and replace the "calling script" above with it.

Step 1: Get the JavaScript Code

The script is loaded from the following location:
https://www.blogger.com/static/v1/jsbin/xxxxxxxxxx-comment_from_post_iframe.js

The xxxxx part is a unique token that's generated from one's account. You can find the specific token by looking at the source of your blog in your browser.

To do that on Firefox or Chrome, press CTRL+U then search for:  
https://www.blogger.com/static/v1/jsbin/

You should find the code in multiple instances. Copy the series of numbers just before -comment_from_post_iframe.js then complete your link so that it looks something like this with the token added:
https://www.blogger.com/static/v1/jsbin/1234567890-comment_from_post_iframe.js

Copy this link in your browser's address bar and load it.

A piece of code should be loaded (it's quite long hence my reservations of posting it here and the reason for the above steps). Copy the code as it is and save it somewhere.



Step 2: Make the Script Inline

  • TIP: Consider backing up your template before doing the next steps.
Next enclose the code in a script with:
// <! [CDATA [
SCRIPT CODE HERE
 //]]> </ script>
So that it looks something like this (only the start and end of the code is shown.):
// <! [CDATA [
(function(){var e="function" ...
... .call(this);
 //]]> </ script>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);


Step 3:  Add the Script to your Blogger Template

Open your template in an editor or within Blogger and find the following line:
<data:post.cmtfpIframe/>
Delete that line and replace it with the script we have just made. Save your template and that's it.

Now go test your blog again in Varvy or PageSpeed and you shouldn't get the render blocking warning from this particular script. If you have any other render blocking scripts make sure to load them asynchronously as shown earlier. Cheers!

How to Import Blogger Comments into Disqus

The Blogger comment system is usually sufficient for most bloggers. It offers different location options for the comment box, comment moderation, email notifications and even supports Google+ comments. However, the system is not without its shortcomings and this often prompts some bloggers to consider switching to alternative comment systems.

In particular, is the impact the system has on page load speed. Google's own PageSpeed tool even recommends to eliminate the comment system's render blocking JavaScript/CSS resources. For other's it bugs such as the recent failure in the delivery of comment email notifications which lasted for few months before getting fixed.



Configure Disqus to Import Blogger Comments

blogger to disqus comments
Import Blogger Comments in Disqus

The most common alternative comment system for Blogger users is usually Disqus. The disqus comment system can be installed in Blogger either manually or easily without the need of editing one's template code using the Disqus gadget. Likewise, Disqus allows Blogger users to import existing comments from the Blogger Comment System easy and quick.

This assumes that you've already installed the Disqus Comment System.

Steps

1. Log in to your Disqus account then go the Admin page.

2. On the top navigation bar, select the Community option.

3. Inside the Community page, go to the sidebar and select the Import option that's below the TOOLS category.
import option
Import Option

4. In the Import comments into Disqus page switch to the Blogger option.
  • Note: If you've multiple sites under your Disqus account, make sure to switch to the intended one at the top right of the page before proceeding.
switch sites
Select the Correct Site

5. Next to One-time Import click the Import comments from Blogger button.
blogger category in disqus
Switch to Blogger and Import

6. A pop up window will open prompting you to Sign in into your Gmail Account. If you've multiple Google Accounts, make sure to sign into the one that owns your Blogger blog.
choose google account
Choose Google Account

7. Once you're logged in, you'll be prompted to select your Blogger blog. If you've multiple blogs under that account, they will all be listed.
select blog to import comments
Select Blog to Import From
8. Select the target blog then leave Disqus to complete the importing.
comments synced
Comments Synced

If the import is successful, Disqus will show you the number of comments it has synced once it's done.



After a Successfuly Importing Comments into Disqus

The total number of comments synced should match the number that's indicated in Blogger's Published Comments page.

The comments will appear in the posts they were left in originally within Disqus. All replies will however display as top level comments. This is not a bug rather it's a limitation of the import tool that Disqus acknowledges.

If your Blogger comment settings are configured to only allow only specific people to comment, the synced comments will all be shown as authored by you the blog owner. To prevent this, in the Who can comment? setting configure it to Anyone before the import.

Lastly, you can opt to sync new comments within the Disqus system with your Blogger site using the Enable Sync button in the import page. This way all the comments in Disqus will be preserved should you revert back to Blogger's Comment System. The syncing is however not without it's issues.


Disqus Comments Import Failed?

Should the import fail to sync the comments, try repeating the importation for a second time. This is what happened to me when importing the comments on three different occasion, and for some reason the second time it always worked.

Also, the import may fail if you've selected the Hide option for the comment location inside the Comment Settings.
unhide comments
Unhide Comments

So make sure to switch to the Embedded option before the importing. After you're done with the importing, you can switch back to hiding it.

How to Remove Site Name Before Post Titles in Share Snippets

In this age of social networks share buttons are a common sight on many blogs and websites. The buttons allow readers to share content they find useful to share with those in their circles. This way user engagement is increased while driving social traffic back to the site.

Depending on the kind of traffic a website attracts, the share buttons may range from popular social media sites such as Facebook, Twitter, Google Plus and Pinterest to those targeting mobile users such as WhatsApp and Telegram.



The Share Snippet

Typically, the share snippet looks almost similar across all the social networks. That is, it includes the post title, a thumbnail of the selected or first image, the post's URL and often the post description (meta). In some cases, however, the site's name is included just before the post title.

This may cause the post title to be cut off wherever it's shared reducing the attractiveness of the share and likewise it's click-through-rate. Of course, the longer the site name the more the title is cut off.
whatsapp share snippet
WhatsApp Share Snippet with Truncated Post Title

The shortening is usually much worse on smaller displays such as those on mobile and when in portrait view.


What Causes this Shortening?

I've experienced this issue since starting this blog three years ago. My assumption was that this was the normal behaviour and could do nothing to change it. That's until I noticed the same trend with AdSense's Matched Content unit prompting me to investigate the issue.

What basically happens when somebody shares a URL is that a crawler from the social media sites crawls the destination site to find data to generate the aforementioned elements in the share snippet. It generates these data from the Open Graph Tags that are included in the website's template in the same manner as the Meta Tags.

Therefore, the problem of the site name appearing before the post title is more than likely to be traced back to the Open Graph tags one has implemented.

Identifying the Responsible Open Graph Tag

The open graph tags come in a wide variety. One however need not use all them. The essential tags that need to be implemented include:
  • og:title - title of the post
  • og:type - the type of content being shared e.g video, article
  • og:image - the image used in the snippet
  • og:url - the URL of the webpage being shared

Optional tags may however be included depending on what data you wish to be included in the snippet. An example is the site name. The site name is specified by the open graph tag: og:site_name.

That's our culprit. What will likely be happening is that the og:site_name tag is occurring more than once and is specified as part of the title tag. To ascertain what's actually happening test a URL of one of your posts on OpenGraphCheck or scrape it using the Facebook Share Debugger.

For example, the Facebook Share Debugger generated the following based on the tags I had im my template (not all tags are shown):
facebook share debugger tags
Before: Facebook Share Debugger Tags
Based on these tags, the generated share snippet looked like this:
facebook share snippet
Before: Facebook Share Snippet
The above is on desktop. On smaller mobile displays the entire title wouldn't be visible.



Removing the Duplicate og:site_name

I take the solution is obvious now: just remove the og:site_name tag that's either duplicated or included as part of the post title. If you don't need to display the site name in the snippet you can choose to remove the tag entirely.

The edit is quite simple but if you're unsure of what to delete and keep, I recommend consulting your web developer to do the change for you. If you're on WordPress, there are plugins which can add the necessary OG tags in your site such as the WP Facebook Open Graph protocol plugin.

If you're on Blogger such as myself you can use the following tags to guide you on what to edit or just replace your old tags with the second set that I currently use:

Original Tags


<!-- Start Open Graph Tags --> 
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='article' property='og:type'/>
</b:if> 
<meta expr:content='data:blog.title' property='og:site_name'/> 
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL FOR IMAGE TO USE WHEN POST HAS NONE' property='og:image'/>
</b:if> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='&quot;en_GB' property='og:locale'/> 
<!-- End Open Graph Tags -->

Highlighted are the duplicate og:site_name tags.

After Editing (use this)


<!-- Start Open Graph Tags --> 
<meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if> 
<meta expr:content='data:blog.title' property='og:site_name'/> 
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='PUT URL HERE FOR IMAGE TO USE WHEN POST HAS NONE' property='og:image'/>
</b:if> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='&quot;en_GB&quot;' property='og:locale'/> 
<!-- End Open Graph Tags -->

Replace the highlighted tags with values that correspond to your site's content.


The Results

After deleting the duplicate og:site_name tag, the Facebook share debugger generated the following:
edited tags
Tags after edit
The resulting snippet:
edited share snippet
Share snippet after edit
The title now includes the blog name at the end of the post title the way it ought to; and this is not just on facebook but on all other social media sites as well.