How to add Instagram CTA to your Recipe cards.

Love it? Share it!

Recently I have seen a lot of beautiful sites with beautiful Instagram CTAs ( call to action) on there recipe plug ins. I have been curious to know how to do that cos c’mon who doesn’t want a cool stuff like that. If you want to read about nice tips and my background story to how I arrived at this hack read along because I would love it if you do. But if you are in a bleeding hurry, hit the button below ? you save this to read the tips and story later by pinning this post on Pinterest.

This Post May contain Affiliate Links.

Jump to Tutorial

One of those lovely sites is pinch of yum run by the amazing couple Bjork and Lindsay Ostrom. With further research I found out that they use the WP tasty plugin which is an amazing recipe plugin created by Bjork. Hmmm.. I would have switched to this plugin just because of that but I was already using an equally great plug in on my site which is the WP Recipe Maker ( WPRM ) These two Recipe plugins are the top two recipe plugins recommended by Casey Markee a guru in the SEO world who owns mediawyse a digital marketing company I can’t wait for the day my site can be audited by him or should I say I can’t wait for the day I can afford the service of mediawyse. I have heard wonderful reviews from the sites he has audited. He literally works some magic on your site.

Back to the main topic for today which is how to add INSTAGRAM CTA on Recipe Cards. I hear this feature is some where in the works for WP Recipe maker plugin. And yes they are awesome like that, they listen to the needs of their users and work tirelessly to make sure their users are happy ?. Since they are working on it I see no reason to swap to another recipe plugin. Therefore like my usual self I started scoring the internet to see if i could find any way to add this instagram CTA aka ‘call to action’ to my recipe card. I did find one but it was for a different plug in and it needed some coding. Coding is not my thing so I gave up ( for a bit).

One day while editing the recipe card of a one of my recipes I noticed that the button inserter symbol for the forget about short codes plugin was visible in the recipe notes section of the WPRM BINGO!!! light bulb moment ??aha I figured I could use the button inserter plugin to add the CTA button to the bottom of my recipe card and achieve the same result seen in the wp tasty recipe card.

You can see it in action here and here and in the picture above. I love it because it’s customizable to suite the theme of your website and the coolest part of all. NO CODING REQUIRED YAYYY!!!

The only draw back I see here is that the Forget About Shortcodes Button plugin was last updated 1 yr ago. Now I am no expert on plugins but the little I know is that it’s not a good thing when plugins are not updated regularly which means the plug in isn’t supported. So If you intend to use this tutorial on your site, use with caution with the intent to discontinue when we get the upgrade we are waiting for.

I have been using the Forget About Shortcodes Plugin over 4 months on my site for other needs without issues so far hopefully it stays that way because it really has made my life easier.

Another thing to note, I tried this instagram CTA on WPRM because that’s the recipe plugin I use but I guess it may work for other recipe plugins on wordpress. But if you are on the WORDPRESS blogging platform and you aren’t using WP Recipe Maker ( WPRM ) or WP Tasty, I think you should take a look at them and make that switch because according to Casey Markee says they are tops for best SEO ( Search Engine Optimization) practices if you are a food blogger.

How to add Instagram CTA to your recipes cards

STEP 1. Download the Forget About Short Code Buttons Plugin

Installation tip* To Install the plugin you may need to upload the zip file in the upload plugin section of WP admin. When upload is complete then click on install plugin. Then activate the plugin. See the installation section for on the plugin page for better understanding.

Once download and installation of the plugin is completed you will find a new button on the toolbar in your post edit screen of your word press site. This will display a popup allowing you to create a new button in your post/page. In this case your recipe card.

STEP 2. Download the Re-add text underline and justify plugin this step is optional but I will explain why you may want to download it further down this tutorial.

STEP 3. If you haven’t downloaded the WPRM plugin you can do so here. If you already have WPRM or any other recipe plugin, move to step 4

STEP 4. Insert the WPRM recipe card or any recipe card into your post. Go to the recipe notes section of the recipe card. There you will find the Forget About Short Code button. ( See red arrow in image below.) Click on it to open the button editing window.

STEP 5. Click on the text area and type in your call to action. Move over to the URL section and type the URL to your Instagram account.

STEP 6. Click on the icon button to open up the icon screen. Next Click on the drop down menu and select brand. Then browse through the brand logos available and select instagram. Once you select a logo you will notice the default selection of ‘ None‘ moves to ‘Before‘ in the second picture.{ please look are the asterix (star) in the picture.} That indicates where you want the Instagram logo to appear. I usually prefer the logo comes first so I leave it on before.

You are almost set. Now let’s style the button.

STEP 7. STYLING THE BUTTON

a. Color of the button

To change the color of your button and customize to match your theme. Click on the color button and change the colors either by inserting the color code of your color or playing around with the cursor until you get what you want

b. Shape of the button

Click on the drop menu which has ‘Flat’ as its default shape. If want it flat you can skip this section and head to size. If you want a different shape, click on it to open the drop down menu, then select the shape you want. See section A of the image below.

c. Size of button

Next click on the drop menu for size you prefer. The button sizes ranges from small to extra large. I recommend medium or large. Feel free to choose the size you prefer. See section B of the image below

Click update, then save your post and preview your post. You would see the CTA on your recipe card. See image below. On the left is the CTA we just created without coding and on the right is Pinch of Yum’s recipe which I tried to replicate.

Now there is a little snag. Our new creation doesn’t have the Instagram handle or hashtag hyper linked. Unlike the beautiful model we just tried to replicate ?. So our readers may not know they should click on the button to head over to Instagram or that the button leads anywhere.

The only option was to add ‘click here’ to the CTA button which I didn’t quite like so I decided to check if I could underline the words to create a Pseudo hyperlink. Unfortunately WordPress I discovered removed underline and justify in one of their previous updates but looks like there are some plugins that will do the job and that’s where the plugin Re-add text underline and justify comes in

STEP 8. After downloading and activating the Re-add text underline and justify plugin, the symbol of underline will appear on the toolbar of your wordpress editor. It will also be visible on the recipe notes section of your WPRM recipe card.

To add a pseudo hyperlink to your words you will To edit the button you just created to underline those words you want hyperlinked ( which in this case is @mydiasporakitchen and #mydiasporakitchen )

Editing the button to add the Pseudo hyperlink

Click on the button a pen and an x would appear NOTE: DO NOT click on the pen just take your cursor to the word you want to underline, highlight it then click on the underline symbol to underline it. Click update and close and you are done.

Notes:

Editing the button for other purposes

If you want to edit the words on the button you can edit the words right in the button without clicking the pen just like we did above.

If you want to edit any other feature like color or size of the button or any other thing you will need to click the pen to open the edit screen of the button. There you continue to edit.

it’s important to note that once you open the editor to edit the button it nullifies your underline so after editing in the editing screen repeat the step 8 above so that you can recover your underline edit.

Phew ? Finally done with this super long tutorial. I hope you found it useful. If you did, consider dropping a comment I would love to hear how it worked for you. Do you have any questions? Drop them in the comments would get back to you on that. Remember to SHARE we never know who needs this. Thanks.

Love