开发者

Integrating facebook share button in MVC project

开发者 https://www.devze.com 2023-03-21 12:15 出处:网络
How can I inte开发者_开发技巧grate facebook share button into my ASP.NET MVC project?I want show an image and link.The Microsoft Web Helpers Assembly has a simple solution.

How can I inte开发者_开发技巧grate facebook share button into my ASP.NET MVC project? I want show an image and link.


The Microsoft Web Helpers Assembly has a simple solution. You can instal this via nuget

Install-Package microsoft-web-helpers

After that you can do:

@Facebook.LikeButton(Your_Url)


Step 1. Define a div with id="fb-root"

Step 2. Add Social Share Scripts from facebook account..

                                        <script>
                                            window.fbAsyncInit = function () {
                                                FB.init({
                                                    appId: '..........',
                                                    status: true,
                                                    cookie: true,
                                                    xfbml: true
                                                });
                                            };
                                            (function () {
                                                var e = document.createElement('script');
                                                e.async = true;
                                                e.src = document.location.protocol +
                                                    '//connect.facebook.net/en_US/all.js';
                                                document.getElementById('fb-root').appendChild(e);
                                            }());
                                        </script>

Step 3. On click of your custom share button.. (Note.. share button with id - share_button)

                                        <script type="text/javascript">
                                            $(document).ready(function () {
                                                $('#share_button').click(function (e) {
                                                    e.preventDefault();
                                                    FB.ui(
                                                    {
                                                        method: 'feed',
                                                        name: '@Model.Title', // Share Title
                                                        link: '@Request.Url.AbsoluteUri', // Share Url
                                                        picture: '@ViewBag.OpenGraphImageUrl', // Share Url
                                                        caption: 'Click here for more detail..', // Share caption
                                                        description: '@Model.Description', // Share Description
                                                        message: '' // Share Any Message!.
                                                    });
                                                });
                                            });
                                        </script>

Step 4. Add share div with an id="share_button" then style your div like facebook share button

0

精彩评论

暂无评论...
验证码 换一张
取 消