Vue uses facebook twitter to share examples
This article mainly introduces the example of Vue using Facebook and Twitter to share. Now I share it with you and give it as a reference.
Record a vue usage share
Sharing reference document for fixed content
facebook sharing document
twitter sharing document
vue uses
facebook and uses sharing
to find index.html and add the code
<!-- facebook 分享 -->
<p id="fb-root"></p>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v2.12&appId=你的APPID&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>Use in vue
The first way is html
<p class="fb-share-button" data-href="http://dev.XXXX.io/" data-layout="button_count" data-size="small" data-mobile-iframe="true"> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a> </p>
The second way is js
facebook() {
// 初始化
FB.init({
appId: 你的appid,
autoLogAppEvents: true,
xfbml: true,
version: "v2.12"
});
FB.ui(
{
method: "share",
mobile_iframe: true,
href: "http://dev.XXXX.io/?test=12345"
},
function(response) {}
);
},twitter Use sharing
Find index.html and add the code
<!-- twitter 分享 -->
<script>window.twttr = (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>Use on the vue page
Add
<p class="twitter-share-button" id="container"></p>
javascript code in xxx.vue
twitter() {
console.log(twttr)
twttr.widgets.createShareButton(
"http://dev.XXXX.io/?test=12345",
document.getElementById("container"),
{
text: "分享测试",
size: "large",
hashtags: "example,demo",
via: "twitterdev",
related: "twitterapi,twitter"
}
);
}The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .
Related articles:
Vue implements active click switching method
Detailed explanation of Vue.js project API and Router configuration split Practice
NodeJS method to implement irreversible encryption and password cipher text storage
The above is the detailed content of Vue uses facebook twitter to share examples. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What are the blockchain data analysis tools?
Feb 21, 2025 pm 10:24 PM
The rapid development of blockchain technology has brought about the need for reliable and efficient analytical tools. These tools are essential to extract valuable insights from blockchain transactions in order to better understand and capitalize on their potential. This article will explore some of the leading blockchain data analysis tools on the market, including their capabilities, advantages and limitations. By understanding these tools, users can gain the necessary insights to maximize the possibilities of blockchain technology.
A list of historical prices since the birth of Bitcoin BTC historical price trend chart (Latest summary)
Feb 11, 2025 pm 11:36 PM
Since its creation in 2009, Bitcoin’s price has experienced several major fluctuations, rising to $69,044.77 in November 2021 and falling to $3,191.22 in December 2018. As of December 2024, the latest price has exceeded $100,204.
Bitget Exchange official website login latest entrance
Feb 18, 2025 pm 02:54 PM
The Bitget Exchange offers a variety of login methods, including email, mobile phone number and social media accounts. This article details the latest entrances and steps for each login method, including accessing the official website, selecting the login method, entering the login credentials, and completing the login. Users should pay attention to using the official website when logging in and properly keep the login credentials.
Where is the official entrance to DeepSeek? Latest visit guide in 2025
Feb 19, 2025 pm 05:03 PM
DeepSeek, a comprehensive search engine that provides a wide range of results from academic databases, news websites and social media. Visit DeepSeek's official website https://www.deepseek.com/, register an account and log in, and then you can start searching. Use specific keywords, precise phrases, or advanced search options to narrow your search and get the most relevant results.
How much is the price of MRI coins? The latest price trend of MRI coin
Mar 03, 2025 pm 11:48 PM
This cryptocurrency does not really have monetary value, and its value depends entirely on community support. Investors must carefully investigate before investing, because it lacks practical uses and attractive token economic models. Since the token was issued last month, investors can currently only purchase through decentralized exchanges. The real-time price of MRI coin is $0.000045≈¥0.00033MRI coin historical price As of 13:51 on February 24, 2025, the price of MRI coin is $0.000045. The following figure shows the price trend of the token from February 2022 to June 2024. MRI Coin Investment Risk Assessment Currently, MRI Coin has not been listed on any exchange and its price has been reset to zero and cannot be purchased again. Even if the project
gateio official website entrance
Mar 05, 2025 pm 08:09 PM
The official Gate.io website is accessible through the official application. Fake websites may contain misspelled, design differences, or suspicious security certificates. Protections include avoiding clicking on suspicious links, using two-factor authentication, and reporting fraudulent activity to the official team. Frequently asked questions cover registration, transactions, withdrawals, customer service and fees, while security measures include cold storage, multi-signatures, and KYC compliance. Users should be aware of common fraudulent means of impersonating employees, giving tokens, or asking for personal information.
Binance free airdrop entrance
Mar 04, 2025 pm 05:39 PM
Binance's free airdrop entrance is not fixed, and the official rarely directly organizes free collection activities. Obtaining Binance Airdrop is closely related to users participating in ecosystem activities, such as becoming an active user, holding a specific currency, participating in community activities, completing KYC certification, etc. It is emphasized that we must actively participate in the ecosystem when obtaining airdrops, pay attention to official and project information, and do not believe in the channels to ensure airdrops, beware of fraud, and increasing activity is an effective way to increase opportunities.
The track is cold, can the AI Agent in the vertical field break the deadlock?
Mar 05, 2025 am 07:57 AM
Web3 Vertical AIAgent: Subvert tradition and reshape the industry landscape? This paper discusses the application differences of AIAgent in Web2 and Web3 and the future potential of Web3Agent. Web2 has been widely used to improve efficiency, covering sales, marketing and other fields, and has achieved significant economic benefits. Web3Agent combines blockchain technology to open up new application scenarios, especially in the DeFi field. It demonstrates potential beyond Web2Agent through token incentives, decentralized platforms and on-chain data analysis. Although Web3Agent is currently facing challenges, its unique advantages make it expected to compete with Web2 in the medium and long term, and even reshape the industry landscape. Web2AI
