Social Embed

Social Embed

Block Used
Social Embed
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to build social media (embed) content using the social network for your website/product. Then we have created a superior and well-designed block. With the help, you can generate certain types of content and give a custom fresh look to the web page/post/article, which will help you engage your audience to the website/product.

Pro tip
Why don’t you use this block? Because with the help of this block, you can implant and see as many options as there are social media (embed) posts, videos, pages, etc of other people.

How to use the Social Embed Block of The Plus Addons For Gutenberg

The Social Embed block comes with five embed types. With the custom styling options, you can make a pleasant and suitable layout.

General Steps

Search for the Social Embed element from the Gutenberg screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Social Embed block. First, click on the Content tab.

1. Content

Social Embed

1.1: Embed Options

Select Embed Type

We have provided five different types for the social embed. Select your desired type for the social embed. The types we provided are:

Facebook
Twitter
Vimeo

Instagram
YouTube

1.2: Facebook

Select Facebook Type

We have provided seven different post types for the Facebook option. Select your desired post type for the Facebook option. You can watch this video to know more about it. The types we provided are:

Comments
Posts
Videos

Page
Like Button
Save Button
Share Button

Options

We have provided two different comment types for Facebook. Select your desired comment type for Facebook. You can watch this video to know more about it. The types we provided are:

View Comments
Add Comments

Comment URL

With this option, you can set the post URL of your Facebook account and see the comment for view comment option here.

App ID

With this option, you can set the app id of add comment for the Facebook option here.

Create App ID

With this option, you can create the app id of add comment for the Facebook option here.

Target URL

We have provided two different target URL options for the add comment. Select your desired target URL options. The options we provided are:

Current Page
Custom

URL Format

We have provided two different URL format options for the current page. Select your desired URL format options. The options we provided are:

Plain Permalink
Pretty Permalink

Custom URL

With this option, you can set the custom URL for the add comment option when the custom option is selected in the target URL menu.

Post URL

With this option, you can set the post URL for the Facebook option when the posts option is selected in the Facebook type menu.

Videos URL

With this option, you can set the video URL for the Facebook option when the videos option is selected in the Facebook type menu.

Page URL

With this option, you can set the page URL for the Facebook option when the page option is selected in the Facebook type menu.

Target URL (Like-Button)

We have provided two different target URL options for the Like Button. Select your desired target URL options. The options we provided are:

Current Page
Custom

URL Format (Like-Button)

We have provided two different URL format options for the current page. Select your desired URL format options. The options we provided are:

Plain Permalink
Pretty Permalink

Like Button URL (Like-Button)

With this option, you can set the like button URL for the like button option when the custom option is selected in the target URL menu.

Save URL

With this option, you can set the save URL for the Facebook option when the save button option is selected in the Facebook type menu.

Share URL

With this option, you can set the share URL for the Facebook option when the share button option is selected in the Facebook type menu.

Read More About All Options

With this option, you can see all the related options of Facebook in detail.

Facebook Options

Parent Comment

By enabling this option, you can see the comment for the view comment option on the parent side here.

Width

With this option, you can set the width of the comment box for the view comment option here.

Height

With this option, you can set the height of the comment box for the view comment option here.

Comment Count

With this option, you will see as many comments as you have set for the add comment option here.

Order By

We have provided three different order types for the add comment options. Select your desired order type for the add comment options and set the order of comments as you want. The types we provided are:

Social
Reverse Time

Time

Show Text

By enabling this option, you can see the post detail for the posts option here.

Width

With this option, you can set the width of the post for the posts option here.

Height

With this option, you can set the height of the post for the posts option here.

Allow Full Screen

By enabling this option, allows you to make the video fullscreen.

Autoplay

By enabling this option, allows you to make the video autoplay.

Captions

By enabling this option, you can see the video detail (captions) for the videos option here.

Width

With this option, you can set the width of the video for the videos option here.

Height

With this option, you can set the height of the video for the videos option here.

Layout

We have provided three different layout types for the page options. Select your desired layout type for the page options and see the page-related content. The types we provided are:

Timeline
Events

Messages

Small Header

By enabling this option, you can see the header on the page for the page option here.

