WordPress Social feed

Display Your Social Contents In An Appealing Way Using Happy Addons Social Media Feeds (Facebook, Twitter, Instagram)

In recent years, online marketers continuously remodeling their strategies to keep pace with the fast advancement of digital marketing. Social media marketing is one of its efficient wings to expand your business globally in the shortest time.

More than 52% of social media marketers expressed that social media has helped increase their company’s revenue & sales

Clutch

In the way you use social platforms to increase your website visitors, your website can also be a great way to promote your social platforms as well. Having a seamless connection between social media and your site- you can extend your online networks and improve conversion rates too.

In today’s blog, we’ll walk you through a simple way of integrating social media feed on an Elementor website.

Lets get started with-

Why You Should Embed Social Media Feeds on Your Website

WordPress social feed

In simple words, ‘Social media feed‘ means a platform (on a website’s page) where visitors get interacted with social posts, comments, replies from Facebook, Twitter, Instagram, etc.

‘Feed’ is an effective medium that provides updates whenever new content is available.

Well, let’s shortly know how social feeds on a website can instantly contribute to business success in the following ways:-

  • Provide relevant web content to the users
  • Shares collaborative tools
  • Show contact & location Information
  • Increase social engagement & subscribers numbers
  • And more

However, social feeds can effectively target the communication objectives of an organization; also give personalized service to users. Therefore, it can boost business growth by streamlining and enhancing all marketing efforts into one successive plan.

Introducing Happy Addons Social Media Feed: An Easy Way to Display Your Social Contents

Social Media Feed
WordPress Social feed

Both websites and social channels have the ability to generate leads & conversions. But what if you could merge these two platforms into one. Of course, it will produce some remarkable results.

And this is where social feed on the website does the trick. Users will able to see your social activities (recent posts, comments, reviews, and more) while browsing the website at the same time.

Let’s assume that you want to show your social content to your Elementor site. If you have Happy Addons then you require no other tools for your social post embedding. Happy Addon’s social media feed makes this task easier than ever.

However, Happy Addons includes four widgets in social feed features. So in today’s tutorial, we’ll show you the functionality of these social feed widgets one by one:-

  • Facebook Feed (Pro):- It will help you to display the feed of your Facebook page on the website in a different & creative way.
  • Twitter Feed (Free):- A perfect widget to showcase your twitter posts, retweets, likes, replies, and more.
  • Twitter Feed Carousel (Pro):- Showcase your social updates through Twitter Feed Carousel applying various styles, texts, images, and social links.
  • Instagram Feed (Pro):- Display your beautiful photos from your Instagram accounts with tons of styles using Happy Instagram widget.

Below we’ll show you the steps to add these social platforms on your WordPress site using Happy Addons.

How to Connect Your Social Media Feed to Your Elementor Website

Social media feed

To get started with the process, you must have the following things:

Do make sure that you have a domain name & purchased hosting plan for your WordPress site.

Now configure your WordPress site by installing Elementor & Happy Addons. Then, follow the below instructions step by step.

However, if you are new in Elementor, check out this article on how to create a landing page in a few steps.

How to Use Facebook Feed Widget

First of all, navigate to that page you want to add Facebook Feed widget. Here’s is how your initial surface looks like.

Facebook Feed

Next, search for ‘Facebook Feed‘ on the left top corner of the screen. And then select the widget; drag it to the marked area.

Elementor widget

Now, you need to insert your preferred Facebook page ID & access token.

Facebook feed

Generate Page ID & Access Token

To generate Page ID & access token, navigate to Facebook Developers Account. Here you need to login first. Then create an app & click on the My App button.

Facebook Developer

Next, fill the box and click on the ‘Create App ID

Create App ID

Click on the ‘Tools‘ and select ‘Graph API Explorer

Social Media Feed

Then click on the ‘Get access Token‘ button. Select access token for a page. And you will get the below window. Continue with your id.

Get Access Token

Now select your preferred page that you want to display on the website.

Social Media Feed

Click on the ‘Done’ button.

Social Media Feed

Hit the submit button. But before you do that, you need to select your page first. Hurrah! Your page ID and access token is ready to apply. So copy them.

