Make it easier for readers to share your content with social sharing buttons.
For example, after making visual content like an infographics these options can help people share:
- With their social networks
- On their websites
This is done using embed codes.
Using embed codes so visitors can easily share visual content on their blogs:
- Encourages sharing
- Generate inbound links
For example, with embedded images linking back to your website.
Embed codes are easy to create with this Embed Code Generator.
In this article we will learn how to do that.
So let’s dive right in.
Before Creating Embed Codes
Before generating the embed code, do the following:
- Upload the full resolution infographic file to the web page
- Resize the image to fit the page width
Remember, giving visitors the option to view the infographic in full resolution improves user experience.
So, provide a link from the resized image to the full resolution one.
And underneath, write “Click infographic to enlarge” so visitors know to click for the larger version.
Note: Configure the link to open in a new tab in their browser when clicked.
Because doing so allows visitors to easily click back to your blog post tab after.
Generate Embed Codes
To start, click on this Embed Code Generator and fill out the form:
Website Name
This is the URL that people embedding your infographic mention.
It’s included in a message to the person embedding the infographic.
Reminding people to mention and link back to you as the source.
Blog Post URL
This is the URL where the infographic is on your website.
So if you’re publishing your infographic on your blog, use the URL for that post.
And it’s where your infographic, that’s embedded on another website, links back to and gives you inbound links.
Image URL
This is the image’s URL of the infographic on your website.
After uploading your infographic on your blog post:
- Right click the image
- Then click “Copy Image URL”
Use this URL to paste here.
Image Alt
Add alt text describing your infographic.
Use the title of the infographic plus the word infographic.
Image Width
This is the width of the embedded infographic.
The width depends on the website’s width.
Note: Use the embed code to fit the website using the width=’600px’ section.
Image Height
Keep this option this empty so the infographic is in proportion to the width.
Width of Embed Box
This is the width of the box showing the embed code on your web page.
For example, if your blog is 650 pixels wide, make it the same so the embed box matches the width of your blog.
Height of Embed Box
This is the height of the box showing the embed code on your web page.
If it’s higher:
- It uses more space
- Users won’t have to scroll to see the full embed code
Done
Now copy and paste the code in the webpage’s HTML where the embed code will show.
You can place it under the infographic, so after reading your infographic someone can decide to embed it.
Or, you can place it on top, for people revisiting your page for the infographic’s embed code.
Preview
Now take a look at how the embed code will appear on your web page.
Conclusion
An extra tip would be to:
- Create a “Pin it” button for your infographic
- Add it next to your infographic
Because Pinterest is full of visual content and this would make it easier for Pinterest users to share your content.
Now it’s over to you.
Tell me about your successes using embed codes to improve infographic reach.
Let me know in the comment section below.
Pingback: Link Building for Higher Rankings - XXMG