Step by Step: Embedded Salesforce page in WordPress

Here I am going to show you to to Embedded Salesforce page in WordPress as I have mentioned in my previous post How to get data in Salesforce from WordPress without authentication?

We are going to create a Visualforce Page, and make it available in WordPress.

Before we begin, you will need a custom object obj_contacts which have at least a custom field fl_mobile. You also need to create a test record and write down the id. You may see the id of the record by reading the detail of it.

For example, if it may be access by url https://na10.salesforce.com/a01A0000003eiAS, the id is a01A0000003eiAS.

Create a Visualforce Page

1. Make sure your Force.com [Site] is active in [App Setup]→[Develop]→[Sites]

2. Enable the [View All] in [Data Administration] for the object need to be viewed in WordPress by editing the [Profile Detail]

3. Create a Visualforce page in [App Setup]→[Develop]→[Pages] as below and named ContactMobile. This page shows nothing but only the mobile. You may also customized with CSS and html tags later.

<apex:page cache="false" sidebar="false" showHeader="false" standardController="obj_contacts__c">

    <apex:outputText value="{!obj_contacts__c.fl_mobile__c}"></apex:outputText></apex:page>

Visualforce is like html tags. The build-in editor provides auto-complete. More detail syntax and components for Visualforce may be found in Visualforce Developer’s Guide.

4. Add the page in Sites by clicking [Edit] button in [Site Visualforce Pages] section. Then move the page from [Available Visualforce Pages] to [Enabled Visualforce Pages]

Enable Visualforce page ContactMobile available to public in Site

5. Test your page in your browser with url like [Domain Name in Site]/[Visualforce Page Name]/?id=[id]. There is no need to login with a Salesforce account.

For example, If your Site url is http://free-12415f14c3a-124e539428a-125109c507b.force.com/ , you may assess the fl_mobile field in obj_conbtact with id a01A0000003eiAS by http://free-12415f14c3a-124e539428a-125109c507b.force.com/ContactMobile?id=a01A0000003eiAS

Embed the page In WordPress

1. install and activate iframe in WordPress

2. Add the shortcode [iframe src=”http://%5BDomain Name in Site]/[Visualforce Page Name]/?id=[id]” width=”100%” height=”50″] to embed the Visualforce page in content. You may change the width and height as your wish.

In this example, you may add the shortcode as [iframe src=”http://free-12415f14c3a-124e539428a-125109c507b.force.com/ContactMobile?id=a01A0000003eiAS” width=”100%” height=”26″].

Now, you may see the a Salesforce Visualforce page embedded in WordPress content.

Reference

1. How to get data in Salesforce from WordPress without authentication?
2. Salesforce: Managing Force.com Sites
3. Salesforce: Visualforce Developer’s Guide
4. WordPress Plugin: iframe