THE BUILDING BLOCKS OF SOCIAL MEDIA

Creating a successful content-centric site

The Building Blocks of Social Media

When it comes to uploading social media content, there are a large number of factors that need to be considered before starting the process. It may be surprising, in fact, just how many pipelines are necessary in order to build a scalable and effective network.

The content of this white paper will not be directed solely at building a social media platform. Actually, this content is meant to help everyone succeed in trying to create a new site where frequent and secure image, audio, or video uploads are required by platform creators and business owners.

Topic Overview

This white paper will cover a wide variety of topics but will focus on five key categories. These are, in order:

A general overview of current social media platforms and their infrastructure
Image content and management
Consideration for file upload pipelines
The common feature expectations from users of social media
Artificial intelligence tools are used in social media

General Overview of Social Media

Social media is a broad term that covers a number of subtopics. Generally, the first big names that come to mind when social media is mentioned include Instagram, Facebook, Tiktok and more. It’s important to note the differences in the niche that each platform has carved out for itself, especially with regard to content.

Choosing Your Content Type Wisely

Twitter, for example, still relies mainly on text, and its users have adapted heavily to this format. Take, for example, the challenge of posting an extended argument online.

On Twitter, many users would default to a specialized way of sharing extended information called a ‘thread,’ or a string of linked tweets. The alternative would be posting an extended spoken video or single long text note.

Now take Instagram, where the content is primarily focused on images and video content. A user with a long discussion may often take to posting several images with text on their ‘story’ (their interactive user profile) in order to share the information in segments.

On Facebook, a user would likely just dump the information in a single post. TikTok, considered a disruptive platform, would result in a string of linked video explanations, often under a minute apiece, by the same creator.

Looking at the larger picture here, we can see that the platform infrastructure and available content types can often drive the interaction between users and their posts. That’s why crafting your content strategy and supporting it correctly with strong and scalable infrastructure is key to running a successful and popular platform.

Working with a Common Medium: Images

Let’s start with images, one of the most used content types that requires significantly more support than text. Images can be used in any context from uploading them right away as user avatars, display on ‘blog’ posts, attachments to user posts in streams, and even more.

It’s critical that the upload process feels effortless to the user, and that they have a variety of methods in which they can upload such files.

Social media platforms often need to be able to support a variety of image file types, far from just the common JPG we have come to know. Many need to support PNG form, GIF form, TIFF form and BMP.

Each of them works slightly differently, so knowing the nuance of each is essential for building a consistent image uploading pipeline.

Take GIFs, for example. GIFs are special because they are considered ‘moving images,’ and they actually use a smaller color scale than JPGs and PNGs. This is to reduce the amount of information and compression necessary for storage.

This allows for them to include multiple frames of information that cycle repeatedly, creating a movie like effect. This may be important if you were looking to limit a certain type of media to just single frame, or static image content.

Moving on to PNGs, these images are unique in that they allow for a transparent background, whereas a JPG does not. This could be useful when placing icons on a predefined background or when creating certain types of avatars.

As you can see, these are only a few examples of the unique specificities of each file type. However, each is important to consider when building out your social media platform form to maximize your functionality and tailor your infrastructure.

Another key reason that considering image file type is so important is storage. Often, storing images will require converting them to a different format, which requires CPU processing.

In order to perform that CPU processing, you may need an offloading server that can handle the variable workload as the images are uploaded and moved to storage. Additionally, the conversion programming will be required to consider resolution loss between different file types and the level of compression necessary for storing large volumes of content.

Thankfully, developers can take advantage of third-party file upload services to convert an image’s file type. With these services, you won’t have to do the tedious process of image file type conversion yourself.

For example, Filestack does this in a single API call using the output task to convert an image input into a specified output format:

https://cdn.filestackcontent.com/APIKEY/output=format:jpg,quality:70/EXTERNAL_URL

The sample API above will convert the image with the EXTERNAL_URL into JPG format.

You can also use the auto_image task to automatically change the encoding of the image to to WebP and JPEG XR based on the user agent, providing better compression and quality characteristics compared to their older JPEG and PNG counterparts.

auto_image API task example:

https://cdn.filestackcontent.com/auto_image/HANDLE

To cater to as many use cases as possible, file converters usually support conversion among a wide variety of file types. To see what file types the market leader Filestack supports for conversion, check out this page.

Image Aspect Ratio