Cover Photo

By enabling this option, you can see the cover photo on the page for the page option here.

Show Friend’s Faces

By enabling this option, you can see the face of the friend who is following the same page for the page option here.

Custom CTA Button

By disabling this option, you can see the contact us button on the page for the page option here.

Width

With this option, you can set the width of the page for the page option here.

Height

With this option, you can set the height of the page for the page option here.

Size

We have provided two different sizes of the button for the like, save, share button options. Select your desired size of the button for the like, save, share button options. The sizes we provided are:

Small
Large

Type

We have provided two different types of like button options. Select your desired type for the like button options. The types we provided are:

Like
Recommend

Layout

We have provided four different layout types of like button options. Select your desired layout types of like button options. The layout types we provided are:

Standard
Button

Button Count
Box Count

Color Scheme

We have provided two different color types of standard layout for the like button options. Select your desired color types of standard layout for the like button options. The color types we provided are:

Light
Dark

Share Button

By enabling this option, you can see the share button along with the like button for the like button option here.

Faces

By enabling this option, you can see the face of the friend who has liked the same page for the like button option here.

Width

With this option, you can set the width of the like button for the like button option here.

Height

With this option, you can set the height of the like button for the like button option here.

Layout

We have provided three different layout types of share button options. Select your desired layout types of share button options. The layout types we provided are:

Button

Button Count
Box Count

Width

With this option, you can set the width of the share button for the share button option here.

Height

With this option, you can set the height of the share button for the share button option here.

1.3: Twitter

Embed Type

We have provided three different types of twitter embed. Select your desired type of twitter embed. The types we provided are:

Tweets Embed
Timelines Embed

Buttons Embed

Tweets Repeater

We have given two tweet fields of tweets embed options for twitter type. You can set, add and remove the field what you want to do it. The options we provided are:

Tweet URL

With this option, you can set the tweet URL for the Twitter option when the tweets embed option is selected in the Twitter type menu.

Loading Message

With this option, you can set the custom loading message for the tweets embed here.

Guides Contents

We have provided four different types of. Select your desired type of timeline embed. The types we provided are:

Profile Timeline
Likes Timeline

List Timeline
Collection

Layout

We have provided two different layout types of timelines embed. Select your desired layout types of timelines embed. The types we provided are:

Grid style
Linear style

List URL

With this option, you can set the URL of the list timeline for the timelines embed option.

Create List

With this option, you can create the URL of the list timeline for the timelines embed option.

Collection URL

With this option, you can set the URL of the collection for the timelines embed option.

Create Collections

With this option, you can create the URL of the collection for the timelines embed option.

Button Type

We have provided six different button types of button embed options. Select your desired button types of button embed option. The types we provided are:

Tweets
Follow

Direct Message
Like
Reply
Retweet

Username

With this option, you can set the username for timelines and buttons embed option here.

Message ID

With this option, you can set the message-id for Direct Message button type here.

Tweet ID

With this option, you can set the tweet id for like, reply, retweet button type here.

Read More About All Options

With this option, you can see all the related options of Twitter in detail.

1.4: Twitter Options

Dark Mode

By enabling this option, you can see the dark background in the post for the tweets and timelines embed option here.

Disable Media

By enabling this option, you can’t see any media in the post for the tweets embed option here.

Disable Conversation

By enabling this option, you can’t see the conversation in the post for the tweets embed option here.

Alignment

With this option, you can set the alignment of the post here.

Separator Color

With this option, you can set the color of the separator in the post for the timelines embed option here.

Button

We have provided five different button options for the timelines embed option. Select your desired button options and you can select multiple button options too. The types we provided are:

No Header
No Footer
No Borders

No Scrollbar
Transparent

Tweet Limit

With this option, you can set the tweet limit for the timelines embed option here.

Width

With this option, you can set the width of the Twitter post for the tweets and timelines option here.

Height

With this option, you can set the height of the Twitter post for the tweets and timelines option here.

Button Size

We have provided two different sizes of the button for the tweets, follow, direct message button types. Select your desired size of the button for the tweets, follow, direct message button types. The sizes we provided are:

Normal
Large