Facebook Feed

Now paste the page ID & access token number here. So after adding Page ID & token number, your page’s posts will be shown up.

Here’s is how it will look like:-

Facebook Feed

Customize Your Facebook Feed Design

Now it’s time to customize and give a design to it. To do that click on the ‘Facebook Page Settings‘. Here you can customize a few things.

For example, you can show:-

  • Recent Posts
  • Old Posts
  • Likes
  • Comments

And also you can toggle on-off Column Show, Feature Image Show, Facebook Logo Show, Profile image Show, Name Show Date Show, Likes Count, Show Comments, etc.

Social Media Feed

To update its settings like alignment, footer, header, and feature image position, tap on ‘General Settings

Social Media Feed

You have more options in your hand to give a stylist & lucrative look over the Facebook social feed widget. Just click on the ‘Style‘ button.

Here you can stylize:-

  • Common: Size, padding, margin, shadow, box-shadow, space, etc.
  • Feature Image: Image size, margin, padding, shadow, box-shadow, border, etc
  • User info: Page logo, size, space, height
  • Content & Footer: Like the same way, you can also customize content & footer’s padding, margin, space, color and more.
Social Media Feed

So after designing the widget, the final look on the website will be:-

Social Media Feed

Anyways, you can also check out our official documentation of ‘Facebook Feed‘ for an advanced guideline.

How To Use Twitter Feed Widget

To add Twitter Feed on the website, select the ‘Widget’ and paste it on your marked area.

Social Media Feed

After you add the widget, you’ll need to put a User ID & Access token to get started with the process.

Social Media Feed

Now you’ll need to carefully follow the instructions to get Access Token & User ID.

  • Create a twitter developer account
  • Generate Access Token & User ID
  • Implement on the Website

Create a Twitter Developer Account

To create a developer account, navigate to the twitter developer onboarding page. And then click on the ‘Create an app‘.

Social Media Feed

Next, you’ll have a window where you asked to fill-up some formalities. It says for what purpose you need an API key. As we are going to use Twitter feed, so click on ‘Exploring The API‘.

Social Media Feed

After that you’ll get some form to fill up. This is how they will ask you about how you’ll utilize the twitter data, as a developer, etc.

So, provide legal information here by answering some questions.

Social Media Feed

So when you’re done, check mark the option and then hit the ‘Submit Application‘ button.

Social Media Feed

Hurrah! You did it. Now check your email and click to confirm.

Social Media Feed

Well, after submitting the application, it will go under review by the twitter authority to check whether you’re eligible as a developer or not.

So ready for the next steps.😊

Social Media Feed

Important note: This review process may take two or more days, so you should always keep an eye on your email.

Get Access Token & User ID

So after getting approved by the Twitter authority, again log into your twitter developer account.

Developer account

That link will redirect you to the twitter developer dashboard. You are only a few steps away to get your access token & secret key.

Social Media Feed

Next, navigate to Products & Apps -> Overview -> click on Create App

Social Media Feed

Give the name of your app or you can type the purpose of your app here. [Note: Keep it unique]

Social Media Feed
Giving Name of the Apps

After providing a unique name you’ll get your desired Twitter API key & Access token number. So copy it and move on to the next step.

Social Media Feed
Copying API & Secret Key Numbers

Now paste the ‘Consumer key‘ and ‘Consumer secret key‘ with your preferred twitter user name on your Elementor website.

Applying API & User Secret Keys
Applying API & User Secret Keys

Customize Twitter Feed Widget

Automatically, all your tweets will appear next to the right side. So now you can customize, design, and give it an elegant look to make your website more professional & extra-ordinary.

Here you will get, twitter settings, general settings, and wrapper link.

Twitter feed

Here you can select how many posts you want to show, categorize them, and many more.

Social Media feed

In the general setting tab, you can align your posts, contents, and button links.

Social Media feed

To stylize this design, tap on ‘Style‘ button. Here you can customize each and every part and set individual design to make more beautiful.

Social Media feed
  • Common:- This option is for each block. For example, you can set the padding, margin, border, border-type and set a background also.
