Skip to content
Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

Youths Forum Youths Forum Youths Forum

Tech Blogs & Programming Tutorials

  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Automobiles
    • Cars
  • Gadgets
    • Phones
    • Android Phones

Categories

  • Automobiles (12)
    • Cars (7)
  • Blog (103)
    • Poems (2)
    • Space (2)
  • Command (2)
  • Education (2)
  • Entertainment (4)
  • Gadgets (9)
    • Phones (8)
      • Android Phones (4)
  • HTML Templates (11)
  • IT Training Institutes (1)
  • Lifestyle (4)
  • News (51)
  • Others (23)
  • Programming (296)
    • API (16)
    • CSS (83)
    • Database (4)
    • Hosting (1)
    • HTML (37)
    • JavaScript (117)
      • JQuery (27)
      • ReactJS (7)
    • PHP (116)
  • Python (3)
  • recipes (1)
  • SEE Result (1)
  • Server (3)
  • Blog
  • News
  • Programming
    • PHP
    • JavaScript
    • JQuery
    • CSS
    • HTML
    • API
  • Stock Market Live
  • Automobiles
    • Cars
  • Gadgets
    • Phones
    • Android Phones
Close

Search

JavaScript

How to share URL in Facebook Messenger through web ?

By Admin
May 18, 2022 1 Min Read
0

The following script enables you to share any link/URL in Facebook Messenger from webpage. We have used Facebook JavaScript SDK to achieve this.

The script opens a new window in desktop web browser that enables you to share any link to specified friend of yours. While in mobile browser, it opens up the Facebook Messenger app and the link can be shared easily with your friends.

Follow this video for complete guidance :

Full Source Code :

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0&appId={YOUR_FACBOOK_APP_ID}&autoLogAppEvents=1" nonce="ywRETNx8"></script>



<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<style type="text/css">
    body{
        background: #eef1f5;
    }
    .messenger-wrap{
        color: #0084ff;
        background: #fff;
        padding: 8px 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-decoration: none;
    }
    .messenger-wrap:hover{
        background-color: #0084ff;
        color: white;
    }
</style>

<a href="javascript:;" class="messenger-wrap" onclick="messengerShare()">
    <i class="fab fa-facebook-messenger"></i> 
    <span>Share on Messenger</span>
</a>

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId: '{YOUR_FACEBOOK_APP_ID}',
        xfbml: true,
        version: 'v2.9'
    });
    FB.AppEvents.logPageView();
};


function isMobile() {
    const toMatch = [/Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i];
    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

function messengerShare() {
    url = 'https://reeteshghimire.com.np/';
    if (isMobile()) {
        window.location.href = "fb-messenger://share/?link=" + url;
    } else {
        FB.ui({
            method: 'send',
            link: url,
            redirect_uri: url
        });
    }
}
</script>

 

Tags:

Facebookmessengershare
Author

Admin

Follow Me
Other Articles
Previous

How to create red blinking dot using CSS ?

Next

Design progress bar using CSS and JavaScript

No Comment! Be the first one.

Leave a Reply

Your email address will not be published. Required fields are marked *

FIFA World Cup 2026 Predict and Win by SportsGuff

Recent Posts

  • Unpacking Nepal’s Record Rs 2.12 Trillion Budget and What It Means for You
  • How to Write a Strong Scholarship Application: The Ultimate Step-by-Step Guide
  • How to Prepare for Exams Without Stress: The Ultimate Science-Backed Guide
  • Chiranjibi Adhikari Appointed Acting President of CAN Federation
  • How to Design a Student Marksheet Using HTML and CSS

Tags

adsense ai animate animation animation using HTML and CSS API blog calculator chatgpt Cryptocurrency CSS css animation design Email Facebook featured filemanager file manager free template google htaccess HTML image Instagram interview javascript JQuery jquery ui NADA AutoShow NADA Auto Show 2024 password PHP Progressive Web App PWA QR random react reactjs Rotate travel Twitter vpn youthforum youthsforum youtube

About Us

At Youths Forum, we are passionate about sharing knowledge that empowers students, educators, professionals, and technology enthusiasts.

Our Mission

Our mission is simple: to make technology and education accessible, understandable, and beneficial for everyone. We strive to create content that helps our readers learn new skills and stay updated with industry developments.

RSS RSS

  • Unpacking Nepal’s Record Rs 2.12 Trillion Budget and What It Means for You Admin
  • How to Write a Strong Scholarship Application: The Ultimate Step-by-Step Guide Admin
  • How to Prepare for Exams Without Stress: The Ultimate Science-Backed Guide Admin

Quick Links

  • Stock Market Live
  • Parliament Election 2082
Copyright 2026 — Youths Forum. All rights reserved. Blogsy WordPress Theme