Tweet Text

With this option, you can set the custom tweet text when the tweets option is selected in the button type menu.

Page URL

With this option, you can set the custom page URL when the tweets option is selected in the button type menu.

Hashtags ( Tag1 #Tag2 )

With this option, you can set the hashtags when the tweets option is selected in the button type menu. For example #tag1, #tag2

Via ( Tag1 @Tag2 )

With this option, you can set the via (mention) when the tweets option is selected in the button type menu. For example @tag1 @tag2

Followers Count

By enabling this option, you can see the followers by number for the follow button type here.

Disable Username

By enabling this option, you can’t see the username in the button for the follow and direct message button type here.

Message Text

With this option, you can set the custom message text when the direct message option is selected in the button type menu.

Disable Icon

By enabling this option, you can’t see the Twitter icon for the like, reply, and retweet button type here.

Button Text (Like)

With this option, you can set the custom button text when the like option is selected in the button type menu.

Button Text (Reply)

With this option, you can set the custom button text when the reply option is selected in the button type menu.

Button Text (Retweet)

With this option, you can set the custom button text when the retweet option is selected in the button type menu.

Loading Message

With this option, you can set the custom loading message when the buttons embed option is selected in the Twitter embed type menu.

1.5: Vimeo

Vimeo ID

With this option, you can set the video id for the Vimeo type menu here.

Vimeo Option

We have provided fourteen different Vimeo options. Select your desired Vimeo option and you can select multiple options too. The options we provided are:

Loop
Muted
Speed (Pro Account)

Title
Autoplay
AutoPause
Portrait
FullScreen
Background (Plus Account)
PlaysInline
Byline (Username)
Transparent
Do Not Track (DNT)
Picture In Picture (PIP)

Read More About All Options

With this option, you can see all the related options of Vimeo in detail.

Video Start Time

With this option, you can set up a custom time to start the video for the Vimeo type menu here.

Text Color

You can set the text color with this option and see when you hover over the video option for the Vimeo type menu here.

1.5: Instagram

Instagram Type

We have provided three different post types for Instagram. Select your desired post type for Instagram. The types we provided are:

Posts
Reels
IGTV

Instagram ID

With this option, you can set the Instagram id of the selected post in the Instagram type menu.

Disable Captioned

By enabling this option, you can’t see the post detail (captions) for the Instagram option here.

Read More About All Options

With this option, you can see all the related options of Instagram type in detail.

1.6: YouTube

YouTube Type

We have provided three different video types for youtube. Select your desired video types for youtube. The types we provided are:

Single Video
Playlist Video
Users Video

Video ID

With this option, you can set the video id when the single video option is selected in the youtube type menu.

Playlist ID

With this option, you can set the playlist id when the playlist video option is selected in the youtube type menu.

Username

With this option, you can set the username when the user’s video option is selected in the youtube type menu.

YouTube Option

We have provided nine different youtube options. Select your desired youtube option and you can select multiple options too. The options we provided are:

Loop
FullScreen
Autoplay

Muted
Controls Enable
Disable Keyboard
Disable Youtube Icon
PlaysInline
Related Video

Read More About All Options

With this option, you can see all the related options of youtube type in detail.

Start Time

With this option, you can set up a custom time to start the video for the youtube type menu here.

End Time

With this option, you can set up a custom time to end the video for the youtube type menu here.

Language

With this option, you can set the language (ISO 639-1) code for the youtube type menu here.

Language ISO 639-1 Code

With this option, you can see the different language (ISO 639-1) code for the youtube type menu here.

1.7: Extra Options

Width

With this option, you can set the width of the post for the Vimeo and Youtube type menu here.

Height

With this option, you can set the height of the post for the Vimeo and Youtube type menu here.

2.Style

The Style tab is used to customize all the Social Embed block components such as Embed Options.

Embed Options Style

Set Content Alignment, Color, Background, Border, Border Radius, Box Shadow, (Vimeo, Instagram, Youtube Option: Border Style, Border Width, Border Color, Box Shadow Options), and Outer Background Option for the Embed Options here.

Preview

Here you can see with detail how the Style option of the Social Embed Block works.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.