As it’s commonly understood, Web tabs do not function within the Salesforce1 Mobile Navigation Bar. Consequently, the solution involves creating a Visualforce page. I will guide you through the process step by step on how to create a Visualforce page that displays a web page within Salesforce1.
Steps for Developing a Mobile-Compatible Visualforce Page:
Step 1: Navigate to Setup -> Build -> Develop -> Visualforce Pages.
Step 2: Select the “New” button.
Step 3: Input the following code –
<apex:page showHeader="false">
<apex:iframe src="https://www.facebook.com" frameborder="false" height="750px" scrolling="true"/>
</apex:page>
Note: You have the flexibility to input your preferred URL.
Step 4: Provide a Name and Label for the page, such as “Facebook_Page.”
Step 5: Check the boxes for “Available for Lightning Experience,” “Lightning Communities,” and the mobile app, then save it.
Step 6: Generate a Visualforce Tab. Proceed to Setup -> Build -> Create -> Tabs, and click “New” in the Visualforce Tab section. Choose “Facebook_Page” from the Visualforce Pages list, specify a Tab Name and Tab Label (e.g., “Facebook”), pick a Tab Style icon, and continue with “Next,” “Next,” and “Save.”
Step 7: Now, include the Visualforce Tab in the Salesforce1 App Navigation Menu. Go to Setup -> Mobile Administration -> Salesforce Navigation. Transfer “Facebook” from the Available list to the Selected list and save your changes.
Step 8: Access the Salesforce1 Mobile App and observe your desired output.
Thank you for your attention, and happy exploring!