Beyond storage, you’ll have to consider image aspect ratio. Most social media platforms like Instagram, Facebook and Tiktok have a fixed size width for their page. This will require you to reformat your content to appropriately fit the constraints of the platform in every circumstance.

Even if you are creating a company website, you will have to consider the rendering of your site on mobile devices and desktop applications. Doing so provides consistency to the user base who may be viewing it at different widths.

In order to better understand the issue at hand, let’s examine Instagram. Instagram used to maintain a very specific aspect ratio of one to one in their user posts.

This is apparent as have since expanded somewhat, but part of their aesthetic appeal and continuity initially came from their devotion to this one to one image aspect ratio. This also enabled them to appear consistent across platforms, whether the user chose to login on a mobile, tablet, or desktop device.

While you may not choose to shape your platform heavily around a specific aspect ratio, there is one commonality across many social media platforms. When users upload photos for their avatar, there is the need for a standard one to one image aspect ratio.

Many platforms choose to use a circular photograph in order to present user avatars, and equal cropping for these photos is easiest if a square photo is uploaded.

This is why understanding your target aspect ratio for the different parts of your platform is critical. Similarly, this makes building the processes to support converting images successfully to these aspects necessary.

Luckily, there is a way for developers to easily handle image aspect ratios using one simple command. For example, with Filestack you would just need to call the resize task and set fit to scale:

https://cdn.filestackcontent.comresize=width:400,height:400,fit:scale/HANDLE

Storage

Logically, when working with images or other types of content on such a large scale, storage and space are factors that should not be left out of consideration. This topic overall is broken down into many smaller pieces, but let’s start with managing the incoming content stream.

One challenge is that many incoming files could vary significantly in size. For instance some images may be completely uncompressed, and others may be small thumbnails with barely any space requirement at all.

When crafting the processing pipeline that will send these photos to storage, it is helpful to create a minimum and maximum size. This allows the server to function properly when faced with either a file so large or so small that it interferes with the programmed processing approach.

In order to enforce the maximum and minimum limits, a transformation algorithm is often necessary to convert anything that falls outside of this range. Without a transformation algorithm and size limits, you could easily run into server crashes. These could affect your live application, rendering your website or app unusable.

Another risk is that you could incur large charges from a cloud storage provider for keeping all of the large files in the data centers.

That’s why most companies use services that let you handle storage with ease. When choosing the ideal file upload service, you need one that supports the biggest cloud storage platforms right out of the box.

Filestack supports Amazon S3, Google Cloud Storage, Azure Blob Storage, and other popular cloud storage platforms. For example, it lets developers set up their Amazon S3 IAM with the following code:

{
    "Version": "2012-10-17",
    "Statement": [
        {
        "Effect": "Allow",
        "Action": [
            "s3:GetObject",
            "s3:PutObject",
            "s3:PutObjectAcl",
            "s3:DeleteObject"
        ],
        "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        },
        {
        "Effect": "Allow",
        "Action": [
            "s3:ListAllMyBuckets",
            "s3:GetBucketLocation"
        ],
        "Resource": "arn:aws:s3:::*"
        }
    ]
}

Learn more about other supported storages

The Uploading Interface

Now that you have considered the storage implications, let’s look at the actual process of uploading itself. The first thing to consider when it comes to uploading is the location of your user base.

If you’re looking to build a global social platform, you may have users based all over the world who are looking to upload content to your platform. Most likely, they will expect to do so without significant delays.

Their internet connectivity may vary based on region, and the size of their upload will also be a changing factor.

Lastly, your users may choose to upload from a mobile device, tablet, or desktop computer, depending on what is available and convenient to them. The unfortunate truth is that in the modern world, content based platforms are expected to support every case scenario with grace, timeliness, and ease.

This is because the precedent exists in social media giants like Facebook, Instagram, and TikTok. This also applies to cross-platform compatibility, as in Apple and Samsung devices. Users would expect the experience of, say, taking a photo with their phones and uploading it to a content stream, to be the same across devices.

Another main consideration will be storage providers. You will first have to make the decision as to whether you want to store your data locally or on a cloud service. Storing data locally is not something that is necessarily recommended if you intend to scale your application.

Scaling physical resources requires fixed time and monetary expense that can be difficult to acquire quickly when accommodating for sudden surges in content influx. If you want to avoid this dilemma, you can instead choose a cloud storage provider.

With the help of cloud services like Amazon Web Service or Google Cloud Storage, you will be able to scale quickly and efficiently. Many of these services offer infinite scaling, which is fantastic when you don’t know what the surges in content to your application may look like.

However, you will be paying proportionately for every megabyte of content you are storing. So, properly estimating and utilizing your space is critical for creating a cost-efficient application.

Let’s follow an example through our network to get a better idea of the scaling issue in social media. Imagine we have an image of JPG format, and we have changed its aspect ratio to a one by one to stay consistent with our platform. In this case, it might be 500 pixels by 500 pixels, or 50 kilobytes.

Now we have to deliver this content, and we aren’t just delivering it to one or two people. It must go to thousands, or even millions of people, in countries around the world.

And when that happens, if you’re using a cloud storage platform, you would have to check if you can handle the increase in both budget and allocated storage. Worse, if you are storing data locally, your server’s resources might not be able to handle it.

Whatever your storage preference, you would need to be ready for possible scaling issues that may arise from an increase in the number of users. The content delivery problem is often overlooked in social media and can be as detrimental to the business as the content upload pipeline if neglected.

Content Distribution

Content distribution is also critical to generating a worldwide network of happy users. Whether you have a user in India, Europe, or Australia, they still expect content to load quickly when they refresh the page.

This is where a Content Distribution Network, abbreviated as CDN, would come into play. A CDN helps to cache images and allow different servers across the world to deliver them to users much faster compared to storing them in a single location.

A CDN can also help you understand how to limit the usage of your data, because it can access the content better and deliver it at a lower cost.

That’s why when you’re building a social media or any contentcentric app, you should consider serving content through a CDN. Some third-party file upload services that use CDNs for file access let you do this effortlessly.

For instance, Filestack leverages a CDN to ensure fast and reliable global access to your assets. The CDN is used to access all files that are managed by your Filestack application.

This is the base URL for all assets on the Filestack CDN; a file can be accessed by appending its handle:

https://cdn.filestackcontent.com/HANDLE

You can also specify the amount of time for how long the file should be cached in your CDN. For example, cache=expiry:31536000 will set the cache duration for 1 year but when cache=false, you will always receive a newly converted file.

https://cdn.filestackcontent.com/cache=false/HANDLE

The Uploading Interface

WhNext, we must dive into media transforms. Media transforms at first may not seem critical to the process, but they are highly important for better user experience.

Take, for example, the upload interface itself. Many users assume that upload platforms nowadays will all be drag and drop.

This refers to simply clicking on a file and hovering it over a certain area in the screen to automatically upload it. While this seems simple and intuitive to them, as developers, we know this is much more difficult than it often seems.

Let’s look at a regular website with a standard upload form. An upload is, more or less, a form, having an input and a submit button.

But what if we compare it to the drag and drop models seen often in leading social media and business sites? You can tell that much of this functionality has been abstracted and moved behind the scenes.

Additionally, to a user it may seem simple to move from dropping only one media file into an upload pane to dropping multiple, However, for developers, there is quite a bit of work that must go into the back end in order to facilitate that new functionality. It’s important then to create an upload interface flexible enough to accommodate for new features and match the newest UI upgrades that most major platforms roll out.

Additionally, showing real time upload progress to the user has also become a recognized standard in the industry. It helps alleviate user frustration and often helps users remain patient even if the upload time does happen to be higher for whatever reason.

This, however, is trickier than it might seem. It requires checking on an ongoing operation and not simply estimating the time to completion or displaying an infinitely rotating wheel on the screen. You will have to factor in the correct threading and callbacks in order to retrieve the upload status if you choose to create this functionality from scratch.

Lastly, users now expect previews for content. They want fluidity as well, so this means that they should not have to refresh the page in order to view their newly uploaded avatar or post.

Thus, the uploaded content must be immediately transformed to the correct aspect ratio or thumbnail and displayed, which does not leave much room for processing or error.

Enhanced Media Features

Image Effects

Beyond media transforms, there are some enhanced features that users have come to expect. Here, we are going to be looking at transitioning content after upload to the cloud and making changes to it while it’s in flight.

One of the first necessary transforms is image editing. Users may expect that they can rotate, crop, or zoom into their image and view the changes in real time to decide on the appropriate avatar or thumbnail.

These changes must be appropriately displayed, captured by the cloud server when the photo is saved, and then rendered accurately later on. While this functionality may have only been native to photoshop in the past, most social media platforms now allow some degree of photo editing to be built into the upload process.

This saves users time and is more convenient, and also further encourages the use of the platform even if they were not planning on posting something otherwise. Click here to learn more about adding image effects to your application.

Isometric_Woman_Use_Megaphone_Promote_Her_Social_Media_on_Smartphone

File Type

The next enhanced feature that is smart to consider is file type, with regard to quality. While we’ve already discussed many different types of image files, it’s important to look at their size as well.

An image may look great at five megabits, for example. But when shrunk down to 50 pixels by 50 pixels, it might lose all the quality that made it fantastic.

In many cases, we might use 1080 pixels by 1080 pixels, which is what is used for Instagram. This quality size will almost always end up being a megabyte or two, which is quite large.

Sometimes, on a social media platform, you may actually want to seek out a middle ground instead. Because in many cases the upper changes in quality are not actually visible to the human eye.

At this point, it is not necessary to be storing more information than relevant, as it will not change the user’s experience at all.

Image Filters

On to a very social media specific enhanced feature: filters. Filters rose with Instagram and have only continued to grow since. With names such as ‘opal’ and ‘sunset’, they allow users to add an aesthetic quality to their photo.

They can highlight certain features or color schemes that may not have been present in the original image. These are slight changes in the brightness, saturation, contrast and shades that are all applied to the image behind the scenes. Together, they form a similar but distinct image with a more emotional feel. Learn more.

Image Overlays

Now, distinct from filters, we have overlays, which is arguably one of the most fast growing areas of social media. Overlays have become wildly popular especially on TikTok, where creators have enjoyed adding text in various formats over their videos to convey other messages or even subtitles.

Overlays may also consist of images or GIFs that exist with a transparent background while the creator media plays in the background. This trend has created an expanse of new creative formats for these videos.

This has helped to greatly increase user engagement, especially as many overlays now allow users to put the comments of other users directly in their videos as an overlay. They can then respond to it in real time and point out the different aspects of that comment in their video.

Increasing user control and ability to alter and respond to other user content truly has allowed the ‘networking’ aspect of social media to skyrocket. This is yet another infrastructure decision that allows for the social media platform to take on a life extensively on its own.

Many of these media transformations have become non-negotiable to users, who now expect these overlays and filters to be standard in new content based platforms. Want to see an overlay in action? Check out this demo.

One last issue to consider with transformations in performance. The performance aspect mainly stems from processes in the background. Hence, programming these overlay and filtering processes to not infringe significantly on the user experience and slow down a user uploading

Artificial Intelligence in Social Media

Object Recognition and Recommendation

Next, let’s move on to artificial intelligence and some of the tools that have now become helpful to content based creators. Object recognition has lately become a useful tool.It allows for the tagging and storing of videos into categories that can then be suggested appropriately to the users who are interested in these objects.

The basis of many of these algorithms is machine learning approaches. These use feature extraction and recognition to boil images down to the most useful components and categorize them.

When users upload content to the cloud, you may have millions of photos that you need to categorize and appropriately redirect. So, being able to apply filters to determine the content of each photograph will be extremely useful.

From here, you can use recommendation algorithms to properly display the appropriate content to users based on their previous interactions and presumed preferences. These algorithms are continuously evolving, but generally fall into three categories: collaborative, content-based, and hybrid filtering.

The one most pertinent to object detection would be content-based filtering. It involves finding the attributes that a user is searching for or interacting with on a platform. It then searches through the content.

use a database to find the closest neighboring nodes that share commonalities. This can only be done if the features of the content are well defined, and this is where object recognition and detection becomes so important.

hand-touching-ui-unlocking-with-face-identification-facial-recognition-concept

Optical Character Recognition

Machine learning tools can be even more useful when it comes to extracting information from user based content. You may not only want to identify objects from a photo – you may want to fully extract text as well. Optical character recognition is a rapidly evolving subfield of machine learning that allows photos to be processed to extract text features from them.

An example would be the license plate number from the photo of the back of a car. One use case for OCR that is very applicable to social media is the sign up process on online platforms. Very frequently, bots will attempt to sign up and pretend to be real human users when sharing information and posts, which can be damaging to the platform.

OCR can be used to display and capture text from a user to verify that the person is not a bot trying to sign onto the platform. This is also extremely useful for banks or other more official organizations. They may want to allow you to deposit checks or verify other documents and parse images of your license, passport, or check in real time.

The downside to this is that it’s very difficult to implement on your own. That’s why leading file uploaders have included OCR in their services.

An example of this is how Filestack can detect both printed and handwritten texts in images. Using the service, you would have to send API calls in the form of

https://cdn.filestackcontent.com/<FILESTACK_API_KEY>security=p:<POLICY>,s:<SIGNATURE>/ocr/<EXTERNAL_URL>

And it will return a JSON object containing all of the details regarding detected text areas, lines, and words.

Explicit Content Detection

One of the last artificial intelligence features which has become crucial to functioning social media platforms is a high quality explicitly content detection filter. In the modern day and age, social media is flooded with malicious content.

Seeing content that violates the basic agreed upon moral decency standards set by the platform can severely damage a user’s experience. But manually filtering all of this “Not Safe For Work” material would be nearly impossible without a massive team. This is why incorporating machine learning tools is so critical to maintaining the integrity of your content-based platform.

Filestack can be used to detect SFW status for both images and videos. For images, send a request through:

https://cdn.filestackcontent.com/security=p:<POLICY>,s:<SIGNATURE>/sfw/<HANDLE>

And it will return “sfw”: true or false indicating if the file is safe for work or not.

Copyright Status Detection

Lastly, with so much content being uploaded mainly in the form of images, it’s critical to consider the legal implications of hosting and displaying this content. Copyright law is an area that few tech founders have a solid understanding of initially.

However, it is one that becomes required soon after beginning to face the influx of user uploads once the social media site is up and running. Understanding what copyright denotes is the first step to understanding your obligations as a platform manager when it comes to hosting user uploaded content.

A copyright is a protection that is placed on media that gives the rights to display and monetize the media to the original creator of the content. Now, all images inherently give the copyright to the original photographer.

But stronger protections only come with registration of this content with the federal government (in the case of the United States), although laws can vary from country to country.

Copyright infringement is the illegal use of someone else’s media and generally can be punished under law. The punishment can include hefty fines of tens of thousands of dollars or even jail time, depending on your locality.

In certain countries like the United States, there are other charges as well for the groups that are seen responsible for aiding in copyright infringement. These are known as ‘contributory copyright infringement’ charges. These are the charges that as a social media platform owner you will want to be wary of.

They are directed more towards those who enable copyright infringement instead of the actual infringers themselves. And if many users are regularly uploading images that are not their own or are stolen in some manner, there could be a complicated legal situation as a result.

The best thing you can do in this circumstance is take reasonable action to protect yourself against such a situation by screening user uploads for copyright status. This technology actually does exist.

And with a bit of machine learning, it is possible to identify the current copyright licenses attributed to an image with a simple API call. This can easily help you screen out images that should never or carefully be used to avoid sticky legal situations that could cause you financial and reputational harm.

Detect if the uploaded file has a copyright or not by sending a request to

https://cdn.filestackcontent.com/security=p:<POLICY>,s:<SIGNATURE>/copyright/<HANDLE>

It will return if the file is copyrighted or not. If it is copyrighted, it will return information about the license too.

Conclusion

Now, all in all, we have covered over half a dozen machine learning tools that can assist you when building out your social media platform. On top of that, we have identified key considerations that you should take into account when building out your storage, uploading interface, and content distribution network.

The truth of the matter is, handling all of this on your own would be an extremely difficult task. It is one that would likely take years, with teams and teams of developers with different specializations in order to perfect.

This could greatly slow your product coming to the market, and in a field where time is money, could greatly affect your profit margins. That’s why it’s important to find reliable third party groups to delegate the supporting tasks to, so you can focus on the core of your content based platform.

At Filestack, we can provide you not only with a fully featured uploading interface that supports drag and drop uploads, custom upload sources, and more. We can also provide a fully supported CDN and a library of machine learning tools to fill every need mentioned here. Our content delivery network guarantees delivery by maintaining a worldwide system of points of presence that allow for flawless content transportation, regardless of where your user may be.

Filestack integrates with popular cloud storage providers like AWS, Google Cloud Storage, and Azure to create an effortless experience integrating our service into your existing application. Additionally, our machine learning suite features object detections tools, advanced OCR (that can be coupled with document pre-processing, for business forms), explicit content detection, copyright status detection, and more.

All of these features are available using simple API calls and do not require incorporating complex algorithm infrastructure into your application. Simply place a single call, receive the result instantly, then use those insights to build out a powerful next generation content based platform.

We hope that you will check out all that Filestack has to offer. At Filestack.com, you can explore even further options that will allow you to bring your ideas for a social media platform to life.

Did you enjoy this content? If so, you will enjoy trying our file handling service for free even more. No commitment or credit card required. Just visit Filestack.com to get started today.