facebook - カスタム アイコン付きのソーシャル共有リンク

Question

以下のカスタム共有アイコンの作成に関する確実な現在の情報を探しています。

• フェイスブック
• ツイッター
• グーグル+
• リンクトイン
• ピンタレスト

私が取得し続けているすべてのドキュメントは、ソーシャルの「いいね」/「共有」ボタンの使用に関するものであるように思われます - ほとんどの場合、これはあまり魅力的ではないと思います. socialite.js のようなものは、「ネイティブ」のいいね/共有ボタンを使用するときに発生する他の問題のいくつかに対処するのに役立ちます (他に何と呼べばよいかわかりません) が、正直言ってあまりきれいではありません。

参考資料/チュートリアルまたはガイダンスは素晴らしいでしょう。

乾杯。

Answer 1

以下に、各種サービスの URL を紹介します。

ツイッター

http://twitter.com/home?status=[TITLE]+[URL]

ディグ

http://www.digg.com/submit?phase=2&url=[URL]&title=[TITLE]

フェイスブック

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

つまずいた

http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

おいしい

http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]

リンクイン

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

スラッシュドット

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

テクノラティ

http://technorati.com/faves?add=[URL]&title=[TITLE]

タンブラー

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

レディット

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Google ブックマーク

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

ニューズバイン

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

Ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

Evernote

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

Google+

https://plus.google.com/share?url=[URL]

Answer 2

Grzegorz によって提案された解決策は推奨されておらず、それを行う最善の方法ではありません。Facebook の場合は、JS SDK ( https://developers.facebook.com/docs/reference/javascript/ ) をロードし、カスタム ボタンをクリックして UI フィード メソッドを呼び出すだけです。UI メソッドの詳細: https://developers.facebook.com/docs/reference/javascript/FB.ui/

Twitter の場合: https://dev.twitter.com/docs/tweet-button#build-your-own

LinkedIn、Google+ などには他のオプションもありますが、頭の中でそれらを知っているわけではなく、それらすべてが代替手段を提供しているかどうかもわかりません。

検索を続けてください。おそらく十分に深く掘り下げていないだけです。Twitter のリンクを見つけるのに 2 分かかりました :)

Answer 3

Facebook で共有するには、このリンクを任意のオブジェクトに追加するだけです。

<a href="http://www.facebook.com/sharer.php?u=<url to share>
&t=<title of content>">link or image</a>

残りの部分: 申し訳ありませんが、私はあなたを助けることができません.

Answer 4

ボタンや、さまざまなソーシャル ネットワークや URL 共有サービスからの共有数をカスタマイズするには、プロキシ サーバーを使用できます。ソーシャル ボタン サーバーMeddelareはまさにこれを行います (参考までに、私は Meddelare の開発者です)。

Meddelare : これは、AddThis や ShareThis などの共有サービスに代わる、オープン ソースで自己ホスト型の代替手段です。プロキシ サーバーを自分で実行しているため、ユーザーのプライバシーをソーシャル ネットワークの追跡から守ることにもなります。ユーザーは、共有ボタンをクリックすることを決定した場合にのみ追跡をオプトインします。ページにアクセスしたという理由だけで暗黙のうちにオプトインすることはありません。

いくつかのバージョンがあります:スタンドアロン サーバー、Express.js サーバー用のミドルウェア、および完全にカスタム ソリューション用の別のバックエンドです。

サーバーから取得した JSON/JSONP とスクリプトの使用法については、Meddelare の例を参照してください。

Answer 5

Twitter リンク形式http://twitter.com/home?status=[TITLE]+[URL]は廃止され、Twitter iOS アプリでは機能しなくなりました。

代わりに次の形式を使用してください

https://twitter.com/intent/tweet?text=[TITLE]+[URL]

ソース: https://dev.twitter.com/web/tweet-button

Answer 6

これは、PHPでのFacebookの私のソリューションです。他のソーシャル ネットワークでも同様のことができると思います。

function customFShare() {
    $like_results = @file_get_contents('http://graph.facebook.com/'. get_permalink());
    $like_array = json_decode($like_results, true);
    return (isset($like_array['shares']) ) ? $like_array['shares'] : "0";
}
function fShareButton() {
    return "<a data-share='http://www.facebook.com/sharer/sharer.php?u=". $your_url_here ."' href='#' rel='nofollow'><i>Icon</i> <span>". customFShare() ."</span></a>";
}

HTML

<div class="facebook-share">
    <?php echo fShareButton(); ?>
</div>

JQuery

jQuery(document).on("click",".facebook-share > a", function (e) {
        e.preventDefault();
        var winHeight = 350,
            winWidth = 520,
            winTop = (screen.height / 2) - (winHeight / 2),
            winLeft = (screen.width / 2) - (winWidth / 2),
            link = $(this).data('share');
        window.open(link, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
    });

アイコンとカウンターが付いた素敵なFacebookボタンが表示されます。

Answer 7

ここでの回答はどれも、実際に OP の質問に回答しているようには見えません。だからここに私の試みがあります：

実際、多くのソーシャル ネットワークでは、ロゴの使用方法、アイコンやその他のリンクの共有方法に関するガイドラインが提供されています。そのテーマに関して、他の人よりも柔軟な人もいます。

もちろん、ほとんどの場合、それらはあなたのデザインにうまく適合しないため、独自のテーマ/Web サイトの色でカスタマイズすることをお勧めします.

「これは自己責任で行ってください」というのが、おそらくこれまでにない最良の答えです。

私は弁護士ではありません (したがって、これは法的助言ではありません!) が、別の記事で読むことができることによると、カスタマイズされたソーシャル ネットワークのロゴを含むアイコン セットを販売していた一部の Web サイトは、製品リストからそれらを削除するよう求められました。

Facebook、Twitter、またはその他のソーシャル ネットワーク企業が、個人のブログや Web サイト用にアイコンやロゴをカスタマイズしたことであなたを訴える可能性はほとんどありませんが (おそらく可能ですが)、自分自身をカバーしたい場合は、おそらく検討することをお勧めします。彼らのガイドラインに従って...

以下に、ソーシャル ネットワーク ブランドのガイドラインへのリンクをいくつか示します。

• フェイスブック：https ://www.facebookbrand.com/
• Twitter: https://about.twitter.com/company/brand-assets
• Google+: https://developers.google.com/+/branding-guidelines
• StumbleUpon: http://www.stumbleupon.com/press/stumbleupon-image-use-guidelines
• おいしい: http://delicious.com/branding
• リンクトイン: https://brand.linkedin.com/
• Tumblr: https://www.tumblr.com/logo
• Reddit: https://www.reddit.com/about/alien/
• 等

Web で「[ブランド名] ブランド ガイドライン」を検索すると、ほぼすべてのソーシャル ネットワークのガイドラインを見つけることができます。

詳細を読みたい場合は、上記の情報のソース:

• http://www.evolvecreativegroup.com/the-secretly-strict-brand-guidelines-of-social-media/
• https://www.quora.com/Internet-Law-Is-it-legal-to-alter-Facebook-and-Tw​​itter-icons-to-match-the-rest-of-your-website
• https://webmasters.stackexchange.com/questions/54499/putting-altered-social-media-logo-icons-on-my-website-can-i-get-sued
• http://www.kgshultz.com/using-modified-social-media-icons/
• https://www.nosegraze.com/allowed-use-modified-social-media-icons/

お役に立てれば。