Social Media feed
  • User Info: In the user info, you can customize user icon, size, spacing, profile photo and more.
Twitter feed
  • Content: To edit content and change its color, tap on the content. And here you will get all the customizing options. For example, content spacing, bottom spacing, colors, button colors, date colors, etc.
Social Media Feed
  • Footer & Retweet: Similarly, you can also customize footer & retweet portion. Tap on the button and change the amount that you like. That’s it!
Social Media Feed

So after finishing with the design, your final look will be:-

Social Media feed

However, to get a quick direction, you can watch the video tutorial below about ‘Twitter feed‘. Here you’ll get a full guideline of how to use or customize twitter feed well. Or you can check out our official documentation for an advanced guideline.

How to Use Twitter Feed Carousel Widget

Well, the ‘Twitter Feed‘ & ‘Twitter Feed Carousel‘ are almost same. But Twitter Feed Carousel offers some extra functionalities. So now we’re going show you how you can use Twitter Feed Carousel on your Elementor site and design it accordingly.

However, you’ll also need a access token & User ID to get started with the process. But the interesting part is, you can use the access token & User ID that you used earlier for Twitter Feed.

So now follow the below instructions carefully:-

Customize Your Twitter Feed Carousel

After you add the user name, Access token & User ID, you’ll see the reflect of your tweets on the right side of your screen.

Social Media Feed

Next, tap on the ‘Twitter Settings‘. Here you can sort out the options according to the below category:-

  • Recent posts
  • Old posts
  • Favorite posts
  • Number of posts
  • And retweets, etc.

Additionally, you can also customize the your twitter logo, profile picture, name, user name, date, react count, retweets count, and read more button, etc.

Social Media Feed

In the settings section, you’ll get more options to customize your design. For example, alignment, footer alignment, user info position, animation speed, how many slides you want to show, post navigation, and more.

Twitter Carousel

Now it’s time to stylize the section. To do that tap on the ‘Style‘ option.

Twitter Feed Carousel

To change the design of the widget, you can change its spacing, padding, border type, box-shadow, and background type, etc in the Common section.

Social Media Feed

Next, you can also customize User Info. For example, User Spacing, icon, profile image, spacing, border type, colors, and typography (name & User Name), etc.

Social Media Feed

Next, you can edit Content & Footer part. Similarly, you can stylize padding, spacing, colors, typography, icon colors, etc.

Social Media Feed

Applying the same process, you can do the process for Navigation arrow & Dots also.

Social Media Feed

Next click on the ‘Navigation Arrow‘ section. So here you can customize arrow position, background, font size, border type, border-radius, color, background color, etc.

Social Media Feed

Well, in the last part of the style section, here you’ll have ‘Navigation Dots‘. You can easily change its styles like vertical position, spacing, alignment, and color, etc.

Social Media Feed

So this is how you can use the Twitter feed carousel on your Elementor site. However, you can take a look at our official documentation on the Twitter feed carousel to get a detailed idea.

How to Use Instagram Feed Widget

The Instagram Feed widget fetches posts from your Instagram account and shows them in a grid view on your website. You need to go through some easy steps to get the Instagram access token.

Check our official documentation and customize your Instagram Feed Widget in your way.

The Ending Notes

Finally, our post has come to an end. Here we have described the easiest way to easily grasp the usages of social media feed and how to implement it directly to your Elementor website.

So if you’re solely intending to increase both web traffic and followers on your social channel, then it’s high time that you should use Happy Addons social feed features.

However, if you’ve any further queries regarding this social media feed, please feel free to reach us anytime. We’ll be glad to answer your all questions.

happyaddons

Share this post

Share on facebook
Share on twitter
Share on linkedin

Related Post

10 Responses

  1. Wow, it’s just a package. Everything is just one place. Surely I will try them for my website. Thanks for showing such a wonderful way.

  2. Outstanding!!!
    The actual path have been showed here, it’s a combination of everything. The way you have covered everything is just WOW 😌

Leave a Reply

Your email address will not be published. Required fields are marked *

0 Shares
Share via
Copy link